Forums

Change link behavior in footer only

Permalink
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?
 
KJLJon replied on at Permalink Reply
KJLJon
Example:
<div class="footer">
<a href="/test">Test!</a>
</div>


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
Steevb
Hi,

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?

Steev
KJLJon replied on at Permalink Best Answer Reply
KJLJon
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="http://allcomm21-osd.com/index/index.php?cID=1">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>
<p><span><br></span></p>
</div>


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
KJLJon
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!