Author Topic: Putting Big Temp on header jpg  (Read 2966 times)

0 Members and 1 Guest are viewing this topic.

Offline jdpsys

  • Member
  • *
  • Posts: 34
    • Fairfield Weather
Putting Big Temp on header jpg
« on: April 27, 2012, 05:04:21 PM »
I wish to put the BigTemp and the ajax-gizmo on the right side of my header jpg
Any idea's on modifying the header.php?

<div id="header">
             <a href="index.php" title="Browse to homepage"><img src="header.jpg" alt="Fairfield Weather" border="none" /></a>
          <div class="headerTemp">
       <span class="doNotPrint">
         <span class="ajax" id="ajaxbigtemp"><?php print isset($tempnodp)?"$tempnodp$tuom":"&nbsp;"; ?>
        </span>
      </span>
      </div>
 
      <div class="subHeaderRight">
     <?php
      if (isset($showGizmo) and $showGizmo) {
        include_once("ajax-gizmo.php");
      } else {
        print "&nbsp;<br/><br/>\n"; // needed as placeholder if no gizmo
      }
     ?>
     </div><!-- end subHeaderRight -->
</div>


Jon
Davis Vantage Pro II - Meteohub (5.0 - SheevaPlug)
http://www.fairfieldwx.com

Offline saratogaWX

  • Administrator
  • Forecaster
  • *****
  • Posts: 9257
  • Saratoga, CA, USA Weather - free PHP scripts
    • Saratoga-Weather.org
Re: Putting Big Temp on header jpg
« Reply #1 on: April 27, 2012, 09:57:56 PM »
If you want the big-temp and gizmo to appear over your header graphic, I'd suggest you remove the

           <a href="index.php" title="Browse to homepage"><img src="header.jpg" alt="Fairfield Weather" border="none" /></a>
 line

and change the default CSS for your website to have in
Code: [Select]
#header {
  color: inherit;
  background: url(header.jpg) no-repeat center;
  background-color: #3173B1;
  height: 120px;
}

Then change the 'background-color: #nnnnnn;' to 'background-color: transparent;' in both the .subHeader and .subHeaderRight CSS

You may need to adjust the height: number to get your image to fully show.

Hope this helps...

BTW.. best way to test this is using the Firefox Web Developer plugin (CSS Editor) so you can interactively tweak and see the results .. saves a lot of FTP activity while testing the CSS out.

Best regards,
Ken



Ken True/Saratoga, CA, USA main site: saratoga-weather.org
Davis VP1+ FARS, Blitzortung RED, GRLevel3, WD, WL, VWS, Cumulus, Meteobridge
Free weather PHP scripts/website templates - update notifications on Twitter saratogaWXPHP

Offline jdpsys

  • Member
  • *
  • Posts: 34
    • Fairfield Weather
Re: Putting Big Temp on header jpg
« Reply #2 on: April 28, 2012, 12:43:33 PM »
Thanks Ken,
Perfect ~


Jon
Davis Vantage Pro II - Meteohub (5.0 - SheevaPlug)
http://www.fairfieldwx.com

Offline Moose Whisperer

  • Senior Contributor
  • ****
  • Posts: 240
    • Alaska Weather Watch
Re: Putting Big Temp on header jpg
« Reply #3 on: April 28, 2012, 04:05:02 PM »
Is there any way to do this along the original lines of the OP's question? I wish to have the big temp and gizmo show up on the right side of my header graphic for use in other pages using entirely different css files. Ideally then, that graphic can just be inserted at the top of the page without any other formatting needed (if this makes sense).

Offline Gordon

  • Senior Member
  • **
  • Posts: 79
Re: Putting Big Temp on header jpg
« Reply #4 on: May 09, 2012, 12:49:15 PM »
Thanks Ken,
Perfect ~

Jon,

Would you mind posting the snippets of code you modified? I'm having the darnedest time getting this to work.

I'd appreciate it...
Gordon

<iframe src='https://www.weatherlink.com/embeddablePage/show/3512bdb6075043fba2e0fbf66996d8f0/signature' width='760' height='200' frameborder='0'></iframe>

Offline jdpsys

  • Member
  • *
  • Posts: 34
    • Fairfield Weather
Re: Putting Big Temp on header jpg
« Reply #5 on: May 09, 2012, 01:43:46 PM »
No Problem.

I changed the weather-screen-blue-narrow.css file.

#header {
  color: inherit;
  background: url(header.jpg) no-repeat center;
  background-color: #3173B1;
  height: 120px;
}

header.jpg is 800x120

