Changes to weatherstyle.css in WYSIWYG?

[Andy]

Hi,
I would like to make a few minor cosmetic changes to the weatherstyle.css file; capitalising the first characters of the location name, removing the grey box where Latitude, Longitude and Elevation are displayed and change the font colour of both lines to black.
I have looked at weatherstyle.css in MS Expression Web but have no idea what’s what. I have used Front Page some years back but of course that was WYSIWYG. Is it possible to open the weatherstyle.css file in MS Expression Web and somehow switch the view to show the page as displayed within IE7 and make changes?
Thanks
Andy

[steve]

Yes - if you put the style sheet in the same folder on your PC as one of the templates (so the relative link is correct) and open the template in Expression Web, then it will show the styles that are being applied.

[sanramonrover]

Hoping this helps, here goes.

You can open the style sheet (weatherstyle.css) and any other of the htm pages in any plain text editor. I use MS Wordpad.

In the indexT.htm, I think you will see that immediately before your location information the following appears:
<h2 style="text-align: left>
This tells the web page creator to use Heading Style <H2> for that info.

Now open the style sheet. In the style sheet you will see a list of headings, one of which is "h2" (no quote marks, though). But to confuse things, there are two separate h2 listings, and the web page creator uses the SECOND one, so ignore the first one.

Here it gets fuzzy, because I have already changed mine and may not recall exactly how the original looks. I think it looks like this:
h2 {
font-size: 125%;
font-weight: bold;
color: #000080; <!--navy-->
letter-spacing: 0.4em;
text-transform: lowercase;
font-family: Arial, Helvetica, sans-serif;
text-align: left;

Here you can change the font size in percentage; change the colour using hexadecimal (where 000000 is black) or use simple names like black, red, blue and many others; then you can delete this line:
text-transform: lowercase;

Let us know how it turns out!

[Andy]

Thanks for the replies.
Steve, I assume that the style sheet is the weatherstyl.css file; however what is the file extension for a template? I have looked through the Microsoft Expression Web files, had assumed the file extension for templates was .dwt, but all with no joy. If I had managed to make what I assumed would be a simple change I had ideas about linking in a webcam. But it looks like I stay with the default page as it is http://www.claxton.f2s.com/weather/
Sanramonover, as I mentioned I was looking at making cosmetic changes using the simple WYSIWYG approach however as you can see it is not that easy – for me at least. Notwithstanding, I have looked at the files you mentioned but the coding is why beyond me so I’ll give it a miss.
Thanks anyway
Andy

[steve]

Steve, I assume that the style sheet is the weatherstyl.css file;

Yes.

however what is the file extension for a template? I have looked through the Microsoft Expression Web files, had assumed the file extension for templates was .dwt, but all with no joy.

I call them 'templates' because they are the files which Cumulus processes to produce web pages, but they're just html files themselves. They're not related to the Expression Web concept of a template. They're the files in the 'web' folder that have a 'T' in them. So indexT.htm is processed and generates the index.htm file that gets uploaded to your web site. So if you copy the weatherstyle.css file into the Cumulus web folder and open up indexT.htm, you can see the effect of the styles on the 'template'.

Be very careful if you edit the template files in Expression Web that it does not change the Cumulus 'tags' from e.g. <#location> to &lt#location&gt, because Cumulus will then no longer recognise them. The safest way is to have the split design/code view open and do any changes to the actual html rather thna in the WYSIWYG window.

[sanramonrover]

Andy, There is nothing simpler than opening the style sheet (weatherstyle.css) in a text editor and making the changes suggested. Any WYSIWYG editor that I have looked at complicates things no end!

Steve very wisely stored originals of important pages, like the templates so you can edit yours, the go and find the original if you don't like the results you achieved.

Don't be scared of a little HTML. Only way to learn is to dive in.

[Synewave]

I agree, my idea of WYSIWYG now is backup the file you are going to edit, make one change, FTP it, then look at the result.

My past experience of Frontpage and Dreamweaver got messy once I tried to do something clever.

I appreciate HTML etc, can be daunting, but one step at a time and you'll get there as I did.

[Andy]

Thanks for your suggestions. As I said at the outset I had hoped to be able to make the minor cosmetic changes using the simple approach of WYSIWYG. However it looks like without knowing the specific code for the three areas I wished to change i.e. capitalising the first characters of the location name, removing the grey box where Latitude, Longitude and Elevation are displayed and change the font colour of both lines to black, I doubt if I’ll pursue this.
Thanks anyway
Andy

[steve]

capitalising the first characters of the location name,

That one's easy as it's in the FAQ: http://wiki.sandaysoft.com/a/FAQ#I.27m_ ... upper_case

removing the grey box where Latitude, Longitude and Elevation are displayed

If you do as I suggested earlier, and then select the offending section, Expression Web shows you which styles are in effect on that line; the three 'h2' ones; and it's the third of those which has the grey background. Expression Web will then allow you to modify the style to change the background from the current value #cocad3 to anything you want.

and change the font colour of both lines to black,

The same process would allow you to do this.

[gemini06720]

As I said at the outset I had hoped to be able to make the minor cosmetic changes using the simple approach of WYSIWYG. However it looks like without knowing the specific code for the three areas I wished to change i.e. capitalising the first characters of the location name, removing the grey box where Latitude, Longitude and Elevation are displayed and change the font colour of both lines to black, I doubt if I’ll pursue this.

Andy, if you give the exact modification you want done on your page, I could easily do them for you - I have changed so many of the aspects (looks) of Cumulus that I know (almost) exactly where to look.

You might want to have a look at my latest Cumulus project (although the pages have been in development for the past months) at [link removed] - please be advised that the pages are written in PHP (a server-side programming language) with some HTML code and a 'pinch' of AJAX/JavaScript.

[Andy]

Steve,
It's not that I found sections offending it's just a matter of choice. As I had stumbled on how to change the background I thought I could enhance the text colour (or should it be color ) Anyhow thanks for your pointers, I think I've now managed it!!!!
Andy

[Andy]

Ray,
Thanks for your offer but as you may notice I managed, eventually , to make the changes I was after.
One visual on your site that I would like to incorporate is to remove the black square from the moon. Could I be cheeky and asked for the ‘code’ changes you used?
Andy

[gemini06720]

Andy, the moon phase icon displayed on my page is not produced by Cumulus - the page uses PHP code that (continuously) calculate (and update) the phase of the moon - the same code also chooses which type of image to use - either an image with a dark background or an image with a transparent background (as seen on my page).

Indeed, a moon phase image with a transparent background would be better suited for your Web page...

[steve]

You'll find the same problem with most/all of the images which Cumulus produces. They're effectively just screen 'grabs' and I don't have control over the background. The best solution is to do as Ray and others have done and to use alternative sources where possible.

[Synewave]

Ray,
One visual on your site that I would like to incorporate is to remove the black square from the moon. Could I be cheeky and asked for the ‘code’ changes you used?
Andy

Andy,

Many of the users on this forum use a moon graphic the same as the one I use on my websites. Have a look at the links below and if you like the moon, then read on.

There are eight moon phase graphic images that need to be uploaded to your website into the images directory. If you want these images, let me know and I'll send them to you as a Private Message (I'm sure Steve wouldn't be happy if I posted graphics to this forum).

Each of these images are named according to the moon phase, i.e. "Full Moon.png".

Your Index page has a webtag in it called <#moonphase>, in a line as follows:

Code: Select all

<td class="site_data" style="text-align: left;"><#moonphase></td>

Now, when Cumulus processes this file, the webtag gets processed to a text string according to the current moon phase, i.e. "Full Moon".

In that same IndexT.htm file, there is a line where the Cumulus moon graphic is coded, as follows:

Code: Select all

<td rowspan="3"><img src="images/moon.bmp" alt="Moon" width="64" align="left" border="0" height="64" style="margin: 0px 10px" /></td>

.

Just edit this line only as follows:

Code: Select all

<td rowspan="3"><img src="images/<#moonphase>.png" alt="Moon" width="64" align="left" border="0" height="64" style="margin: 0px 10px" /></td>

.

The next time Cumulus processes and FTP's your webpages, you should see the new moon graphic.