[SOLVED] How can i make the footer font color different from the rest? Don't let me down - I've messed with css 'til the cows come home!

[jdmorrisn]

My page has a white background, all the links are coloured green(line 156 - which controls almost every text on my page apart from modules somehow), but my footer background is green - therefore I want to make the text on the footer white (footer block various links) - how can i do this without turning all links white? I just want the footer block various links white. This must be an easy one, no?

[rocky]

Use Firebug (or the Developer tools in IE8) to see exactly which CSS is being applied. This will let you know which CSS to change or add to fix the problem. I'd need a link to your site to do this myself.

[jdmorrisn]

I used firebug and I found the places that control the text but I cannot seem to make it so that this text is different from the others. if I change something - it all changes.

The global style controls the text and is here in line 156:

/* global style */
a {
   color: #80CB15;
   text-decoration: underline;
   outline: none
}

The footer and links are controlled from line 847:

/* Footer */
#footer {
   border-top: 1px solid #d0d3d8;
   padding: 0.5em 0;
   clear: both;
   background: #80CB15;
   color: #ffffff;
   text-align: center
}
#footer .block_various_links { list-style: none }
#footer .block_various_links li a { text-decoration: none }
#footer .block_various_links li {
   text-align: center;    
   display: inline;
   border-left: 1px solid #888;
   padding: 0 2px 0 4px
}
#footer .block_various_links li.first_item {
   border: none;
   padding-left: 0
}

[rocky]

If you can't change just that text, then you will need to add a new CSS block that targets just that text. Use the ID or class of the element and its parent elements to target it.

[jdmorrisn]

Apologies, I am not the smartest when it comes to CSS, a few lines here and there are no problem. But what is the code that defines a new block?

[rocky]

Perhaps it would be easier to provide a link to your site so I can tell you what to add.

[jdmorrisn]

I sent you a PM with the site address. I did not want to put my site here on the forum since last time I did this I noticed in search engines they were directed to Prestashop forum rather than my site, which was a little annoying.

But you can put the comments on what I should change in the forum at least.

Basically all the links on the page are in default blue at the moment, but I want the footer link in white.

[PrestaSupport]

As above thread, it is only to use Firebug to check everything out. In this case i suggest to change:

#footer .block_various_links li a { text-decoration: none }

to something else like e.g:

#footer .block_various_links li a { color:#ffffff; text-decoration: none }

[jdmorrisn]

Not so easy, otherwise it would have been done the first time I tried. This is the obvious choice and you would think it would work - and if you see my above thread I have tried these already. Like I said, the global style is controlling all these links and it makes no difference how or what I put in the footer links css, it doesn't change, it stays with the default. That's my problem.

[rocky]

The problem is that there is a mistake in the footer code:

>
</pre>
<ul>
</ul>
<a href="http://www.mysite.com" title="" rel="external nofollow">Copyright 2010 © My Site</a><br

It is missing the opening

tag, which is causing problems with the CSS. Try changing it to:

>
</pre>
<ul>
Copyright 2010 © My Site
</ul>

[jdmorrisn]

Ok, this works to make the text white in the footer while leaving the other page links green. But now there is small grey vertical line at the beginning of the footer text. How do I get rid of that?

[rocky]

That border is in the block on lines 865-871 of global.css:

#footer .block_various_links li {
   text-align: center;    
   color: #ffffff;
   display: inline;
   border-left: 1px solid #888;
   padding: 0 2px 0 4px
}

Remove the border-left line.

[jdmorrisn]

Sorted, thanks once again.

[Neeeedhelpfastpls]

Hi,

 

how can i solve this in version 1.4.4? I am currently facing the same issue but my css code is different for as mentioned..

please help!