I opted out of allowing viewers to change the color settings, otherwise you could make the same change to all the related css files.


Jon
Davis Vantage Pro II - Meteohub (5.0 - SheevaPlug)
http://www.fairfieldwx.com

Offline Gordon

  • Senior Member
  • **
  • Posts: 79
Re: Putting Big Temp on header jpg
« Reply #6 on: May 09, 2012, 01:53:22 PM »
No Problem.

I changed the weather-screen-blue-narrow.css file.

#header {
  color: inherit;
  background: url(header.jpg) no-repeat center;
  background-color: #3173B1;
  height: 120px;
}

header.jpg is 800x120

I opted out of allowing viewers to change the color settings, otherwise you could make the same change to all the related css files.


Great...Thanks Jon.
Gordon

<iframe src='https://www.weatherlink.com/embeddablePage/show/3512bdb6075043fba2e0fbf66996d8f0/signature' width='760' height='200' frameborder='0'></iframe>

Offline Gordon

  • Senior Member
  • **
  • Posts: 79
Re: Putting Big Temp on header jpg
« Reply #7 on: May 10, 2012, 08:04:24 AM »
No Problem.

I changed the weather-screen-blue-narrow.css file.

#header {
  color: inherit;
  background: url(header.jpg) no-repeat center;
  background-color: #3173B1;
  height: 120px;
}

header.jpg is 800x120

I opted out of allowing viewers to change the color settings, otherwise you could make the same change to all the related css files.


Well...almost. I can't get my background image to display:

Header.php:

Code: [Select]
<!-- header -->
    <div id="header">
        <div class="headerTemp">
       <span class="doNotPrint">
         <span class="ajax" id="ajaxbigtemp"><?php print isset($tempnodp)?"$tempnodp$tuom":"&nbsp;"?>
        </span>
      </span>
      </div>

.css file:

Code: [Select]
#header {
  color: inherit;
  background-image: url ('images/susan-banner.jpg') no-repeat center;
  background-color: transparent;
  height: 120px;
}

Thoughts?
Gordon

<iframe src='https://www.weatherlink.com/embeddablePage/show/3512bdb6075043fba2e0fbf66996d8f0/signature' width='760' height='200' frameborder='0'></iframe>

Offline jdpsys

  • Member
  • *
  • Posts: 34
    • Fairfield Weather
Re: Putting Big Temp on header jpg
« Reply #8 on: May 10, 2012, 09:01:55 AM »
You might try:

background: url(images/susan-banner.jpg) no-repeat center;

I’m assuming you are in the selected CSS file for your pages.

I am not familiar enough with style sheets to spot format errors. I just wack away at it and know I made a mistake when something does not work.


Jon
Davis Vantage Pro II - Meteohub (5.0 - SheevaPlug)
http://www.fairfieldwx.com

Offline Gordon

  • Senior Member
  • **
  • Posts: 79
Re: Putting Big Temp on header jpg
« Reply #9 on: May 10, 2012, 09:42:12 AM »
You might try:

background: url(images/susan-banner.jpg) no-repeat center;

I’m assuming you are in the selected CSS file for your pages.

I am not familiar enough with style sheets to spot format errors. I just wack away at it and know I made a mistake when something does not work.
javascript:void(0);

Ha! Got it! (although your suggestion above wasn't the issue.) It was my menu configuration getting in the way.

Believe me Jon, I know of no other way to code...   :lol:

Thanks again for the assistance!

« Last Edit: May 10, 2012, 11:35:06 AM by gclarkso »
Gordon

<iframe src='https://www.weatherlink.com/embeddablePage/show/3512bdb6075043fba2e0fbf66996d8f0/signature' width='760' height='200' frameborder='0'></iframe>

Offline CNYWeather

  • Forecaster
  • *****
  • Posts: 2295
    • CNYWeather
Re: Putting Big Temp on header jpg
« Reply #10 on: May 10, 2012, 12:39:52 PM »
Gordo, looks like you lost the styling of the menubar?

It was blue yesterday when I stopped by  :-)
Tony




Offline Gordon

  • Senior Member
  • **
  • Posts: 79
Re: Putting Big Temp on header jpg
« Reply #11 on: May 10, 2012, 12:46:13 PM »
Gordo, looks like you lost the styling of the menubar?

It was blue yesterday when I stopped by  :-)

Lets just say the menubar took one for the team TG...   =D&gt;

I dunno, change is good they say...
Gordon

<iframe src='https://www.weatherlink.com/embeddablePage/show/3512bdb6075043fba2e0fbf66996d8f0/signature' width='760' height='200' frameborder='0'></iframe>

 

anything