Template/CSS Help With Links

nrerwin said 11 months, 3 weeks ago:

Hello.

I’ve gone through this specific template’s (MX707) CSS code multiple times attempting to change a specific value but I just can’t seem to find the correct piece of coding.

Here is my website: finalverdictgaming.com.

Pardon the weird layout for the moment as I’ve just been focusing on getting the link color and formatting how I want. But what I need help with is the hover color that appears when one hovers over a navigation link. I would like to get it to a point where when a user hovers over a link, it has the background color how it is now (for navigation links only). However, I do not want the background color appearing when one hovers over the buttons at the top right or any other link on the page.

How would I go about doing this?

Another question I have is regarding the main content area where there is a white box in the middle of the page. How would I go about increasing the height of that white box so that more information can be fit into it?

Thanks for any help offered to this CSS newbie.

Nate D said 11 months, 3 weeks ago:

@nrerwin – It looks like you have the hover background-color for all links in the Advanced Color Options and for just the Navigation links in your Advanced CSS file. You can select the red stripe for transparent in Advanced Color Options:

http://support.godaddy.com/help/article/5187/using-advanced-color-options-in-website-tonight

If you drag the content blocks (yellow outline) into the containers (blue outline) the page should automatically expand with the content you add to the body.

adamr said 11 months, 3 weeks ago:

@nrerwin

The information @Nate D provided should help you get those issues squared away. Let us know if you have any further trouble!

-Adam

nrerwin said 11 months, 3 weeks ago:

Thanks for the replies guys.

@Nate D I’m looking at the advanced color options from the website tonight builder right now but I am not seeing an option for hover background color. I see mouseover text color but not a background color. I guess I’ll keep the color in the advanced css if that just affects the navigation links and not the final verdict gaming webpage link in the top left. But let me know on this hover background-color for all links thing because I’m not finding the option.

Thanks,
Nrerwin

nrerwin said 11 months, 3 weeks ago:

@Nate D As far as the white background, in the website builder the white expands with the news block which is a feed but as you can see in the updated site it doesn’t stay expanded with the little amount of news content I have. Would there be a way to make it match how it looks in the website builder without the news block? I may try to include the twitter and the calendar in the blue box but it really doesn’t seem to be working how I want it to.

Nate D said 11 months, 3 weeks ago:

@nrerwin – It looks like you were able to “dock” the content, so the page expands with the content.

Here is the CSS to remove that background-color on hovered links, make sure to put it below the declaration for “a” in your Advanced CSS file:

a:hover {
background-color: transparent;
}

nrerwin said 11 months, 3 weeks ago:

@Nate D – Yeah, I wasn’t sure about the blue box thing at first but with some work I got it formed to something I’m satisfied with. It is a little awkward to deal with in terms of pages but now I know that the blue box is what defines the page. Originally I had been ignoring the blue box and placing elements wherever I pleased. Hopefully this will make things easier.

As far as that code, it took some figuring out but it seems to be working now. Thanks a lot for all the help!

nrerwin said 11 months, 3 weeks ago:

@Nate D – Actually one more thing, would it be possible to make it so when hovering over Final Verdict Gaming it changes the link color, just the text color though?

Nate D said 11 months, 3 weeks ago:

@nrerwin – Yes, but you will need to edit the HTML a bit first, activate the header block and click HTML in the lower right corner.

Find this portion, and just remove the <font...> and </font>

<a style="text-decoration: none;" href="News.php">
<font color="#1E90FF">Final Verdict Gaming</font>
</a>

Like this:

<a style="text-decoration: none;" href="News.php">
Final Verdict Gaming
</a>

Then this CSS should work, it adds back the font color as well as the hover effect:

.sf_main_header a:link {
color: #1E90FF;
}

.sf_main_header a:hover {
color: #AB8101;
}

nrerwin said 11 months, 3 weeks ago:

Ah sweet. That worked great!

One last question I guess is that my friends want the background of the navigation links to be a different color when hovering. I’m looking into the style code now but cannot seem to find where I might add a piece of code or change an existing hex color code.

nrerwin said 11 months, 3 weeks ago:

Actually, it started not working for some reason. I’ve been trying to add back in the Airstream font but it isn’t working.

nrerwin said 11 months, 3 weeks ago:

Hm, color also isn’t working. Seems to work in the website builder and be the color I need it to be but when publishing it isn’t staying the correct color.

Nate D said 11 months, 3 weeks ago:

@nrerwin – It looks like you got the font and color of the header text worked out now.

This would be the background color when the navigation items are hovered.

.sf_navigation ul li a:hover {
background-color: #AB8101;
}

nrerwin said 11 months, 3 weeks ago:

@Nate D – Yeah I kind of did in a way. It wasn’t really done through the CSS completely and I had to keep the font family code in the html rather than do it via the CSS code. I’m not sure if you see this or not but sometimes when I load the page, it shows the final verdict gaming text in Georgia font rather than Airstream. I’ve seen Georgia in the CSS code but entering Airstream seemed to do nothing. But as long as it stays how it is now, it shouldn’t be a big deal unless it is in fact showing the Georgia font before loading the Airstream font. Would there be a way to fix this if that is the case?

I’ve added that code for the hover and it works everywhere except on the subnav. When you hover over the livestream link it is blue until you hover over the other links. Would I need to add a code under this hover code (like a:active or something)?

Thanks again!

Nate D said 11 months, 3 weeks ago:

@nrerwin – It should work like this…

.sf_navigation ul li a:hover, .sf_navigation ul li.sfhover a, .sf_navigation ul li:hover {
background-color: #1E90FF;
color: #A9A8A8;
}