Date and Time in Header need to be in white

[CarlC]

Hi,

I am adding the code to display the time & date in my header but have run into a slight problem. My background is black so I need to change the output to white text. I've searched the web and can't seem to find code to include to make it white.

I think I would also like to center it but not having much luck there either.

Any help would be appreciated.

[stevesh]

We'll need a link to your site. Use this format: mysiteDOTcom.

[CarlC]

Here it is

papastemplatesdotcom

Thanks in advance

[RodG]

I've searched the web and can't seem to find code to include to make it white.

Well, there's your problem. You'll be better of restricting the search to your website rather than the entire web. :)

I think I would also like to center it but not having much luck there either.

Using the Developers Toolkit (admin->tools) enter bof-display today date and time into the Look-up in all files box.

This will identify the page you'll need to edit. (probably tpl_header.php)

You'll probably need to either add or define a 'style' to the code that creates the output, because by default it is using 'logoWrapper' style which is also 'shared' by several other wrappers.

Hmmm, you *MAY* be able to achieve what you want by simply by adding the following to your stylesheet

#logoWrapper {
color: white;
}

I say 'may' because this will have a possible side effect of changing other text to also be white, even where not needed, or, if the existing definition of logoWrapper is read *after* yours, then yours will have no apparent effect. (either delete the existing definition, or ensure that yours is the last one to be read)

Cheers
RodG

[RodG]

Any help would be appreciated.

Update:
Add this too your stylesheet instead of my previous suggestion.

#headerWrapper {
color: white;
}




This doesn't appear to have any unwanted side effects (on your site)

Cheers
RodG

[CarlC]

Hi RodG,

Thanks for the help I tried all of your examples but neither works. The code I inserted into the tpl_header was the code that was posted in the plugins from here.

<!--bof-display today date and time-->

<?php

echo date('l jS F Y - h:ia');

?>

<!--eof-display today date and time-->

I thought there was a way to have a color specified when using echo, but the only one I found didn't work. Its not that important but I thought it would be a good idea as I'm developing the site.

Appreciate your help
Carl

[RodG]

I thought there was a way to have a color specified when using echo, but the only one I found didn't work.

There is.

Try this:

<!--bof-display today date and time-->

<?php

echo "<div style=\"color:white\">" ;  
echo date('l jS F Y - h:ia');
echo "</div>" ; 

?>

<!--eof-display today date and time-->

There ARE better ways to do this (such as "<div class='xxxxx'> or '<div id=xxxxx>' and then adding this new class/id to your stylesheet, but for a quick n dirty fix, the inline style should work ok.

I suspect the other changes I suggested had no effect due to where the change was made. However, my second suggestion did have the desired effect when I tried it.

Anyway, handy hint time. If you install Firefox (or Chrome) with the developer plugin, you can right-click on any page element (such as where your date/time display is) then 'Inspect Element' you'll be greeted with a .css editor of sorts. Although it can look daunting at first with a bit of playing around you'll start to realise exactly what you are looking at, and you can start to make many changes in regards to how the site looks. If you screwup (and you will), just refresh the page and start again. The changes you make won't be permanent, so when you DO find what you want, just take note of the stylesheet (and line#) and then manually apply the same changes to the actual file.

Be careful though. Playing with the .css on a live site can be very addictive (and fun). :)

Cheers
Rod

[picandnix]

Update:
Add this too your stylesheet instead of my previous suggestion.

#headerWrapper {
color: white;
}




This doesn't appear to have any unwanted side effects (on your site)

Cheers
RodG

CarlC, the code that RodG posted *should* work. You did try it by adding it to your stylesheet.css didn't you??