Change link behavior in footer only

I've hard-coded some "Quick Links" into my footer, and I want to have link behavior that's different (mainly color for active links) from the other areas. When I change the behaviors in the footer.php, it changes in the main and sidebar as well. How can I change it just in the footer?

View Replies: View Best Answer
KJLJon replied on at Permalink Reply
<div class="footer">
<a href="/test">Test!</a>

so in this example the class name is `footer` so in the CSS you could do something like:
.footer a:visited,.footer a:link{color:#000}
.footer a:active,.footer a:hover{color:#F00}

If you want to link to your website, I could possibly look at it and come up with a direct solution?
allcomm21 replied on at Permalink Reply
Thanks for your help. I cannot get it to pay attention to the CSS.

I want the links in the blue bar in the footer to be the light blue indicated, and the hover to simply underline. (So far, "Home" is the only one with a link. Re the basic font/size/color, I finally gave up on the CSS and just put that in the hard code.)

I don't know if you can access it, so I'm attaching my main.css and footer.php.
Thanks again.
Mark Wright
Steevb replied on at Permalink Reply

CSS means, 'Cascading Style Sheet', so if a style is set before another it may cascade down and interfere with another!

To over-ride you could try: '!important' at the end of the line.

For example: a:hover {color:#FFF !important;}

Does that help?

KJLJon replied on at Permalink Best Answer Reply
ok so after looking at it,

You are going to want to give this div a class
<div style="padding-top: 24px;">
<p style="text-align: center; font-size: 14px; color: #ffffff; line-height: 24px; background-color:#26618c; background-repeat:no-repeat;"> 
<span><strong>Quick Links:</strong>&nbsp;&nbsp;<a title="Home" href="">Home</a> &nbsp; &nbsp; Our Physicians &nbsp; &nbsp; Request an Appointment &nbsp; &nbsp; Insurance &nbsp; &nbsp; Quick Care Clinic</span></p>
<p style="text-align: center; font-size: 14px; color: #ffffff; line-height: 24px; background-color:#26618c; background-repeat:no-repeat;">Policies &nbsp; &nbsp; Locations/Directions &nbsp; &nbsp; Pay Bill &nbsp; &nbsp; Contact Us</p>

so you could change the div to be something like:
<div class="quick-links" style="padding-top: 24px;">

Then you can go into your theme and hit customize. There is a part that says "Add Your CSS".

Include this:
.quick-links a:link, .quick-links a:visited, .quick-links a:active{
color: #7AB9F0;
text-decoration: none;
.quick-links a:hover{text-decoration:underline;}

(I think that is the color your looking for?)

Otherwise if your looking for a method to auto-populate the blue quick links bar you should look at the `Auto Nav` block.

(btw: I didn't see any attachments, and fwi I would be careful on how much control you give to a user name and password that is displayed publicly over a forum)
allcomm21 replied on at Permalink Reply
This worked! Thanks very much.

fyi, i was replying to the email i got and didn't realize it would display on the forum (and also not attach the attachments). lesson learned.
KJLJon replied on at Permalink Reply
oh wow, I learn something new everyday. I didn't realize that I could just reply to the email :) (I always end up logging in and finding the post)..

That is really good to know :)

But anyways, glad I could help!