Page 1 of 1

How change Almanac data colour?

Posted: Fri 29 Apr 2011 11:01 am
by actioman
Hello there Cumulus colleagues! :D

Where can I change the "Almanac" data color?

Code: Select all

<!-- Almanac -->
<table width="100%" border="0" cellpadding="10">
  <tbody><tr>
    <td class="labels">Aurora:</td>
    <td class="site_data" style="text-align: left;">06:05</td>
    <td class="labels">Nascer do Sol:</td>
    <td class="site_data" style="text-align: left;">06:34</td>
    <td class="labels">Nascer da Lua:</td>
    <td class="site_data" style="text-align: left;">04:26</td>
    <td rowspan="3"><img src="images/moon.bmp" alt="Moon" width="64" align="left" border="0" height="64" style="margin: 0px 10px" /></td>
  </tr>
  <tr>
    <td class="labels">Crep&uacute;sculo:</td>
     <td class="site_data" style="text-align: left;">20:47</td>
    <td class="labels">P&ocirc;r do Sol;</td>
    <td class="site_data" style="text-align: left;">20:19</td>
    <td class="labels">P&ocirc;r da Lua:</td>
    <td class="site_data" style="text-align: left;">17:01</td>
  </tr>
  <tr>
    <td class="labels">Horas de luz:</td>
    <td class="site_data" style="text-align: left;">14:42</td>
    <td class="labels">Dura&ccedil;&atilde;o do dia:</td>
    <td class="site_data" style="text-align: left;">13:45</td>
    <td class="labels">Fase da Lua:</td>
    <td class="site_data" style="text-align: left;">Lua Minguante</td>
  </tr>
</tbody></table>
<!-- END Almanac -->

this is its appearance now, but the idea is to change the font color to blue.

Image


In everything else I can change the color (in the 'weatherstyle.css' file), but in the Almanac information I do not know how to do it.

Thank you very much in advance for some help!

Re: How change Almanac data colour?

Posted: Fri 29 Apr 2011 11:23 am
by steve
Looking at the HTML, you can see that the class for the 'labels' (i.e. 'Aurora:', 'Nascer do Sol:' etc) is 'labels', and the class for the actual data is 'site_data'. So, looking at the weatherstyle.css file, we find those classes:

.labels {
font-weight: bold;
background-position: left;
}
.site_data {
text-align: right;
}

They don't specify a font colour currently. To specify a font colour, just add a 'color:' attribute. So to change the font for the data to blue, you need:

.site_data {
color: Blue;
text-align: right;
}

You could also take out the 'style="text-align: left;"' from your HTML, and do it properly by changing the style:

.site_data {
color: Blue;
text-align: left;
}

Re: How change Almanac data colour?

Posted: Fri 29 Apr 2011 3:00 pm
by actioman
Wow! :o

Steve, as always. Just ask that your response is quick and clear!

Thank you again, one more time! :clap: