Remove the underline on hover from the footer links

[Paul B]

Someone asked how to remove the underline on hover from the footer links so here are some simple edits to achieve that.

Again, add all custom css to EXTRA.css.


To remove the underline from the copyright text add this:

#copyright .concealed:hover {
text-decoration: none !important;
}

To remove the underline from Contact Us, Home & Top add this:

.footerLinks a[href]:hover {
text-decoration: none;
}

To remove the underline from Terms and Rules add this:

#legal a[href]:hover {
text-decoration: none;
}

To remove the underline from the Style Chooser and Language Chooser add this:

.footer .choosers a[href]:hover {
text-decoration: none;
}

 

[Peggy]

Unfortunately this doesn't seem to work in the Flexile theme, for whatever reason.

 

[Deleted member 2163]

Unfortunately this doesn't seem to work in the Flexile theme, for whatever reason.

If you have Firebug installed, use the element inspector to find what CSS is overriding it. It'll tell you what file, line number, etc. If the css is crossed out, that means it has been overridden by something else.

 

[Peggy]

Firebug confuses the beejeebers out of me.

 

[Paul B]

Updated with code to remove the underline on hover for the copyright text which has reappeared with Beta 5.

 

[ArnyVee]

Very cool, thanks Paul!

 

[Peggy]

I wonder what you would add to this code to get these links to change color on hover, rather than underline?

 

[Paul B]

Just update the code to add e.g. color: #cc0000 !important; before the closing }

Like this:

#copyright .concealed:hover {
text-decoration: none !important;
color: #cc0000 !important;
}

 

[Peggy]

ahha! Thanks again, worked like a charm.

 

[bogus]

Good evening.
I wanted to add a white background to the copyright and Terms Line, but i cant get it working.
What i´ve done is

#copyright  {
background: @contentBackground;
}

I just get is the Copyright Part white

 

[Paul B]

Edit the .footerLegal .pageContent css to add a background-color: #FFFFFF;
You will need to reduce the padding though otherwise it will give you a large white block.

Try this:

.footerLegal .pageContent {
    background-color: #FFFFFF;
    font-size: 11px;
    overflow: hidden;
    padding: 5px 0;
    text-align: center;
}

 

[bogus]

Thank you. Thats it.
Could you also help to get the Copyright and Terms Text a bit away from the Border?
Like in the example (green arrows)

 

[Paul B]

Add some margin to the following classes:

#copyright {
    color: #646464;
    float: left;
    margin-left: 10px;
}

#legal li {
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

 

[bogus]

Great. Thanks a lot Brogan

 

[DaKat]

Anyone know how I can include my own site copyright information (centered) in the footer field too?

 

[Paul B]

Open the footer template and look for this just below the footerLinks section: <span class="helper"></span>

Then insert your content in that span, for example:
<span class="helper"><div style="text-align: center">Copyright My Site</div></span>

Obviously you will want to style it accordingly, that's just to get you started on where to add it to the template.

 

[DaKat]

Got it - thanks Brogan!