Archived

This topic is now archived and is closed to further replies.

  • 0

Using Hero Title As A Link

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

div.pl-hero h1.m-bottom a:hover {
    color: #E3DADA !important;}

Share this post


Link to post
Share on other sites

Posted · Report post

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;
}

 

Share this post


Link to post
Share on other sites

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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. http://www.w3schools.com/css/css_text.asp

 

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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:

 

 

#site .section-hero h1 a:hover {
border-bottom: 5px solid #F00;
text-decoration: none !important;
}

Share this post


Link to post
Share on other sites