Jump to content


Photo
- - - - -

Using Hero Title As A Link


  • Please log in to reply
8 replies to this topic

#1 pspr

pspr

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 12 April 2013 - 07:34 PM

Hi so I am using the hero title as a text link. The Link works. The font is the way I want. I used css to set the color to white. But for some reason I cant figure out how to customize it so when I go over the link it turns black. This is the code I am putting but its not coming out right

 

 

#hero.copy div.copy-pad div.pl-hero-wrap div.pl-hero h1.m-bottom a {
  hover:black;
color:white;
}

 

Color white for the white font which works perfectly but the hover isnt giving me any result.

 

Thank You for your help

 

Seena Khoee



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2013 - 08:58 PM

Which page is the hero unit on? I can't find it on the site..



#3 pspr

pspr

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 12 April 2013 - 09:05 PM

oh my bad james.... I chaneged of the shape of the hero BIG TIME! my titles... on my front my page.. HIGHLIGHT , PLAYER MIX , ENTERTAINMENT , and INTERVIEWS those 4 titles are in a HERO.... I like the hero design thats why i put it that way. makes it easy for me to work with. But yeah. I cant get access to the hover in css which is what im trying to do



#4 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2013 - 09:54 PM

When you add a hover element to the css it goes in with the selector before the brackets, like

Please Login or Register to see this Hidden Content



#5 pspr

pspr

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 12 April 2013 - 10:01 PM

preciate it James. I decided to go with

 

div.pl-hero h1.m-bottom a:hover {

    text-decoration:underline; !important;
}
 
instead. But I noticed the underline is pretty thin. I tried putting in font-weight with it but i didn't see a change...
i tried 
 

div.pl-hero h1.m-bottom a:hover {

    text-decoration:underline; !important;
    font-weight: bold;
}

 



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15891 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 April 2013 - 10:32 PM

Not sure why you're using the Hero section for adding titles, it really wasn't designed to do this ?

 

Instead, why not replace them with the Highlight section or ContentBox section, which were design to do this kind of job. 



#7 pspr

pspr

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 12 April 2013 - 10:42 PM

i see...... dayum.... but danny just curious tho, is there any way i can make that underling bold or thicker?



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 12 April 2013 - 10:53 PM

The underline command in the css seems to take the same styling as the font, so using the font-weight command is the best way to do it but it will affect both.

Please Login or Register to see this Hidden Content

 

You could use border-bottom instead on the element and then you'll be able to choose the thickness of the line in the css.



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 15891 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 April 2013 - 11:01 PM

You cant change the depth of underline. However, you could remove it and replace it with border-bottom.

 

For example, remove the code you have at the moment effecting the hover and replace it with this:

 

 

Please Login or Register to see this Hidden Content