Change headerbar background-image according to location
Posted: 26 Jul 2011, 18:56
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:
Replace with:
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:
Replace with
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">
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 -->
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" -->
Code: Select all
<!-- ELSEIF SCRIPT_NAME == "viewtopic" or SCRIPT_NAME == "posting" -->