Change headerbar background-image according to location

Mixed forum with code snippets, guides and styles
Forum rules
Everything in this forum is for everybody
But support only for Donators!
Post Reply
User avatar
Stoker
Site Admin
Site Admin
Posts: 3521
Joined: 12 May 2008, 23:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark
Contact:

Change headerbar background-image according to location

Post 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" -->
Board rules! No PM support
User avatar
Terr0r
BBCoder V
BBCoder V
Posts: 339
Joined: 04 May 2011, 00:47
BBCodes: 100
Location: The Netherlands
Contact:

Change headerbar background-image according to location

Post 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
If you can't fix it with ducktape you ain't using enough
For my MODS and BBCodes or other things that I have made take a look here
User avatar
Stoker
Site Admin
Site Admin
Posts: 3521
Joined: 12 May 2008, 23:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark
Contact:

Change headerbar background-image according to location

Post by Stoker »

Nope. Its copyright protected by vlad studio.
Board rules! No PM support
User avatar
Terr0r
BBCoder V
BBCoder V
Posts: 339
Joined: 04 May 2011, 00:47
BBCodes: 100
Location: The Netherlands
Contact:

Change headerbar background-image according to location

Post 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
If you can't fix it with ducktape you ain't using enough
For my MODS and BBCodes or other things that I have made take a look here
User avatar
Stoker
Site Admin
Site Admin
Posts: 3521
Joined: 12 May 2008, 23:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark
Contact:

Change headerbar background-image according to location

Post by Stoker »

Google vlad studio. And maske sure to Read his terms.
Board rules! No PM support
Gamers Talk
BBCoder II
BBCoder II
Posts: 43
Joined: 13 Sep 2013, 00:40
BBCodes: 1
Contact:

Change headerbar background-image according to location

Post by Gamers Talk »

is it possible to add it to different pages (ex: blog/memberlist/search/contact/etc) ?
User avatar
Stoker
Site Admin
Site Admin
Posts: 3521
Joined: 12 May 2008, 23:26
BBCodes: 239
Favourite BBCode: Anipro
Favourite MOD: PrettyPhoto
Location: Denmark
Contact:

Change headerbar background-image according to location

Post by Stoker »

Yes, thats what its all about ;)
Board rules! No PM support
User avatar
themission
BBCoder III
BBCoder III
Posts: 123
Joined: 10 Aug 2011, 22:32
BBCodes: 3
Location: Devon UK
Contact:

Change headerbar background-image according to location

Post 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.
Post Reply