Author Topic: Theme-Switching Custom Header Banner  (Read 280 times)

0 Members and 1 Guest are viewing this topic.

Offline K6GKM

  • CamWX.com
  • Contributor
  • ***
  • Posts: 124
    • CamWX
Theme-Switching Custom Header Banner
« on: July 06, 2020, 03:38:40 PM »
Hey All,

With some help from Ken, I was able to develop and implement custom banner graphics for my website that change as you choose different themes with the theme switcher.  Check out CamWX.com to seem them in action.  I'd like to share my method with you all in case you'd like to try it too!  The image dimensions are for the narrow themes (I've never been a huge fan of the wide screen look so I don't use it) but I imagine it could easily be implemented for wide screen use as well.

1. Create your custom banner files and upload them.  They can be any height, but you should stick to a width of 850px for narrow themes.  For example, my banner graphics are 850x109.  Create one for each theme installed.

2.  Create a fully transparent .png with the same dimensions and upload it.  This is what I used to give the div container its size constraints.  If you want to stick with my dimensions of 850x109, I've attached a transparent.png below you can use.

3.  Modify the css files.  For every weather-screen-[theme]-narrow.css file:

Find an entry that reads

Code: [Select]
#header {
  color: inherit;
  background-color: #someHEXvalue;
}

And modify it so that it reads:

Code: [Select]
#header {
  color: inherit;
  background: url(‘CustomBannerFilename.png’);
}
Use a different banner file for each theme.  You can re-use them if you like.

4.  In your header.php file, Replace

Code: [Select]
<h1 class="headerTitle">
        <a href="index.php" title="Browse to homepage"><?php echo langtransstr($SITE['organ']); ?></a>
</h1>

with

Code: [Select]
<a href="index.php">
        <img style="object-fit: cover; width: 100%;" src="Transparent.png" alt="YourAltTextHere" />
</a>

That's it!  Your site should now be equipped with a custom banner graphic that changes with the different themes.  Many thanks to Ken for his input on css styling!

-Grant

Transparent.png is under this line.  You can't see it, but it's here.  I promise.
 [ You are not allowed to view attachments ]
« Last Edit: July 06, 2020, 04:16:23 PM by K6GKM »
Grant Miles
Camarillo, CA, USA
Owner/Admin - CamWX.com
SKYWARN Spotter
Station Hardware: Davis Vantage Pro2 Plus w/ 24hr FARS
Station Software: Weather Display, Weather Message, FWI Calculator, StartWatch, with social media & messaging automation using Make.com, Twilio, and Brevo.


 

anything