Search code examples
csswordpressfooter

Can't change footer colour in wordpress

I have spent hours trying to figure out what's going wrong, but I can't seem to figure out why I can't change the colour of the text in my wordpress footer.

Here's the code for footer.php:

<div id="footer">

<div class="fcred">
Copyright &copy; <?php echo date('Y');?> <a href="<?php
bloginfo('siteurl'); ?>" title="<?php bloginfo('name'); ?>"><?php
bloginfo('name'); ?></a> - <?php bloginfo('description'); ?><br />
<?php fflink();?> | <a href="[email protected]" title="Contact Developer">Developed by XXX</a> Design by <a href="http://www.XXX.com" title="WordPress Themes">XXX Themes</a>.
</div>  
<div class='clear'></div>   

<?php wp_footer(); ?>

</div>

</body>
</html>

below are the relevant CSS lines - I've tried to change everything to white, but nothing changes in the actual site:

#footer {
    padding:5px 0 5px 0px;
    color:#FFF;
    font-size:11px;
    background:#000 ;
    z-index: 200;
    bottom: 0px;
    left: 0px !important;
    position: fixed;
    width:100%;
    clear:both;
    }

#footer a:link , #footer a:visited{
    color:#FFF;
    }

#footer a:hover {
    color:#FFF;
    }


.fcred {
    width:700px;
    text-align:left;
    margin:0px 0px 0px 30px;
    line-height:16px;   
}

Nothing I do seems to make any change on the actual site. I'm fairly sure the code is OK and it seems like it's being overridden somehow, but I have no idea where to look. I'm fairly new to Wordpress in general so would appreciate any input.

Thanks!

Solution

  • What are you using to inspect the page elements once their processed by the browser?

    In chrome, right-click the element in question and select, "Inspect Element."

    If FireFox, look in to downloading FireBug add-on as it's better than the default FF inspection tool.

    Both of these add-ons will tell you exactly, whether inline or from a stylesheet, where the styling is coming from.