Page 1 of 1

Change headerbar background-image according to location

Posted: 26 Jul 2011, 18:56
by Stoker
Change headerbar background-image according to location

Author: Stoker
Description:
This little guide will teach You how to make the headerbar back-ground image change according to the location.
It will show different back-ground images on index, viewforum and viewtopic.
This guide is optimized to the Prosilver SE style, but cut easily be adapted to all other styles.

Attached file: None
Demo: This site

Instructions:
First You need to find 3 images that You like to have as back-ground images.
Upload them to styles/name of style/theme/images

Open styles/name of style/template/overall_header.html
Find:

Code: Select all

<div class="headerbar">
Replace with:

Code: Select all

<!-- IF SCRIPT_NAME == "index" --><div class="headerbar" style="background-image: url({T_THEME_PATH}/images/name_of_image.jpg); background-position: top;">
<!-- ELSEIF SCRIPT_NAME == "viewforum" --><div class="headerbar" style="background-image: url({T_THEME_PATH}/images/name_of_image.jpg); background-position: top;">
<!-- ELSEIF SCRIPT_NAME == "viewtopic" --><div class="headerbar" style="background-image: url({T_THEME_PATH}/images/name_of_image.jpg); background-position: top;">
<!-- ELSE --><div class="headerbar"><!-- ENDIF -->
Save, upload and refresh template.
Now You will have different back-ground images on index, viewforum and viewtopic.
All other pages will have the standard back-ground images which is defined in colours.css


FAQ

Question:
How do I use the same background-image for BOTH viewtopic AND posting?
Answer:
Find this in above code:

Code: Select all

<!-- ELSEIF SCRIPT_NAME == "viewtopic" -->
Replace with

Code: Select all

<!-- ELSEIF SCRIPT_NAME == "viewtopic" or SCRIPT_NAME == "posting" -->

Change headerbar background-image according to location

Posted: 18 Sep 2011, 20:40
by Terr0r
I have a question to stoker about this Snippet

can I used the images on my forum ? that you used for this snippet on this forum

Change headerbar background-image according to location

Posted: 18 Sep 2011, 21:08
by Stoker
Nope. Its copyright protected by vlad studio.

Change headerbar background-image according to location

Posted: 18 Sep 2011, 21:15
by Terr0r
okay and where can I find and or download the images that you used for your forum

and is it possible to set the header a little bit weider so as here

Change headerbar background-image according to location

Posted: 18 Sep 2011, 21:43
by Stoker
Google vlad studio. And maske sure to Read his terms.

Change headerbar background-image according to location

Posted: 16 Sep 2013, 23:47
by Gamers Talk
is it possible to add it to different pages (ex: blog/memberlist/search/contact/etc) ?

Change headerbar background-image according to location

Posted: 17 Sep 2013, 05:02
by Stoker
Yes, thats what its all about ;)

Change headerbar background-image according to location

Posted: 17 Sep 2013, 21:30
by themission
There is also this mod https://www.phpbb.com/community/viewtopic.php?t=1237105 im using it on localhost with phpbb3 version 3.0.12-RC2 and no problems

Modification Description: Custom Header Logo displays logos and background images in the header. This can be changed for all forums and categories independently. You can also add a logo and background images to all pages like search, memberlist or user control panel - even in subdirectories and on pages with parameters.