Jump to content
Sign in to follow this  
pspr

Using Hero Title As A Link

Recommended Posts

pspr    0
pspr

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
pspr    0
pspr

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
James B    436
James B

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

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
pspr    0
pspr

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
Danny    1,327
Danny

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. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
pspr    0
pspr

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×