Welcome to the Cumulus Support forum.

Latest Cumulus MX V3 release 3.28.6 (build 3283) - 21 March 2024

Cumulus MX V4 beta test release 4.0.0 (build 4018) - 28 March 2024

Legacy Cumulus 1 release v1.9.4 (build 1099) - 28 November 2014 (a patch is available for 1.9.4 build 1099 that extends the date range of drop-down menus to 2030)

Download the Software (Cumulus MX / Cumulus 1 and other related items) from the Wiki

Want a better looking header

Discussion of Ken True's web site templates

Moderator: saratogaWX

Post Reply
User avatar
aznetcowboy
Posts: 357
Joined: Fri 04 Jan 2013 6:03 pm
Weather Station: Davis 6153 Vantage Pro2
Operating System: Windows 10 Home 64-bit
Location: West Bend, WI USA
Contact:

Want a better looking header

Post by aznetcowboy »

I have seen sites using, presumably, Saratoga templates with some neat headers with graphics. How does one do that? I would like to have a graphic, nothing too big, but one that would reflect my geographic area.
Tom Wills
Ridge Run Weather Station: http://www.ridgerun.us
Image
User avatar
aznetcowboy
Posts: 357
Joined: Fri 04 Jan 2013 6:03 pm
Weather Station: Davis 6153 Vantage Pro2
Operating System: Windows 10 Home 64-bit
Location: West Bend, WI USA
Contact:

Re: Want a better looking header

Post by aznetcowboy »

aznetcowboy wrote:I have seen sites using, presumably, Saratoga templates with some neat headers with graphics. How does one do that? I would like to have a graphic, nothing too big, but one that would reflect my geographic area.
After playing around with the header.php code and the "narrow" css file codes, I have what I want. The first thing to do, naturally, is to have a good backup of ALL the files.

In the header file, I modified the "headerTitle" section from:
<div id="header">
<h1 class="headerTitle">
<a href="index.php" title="Browse to homepage"><?php echo langtransstr($SITE['organ']); ?></a>
</h1>

<div class="headerTemp">
<span class="doNotPrint">
<span class="ajax" id="ajaxbigtemp"><?php print isset($tempnodp)?"$tempnodp$tuom":"&nbsp;"; ?>
</span>
</span>
</div>


to:
<div id="header">

<!-- Start of modification to install a picture -->
<center>
<h1 class="headerTitle">
<a href="index.php" title="Browse to homepage">
<img src="./images/header.jpg" alt="" style="border-color: yellow;" border="2" height="155" width="870" />
</a>

</h1>
</center>
<!-- End of modification to install a picture -->

<div class="headerTemp">
<span class="doNotPrint">
<span class="ajax" id="ajaxbigtemp"><?php print isset($tempnodp)?"$tempnodp$tuom":"&nbsp;"; ?>
</span>
</span>
</div>



In the css files, using weather-screen-purple-narrow.css as the example, I modified it by commenting out one line (in EACH css file!) from:
.headerTitle {
margin: 0;
padding: 0.25em 4mm 0.25em 4mm;
}


to:

In the css files, using weather-screen-purple-narrow.css as the example, I modified it by commenting out one line in EACH of the css files from:
.headerTitle {
margin: 0;
/* padding: 0.25em 4mm 0.25em 4mm; */
}


Now, to further explain my changes, you need to be aware the I had a long time ago modified the width of my "narrow pages to 880 pixels (width: 880px;). To get a desirable picture into the header, I had to create a 870px × 155px picture. I use Microsoft's Paint program to insert the wording I wanted over the picture. I think it now is exactly what I wanted.
You do not have the required permissions to view the files attached to this post.
Tom Wills
Ridge Run Weather Station: http://www.ridgerun.us
Image
Sadgit
Posts: 192
Joined: Sun 04 Jan 2009 5:56 pm
Weather Station: Vantage Vue
Operating System: Windows 7
Location: Middlesbrough, England

Re: Want a better looking header

Post by Sadgit »

thank you thank you thank you :)

exactly what I needed
Post Reply