adding pictures to the weatherstyle.css

MickinMoulden · Post by **MickinMoulden** » Sun 06 Feb 2011 8:01 am

I've previously added my own photo. That was fine. Now I want to add multiple photo's, left and right in the style sheet. How do I do that?

DaveNZ · Post by **DaveNZ** » Sun 06 Feb 2011 8:21 am

I would do it in the following way: lay my site out in table format.

Code: Select all

<body>
  <table width="100%" height="100%">
    <tr>
      <td align="left" class="section">
        <img src="image1.jpg" alt="image1" />
      </td>
      <td class="section">
        your central content here
      </td>
      <td align="right" class="section">
        <img src="image2.jpg" alt="image2" />
      </td>
    </tr>
  </table>
</body>

And the css for section

Code: Select all

td.section {
  vertical-align:top;
}

Some would choose to do it with divs, but I have never had much luck with getting those to align the way I want.

MickinMoulden · Post by **MickinMoulden** » Sun 06 Feb 2011 8:35 am

DaveNZ wrote:I would do it in the following way: lay my site out in table format.
Code: Select all
<body>
  <table width="100%" height="100%">
    <tr>
      <td align="left" class="section">
        <img src="image1.jpg" alt="image1" />
      </td>
      <td class="section">
        your central content here
      </td>
      <td align="right" class="section">
        <img src="image2.jpg" alt="image2" />
      </td>
    </tr>
  </table>
</body>
And the css for section
Code: Select all
td.section {
  vertical-align:top;
}
Some would choose to do it with divs, but I have never had much luck with getting those to align the way I want.

So that would put a picture either side? And would this only effect the page that the html was added in. I'm not sure where I should put the css code in the stylesheet. I'd be looking at putting about 3 photo's down each side for all of my pages.

DaveNZ · Post by **DaveNZ** » Sun 06 Feb 2011 8:42 am

MickinMoulden wrote: So that would put a picture either side? And would this only effect the page that the html was added in. I'm not sure where I should put the css code in the stylesheet. I'd be looking at putting about 3 photo's down each side for all of my pages.

It would put a picture either side, yes. But it would only affect one page, and using the cumulus template you would have to edit every web page if you wanted it on all pages. Using php it would be easier.

I would think using css, it would be a hard task...any css experts reading?

Synewave · Post by **Synewave** » Sun 06 Feb 2011 8:50 am

I'm by no means a CSS expert, but one method I use on my status page to override the background picture coded in the css is:

Code: Select all

<link href="weatherstyle.css" rel="stylesheet" type="text/css" />
<style type="text/css"> body { background-image: url("myimages/statusbackground.png") } </style>

You could code a <#webtag> in the picture filename, i.e. to change the picture if it was day or night using the <#isdaylight> tag.

DaveNZ · Post by **DaveNZ** » Sun 06 Feb 2011 8:55 am

I would think 3 photos down each side using CSS wouldn't be possible without adding extra html elements into your web pages.

Post by **steve** » Sun 06 Feb 2011 9:05 am

I think CSS 3 will make all this a lot easier. Not much help now, though...

MickinMoulden · Post by **MickinMoulden** » Sun 06 Feb 2011 9:06 am

DaveNZ wrote:I would think 3 photos down each side using CSS wouldn't be possible without adding extra html elements into your web pages.

Yes, I don't think there is anyway around it at the moment. Think I might use the float technique in CSS like this:

Code: Select all

img.floatRightClear { 
    float: right; 
    clear: right; 
    margin: 4px; 
}

Then in the html like this:

Code: Select all

<body>
<img src="sunset.gif" class="floatRightClear">
<img src="sunset2.gif" class="floatRightClear">
</body>

Seems to be alot of ways to do it hey

DaveNZ · Post by **DaveNZ** » Sun 06 Feb 2011 9:10 am

MickinMoulden wrote:
Code: Select all
<body>
<img src="sunset.gif" class="floatRightClear">
<img src="sunset2.gif" class="floatRightClear">
</body>
Seems to be alot of ways to do it hey

You could try it, and also add the following to your image styles. This will make sure any text flows over the top of the images instead of underneath.

Code: Select all

z-index:-1

steve wrote:I think CSS 3 will make all this a lot easier. Not much help now, though...

I was looking at this the other day. Looks like heaps of new features. Barely any browser support for most of it yet though

MickinMoulden · Post by **MickinMoulden** » Sun 06 Feb 2011 9:17 am

Synewave wrote:I'm by no means a CSS expert, but one method I use on my status page to override the background picture coded in the css is:
Code: Select all
<link href="weatherstyle.css" rel="stylesheet" type="text/css" />
<style type="text/css"> body { background-image: url("myimages/statusbackground.png") } </style>
You could code a <#webtag> in the picture filename, i.e. to change the picture if it was day or night using the <#isdaylight> tag.

