Here's how I adapted the new icons. You can have a look here:
http://http://krmidas.home.comcast.net/~krmidas/cumulus/index.htmThe icons I'm using are in a zip file and are attached.
There are more icons in this set than you'll probably need. I picked out 15 of them that corresponded roughly with the icons that were being used in the template. Some icons don't apply to forecasts that Cumulus generates (nightime images, etc.)
I re-sized my 15 hero images to 222 x 189 px. (You'll notice later that when I revised the indexT.htm file I decided to specify the height as 159 px. This was easier than going back and doing another re-size on all the images individually). Of course, you should play with what you think works best. I found that the drop shadow off the right size of the image looked a little sloppy, so in photoshop, I cleaned up the right side and it looks better. If any of you don't have Photoshop, I'd be happy to zip up my 15 re-sized/cleaned up icons and send them to you.
There are 26 weather forecasts that the icons are associated with. If you're using Cumulus, you can see what these 26 forecast states are in the samplestrings.ini file in your Cumulus folder.
You'll notice that the existing set of forecast icons also correspond to these 26 forecast states. You can have a look here:
http://http://meteoduquebec.com/icones_grzanka.htmlIf you don't pick 26 icons, some of the ones you choose will have to serve for more than one type of weather forecast. I've had to do this, since there's not much difference (graphically speaking) between "unsettled, precipitation later" and "unsettled, some precipitation". One of my icons works for I think 7 of the 26 forecasts! Just make sure you end up with 26 images that are sized properly.
Match your resized icons to these forecast states and rename your files "1", "2", all the way up to "26". If you do any work on these files, MAKE SURE YOU SAVE THESE AS PNG FILES, and they remain transparent. Proper method of saving in Photoshop Elements is: file/save for web, on the right side of widow, choose "PNG-24":
[attachment=2:1dgx278g]Capture.JPG[/attachment:1dgx278g]
While I had Photoshop open, I did a little work on the file pan_jour (which can be found on your server in the cumulus/images folder). I got rid of the white box in the forecast area on the template. I did this because these new icons are more or less square, and the existing box in the template is more or less rectangular. I've attached the revised pan_jour file, which I renamed pan_jour2.
Next, I uploaded file pan_jour2 to the server, in the same location as the original pan_jour (on my server it's cumulus/images).
Before proceeding, one piece of advice: before doing any editing on the css or htm files, make sure you grab a copy of the existing file and put it in a safe place (I have a folder on my desktop I call "safe"). This way, if you mess up, you can just drag the unaltered file back and you're back where you started)
Next, using an html editor, open the styles.css file (on my server it's in /cumulus). In line 448 rename pan_jour.png as pan_jour2.png. Save the file and upload the revised styles.css. Now your revised icons will be placed over the background without the white border.
Next, in the indexT.htm file (the file on your computer, probably in your Cumulus/web folder), find your "forecast" (it's toward the bottom) section. This is how my forecast section now reads:
<div class="pan forec">
<h2>Forecast</h2><br><tr><center>
<img src="images/meteo/<#forecastnumber>.png" height="159" alt="Forecast icon" title="Forecast icon" /></center>
<p style="text-align:center"></table>Forecast image<br><em>(next 12 hours)</em></p>
</div>
See how the "forecast number" gets inserted right before ".png"? That's how the server knows what picture to place on your site, based on what forecast your software is returning.
Finally, take the 26 new .png images and
overwrite the 26 that are in the cumulus/images/meteo folder on your server. Once again, You should back up those 26 images first, in case you don't like the new icons.
That should do it. You may need to play around with the spacing of the words "forecast" and "forecast image", but that's pretty easy stuff.
It's always a good idea to properly credit the artist, even though these icons are freely available for download and personal use. The artist's name is Mohit Garg.
Hope this tutorial helped!
-Tom
Topic: New Forecast Icons (Read 5784 times)