Yup, already done the tag (see my site), works to.
Yours is real nice, that's where I got the idea of changing pictures, but to change to the current weather conditions.
So your code is in the HTML on all pages. But how do they change. Is png like a gif so that the

url("myimages/statusbackground.png")

is just one picture file?

Synewave · Post by **Synewave** » Sun 06 Feb 2011 9:21 am

MickinMoulden wrote:
Synewave wrote:I'm by no means a CSS expert, but one method I use on my status page to override the background picture coded in the css is:
Code: Select all
<link href="weatherstyle.css" rel="stylesheet" type="text/css" />
<style type="text/css"> body { background-image: url("myimages/statusbackground.png") } </style>
You could code a <#webtag> in the picture filename, i.e. to change the picture if it was day or night using the <#isdaylight> tag.
Yup, already done the tag (see my site), works to.
Yours is real nice, that's where I got the idea of changing pictures, but to change to the current weather conditions.
So your code is in the HTML on all pages. But how do they change. Is png like a gif so that the
url("myimages/statusbackground.png")
is just one picture file?

Yes, it is just an animated gif, so essentially one file.

Edit: sorry the one on the status page is just one picture (made up of two 'stuck' together) and is just a png.
The ones on my other pages are animated gifs.

tjaliwalpa · Post by **tjaliwalpa** » Sun 06 Feb 2011 9:31 am

Here is another possibility which uses the body and allows the images to swap and be in a set position. It is closer to what you wanted to do in the first place.

Creat images temp_00.jpg (image you want for no alarm), temp_01.jpg (image you want for high alarm)and temp_10.jpg Image you want for low alarm). Use the tags to create the names like this:

body {
background-image: url("images/temp_<#lowtempalarm><#hightempalarm>.jpg");
background-repeat: no-repeat;
background-position: 0% 0%;
}

The background-position allows you to place the image where you want on the screen in relation to the top left of the screen (or frame).

MickinMoulden · Post by **MickinMoulden** » Sun 06 Feb 2011 10:46 am

tjaliwalpa wrote:Here is another possibility which uses the body and allows the images to swap and be in a set position. It is closer to what you wanted to do in the first place.

Creat images temp_00.jpg (image you want for no alarm), temp_01.jpg (image you want for high alarm)and temp_10.jpg Image you want for low alarm). Use the tags to create the names like this:

body {
background-image: url("images/temp_<#lowtempalarm><#hightempalarm>.jpg");
background-repeat: no-repeat;
background-position: 0% 0%;
}

The background-position allows you to place the image where you want on the screen in relation to the top left of the screen (or frame).

Yes, as I've already mentioned

Yup, already done the tag (see my site), works to.

, and have been discussing this with Dave in another thread, but thought it would be better suited here.
What you've stated is excactly what I have done, and is already working on my site, however, I'm looking at adding more, so that I have say, 3 each side. Including storm pictures storm_1111.jpg, storm_1011.jpg etc. This is to correspond with day, gust, temp and rain rate alarms. All the pictures are done.
I'll let you know when I'm done, and I'll holler if I get stuck, but I've got at least 3 different ways to do it. And I've looked at PHP and can't see how it can be done any easier.

MickinMoulden · Post by **MickinMoulden** » Sun 06 Feb 2011 4:03 pm

DaveNZ wrote:I would do it in the following way: lay my site out in table format.
Code: Select all
<body>
  <table width="100%" height="100%">
    <tr>
      <td align="left" class="section">
        <img src="image1.jpg" alt="image1" />
      </td>
      <td class="section">
        your central content here
      </td>
      <td align="right" class="section">
        <img src="image2.jpg" alt="image2" />
      </td>
    </tr>
  </table>
</body>
And the css for section
Code: Select all
td.section {
  vertical-align:top;
}
Some would choose to do it with divs, but I have never had much luck with getting those to align the way I want.

OK....tried it this way, but I've stuffed it up big time.... The photo's on the other hand look great and do excactly what I want. There are a total of 17 photo's, and display depending on the weather at the time of the upload. As it's 01:30, I'm going to have to leave it in the mess that it's in and try something later.

DaveNZ · Post by **DaveNZ** » Sun 06 Feb 2011 7:47 pm

I see what the problem is! The data table (inside the table you've added) also has the attribute width="100%". Need to remove that.
Then it will minimise the space it needs as far as I can recall. To make it take up the whole middle table cell, you can use the style "margin:auto"

Cumulus Support

adding pictures to the weatherstyle.css

adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css

Re: adding pictures to the weatherstyle.css