[How To] Modify prosilver's header

[prototech]

Since many people seem to keep asking how to modify several parts of prosilver's header... I decided to make this tutorial. If anyone has anything they want me to add, please let me know. As always, make a back-up of your files before editing them.
Don't forget to refresh the appropriate style component after you have made all the changes by going to your Administration Control Panel => Styles => (Templates/Themes) => prosilver and click on refresh.

Table of Contents

• Add a Custom Header Image
• Remove Site Logo
• Remove Site Name and Description
• Remove Search Box
• Add a Random Header Image
• Replace "Change font size" icon with search box
• Add search icon to navigation

[/size]
-----------------------------------------------------------------------------------------------------------------------------------

Add a Custom Header Image
1) First of all, upload your image to the styles/prosilver/theme/images/ directory.

2) Open styles/prosilver/theme/common.css
Find:

Code: Select all

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;

After, add:

Code: Select all

	height: 100px;

Change the height according to your image.

3) Open styles/prosilver/theme/colours.css
Find:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

Change bg_header.gif to the name of your image.

4) Open styles/prosilver/template/overall_header.html
Find:

Code: Select all

<div id="site-description">

Before, add:

Code: Select all

<div style="height: 90px;">

Note: The height must be 10 pixels less than the height of your image!

Find:

Code: Select all

<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

After, add:

Code: Select all

</div>

5) Refresh your theme and template.

-----------------------------------------------------------------------------------------------------------------------------------

Remove Site Logo
1) Open styles/prosilver/template/overall_header.html
Find, and remove:

Code: Select all

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>

2) Refresh your template.

-----------------------------------------------------------------------------------------------------------------------------------

Remove Site Name and Description
Open styles/prosilver/template/overall_header.html
Find, and remove:

Code: Select all

<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>

-----------------------------------------------------------------------------------------------------------------------------------

Remove Search Box
1) Open styles/prosilver/template/overall_header.html
Find, and remove:

Code: Select all

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

2) Refresh your template.

-----------------------------------------------------------------------------------------------------------------------------------

Add a Random Header Image
This tutorial is based off of the the following article by pentapenguin.
Knowledge Base - Adding a Random Header Image
It will display a random background on the header, rather than the logo as instructed in the mentioned article.

1) Create your images and name them in the following fashion header_random_1.EXTENSION.

• Start at 1 and move up from there. Make sure you don't miss any numbers.
• Replace EXTENSION with the extension your images use (gif, png, jpg, etc.) The
  extension must be the same on all images.

2) Upload all the images to the styles/prosilver/theme/images/ directory.

3) Open includes/functions.php.
Find:

Code: Select all

'T_STYLESHEET_NAME'		=> $user->theme['theme_name'],

After, add:

Code: Select all

'RANDOM_HEADER'      => mt_rand(1, NUMBER-OF-IMAGES),

• Change NUMBER-OF-IMAGES to the amount of images you created.

4) Open style.php.
Find:

Code: Select all

		'{S_USER_LANG}'				=> $user['user_lang']

Replace with:

Code: Select all

		'{S_USER_LANG}'				=> $user['user_lang'],
		'{RANDOM_HEADER}'      => mt_rand(1, NUMBER-OF-IMAGES)

• As before, change NUMBER-OF-IMAGES to the amount of images you created.

5) Open styles/prosilver/theme/colours.css.
Find:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

Replace with:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/header_random_{RANDOM_HEADER}.EXTENSION");
	color: #FFFFFF;
}

• Change EXTENSION to the extension your images use.

6) Refresh your theme.

-----------------------------------------------------------------------------------------------------------------------------------

Replace "Change font size" icon with search box
1) Open styles/prosilver/template/overall_header.html.
Find:

Code: Select all

<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

Replace with:

Code: Select all

				<li class="rightside" style="font-size: 1em;">
    		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
    			<div id="search-box">
    				<form action="{U_SEARCH}" method="post" id="search">
    				<fieldset>
    					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
    					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
    					 {S_SEARCH_HIDDEN_FIELDS}
    				</fieldset>
    				</form>
    			</div>
    		<!-- ENDIF -->
        </li>

2) Open styles/prosilver/theme/common.css.
Find:

Code: Select all

#search-box {
	color: #FFFFFF;
	position: relative;
	margin-top: 30px;
	margin-right: 5px;
	display: block;
	float: right;
	text-align: right;
	white-space: nowrap; /* For Opera */
}

Replace with:

Code: Select all

#search-box {
  color: #FFFFFF;
  position: relative;
  display: block;
  text-align: right;
  white-space: nowrap; /* For Opera */
  line-height: 1em;
}

3) Refresh your theme and template.

-----------------------------------------------------------------------------------------------------------------------------------

Add search icon to navigation
1) Open styles/prosilver/template/overall_header.html.
Find:

Code: Select all

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

After, add:

Code: Select all

<li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li>

2) Refresh your template.

[kam009]

just in time!

Ur awesome dude... great respect for U

[kam009]

Ok, after many many hours of work and sweat, i managed to get my header to show... So here is what i don't get.

http://img171.imageshack.us/img171/1922/errorml1.png

red part: those 2 pointy things show i don't know what to do. oh and when you log out, they move up a couple inches. you can take a look at it on my live site.

Blue part: I tried what you said in your post but it somehow didn't work.

Yellow part: I deleted the part you said in over_all... file but still didn't work.

here is the website address incase you need to look at it directly.
http://www.pariro.com


btw i have done numerious refreshes from the ACP but nothing changed.
Thanks buddy!

[prototech]

Are you sure you followed all the steps? I can already see that you're missing some things, which is why it appears incorrectly. Can you take a look at each step and make sure you made all the changes?

[CarlT]

Brilliant guide thanks

[datkeoniguy]

I followed the above instructions and it worked fine. However, I would like to be able to click on my banner's image (see your step 3 above) and link back to the forum index page. This ability was removed in the instructions above. Is there a way to do this?

[prototech]

Try this..
Open styles/prosilver/template/overall_header.html
Find:

Code: Select all

<div id="site-description">

After, add:

Code: Select all

<a href="{U_INDEX}" title="{L_INDEX}" id="header-link">Index</a>

Open styles/prosilver/theme/colours.css
At the end of the file, add

Code: Select all

a#header-link {
  display: block;
  width: auto;
  height: 100px; /* Change according to your needs */
  text-indent: -1000px;
}

[datkeoniguy]

I followed the above instruction but can't see any change. If I go to different places within the forum, clicking on the banner does nothing and does not take me back to the main index page of the forum. And yes I did refresh theme, template and imageset -twice in fact, and refreshed the browser.

[ssace]

I tried this to and it didn't work. Not header link there.

[bennzy]

everything is displaying which is good surprised i got it that far, but i seem to be having some problems like another user was in here.

here is the problems ---> http://i134.photobucket.com/albums/q120 ... banner.jpg

the bottom of the banner doesnt have the curved edges and also have those two white mark things one on each side. ive done everything i believe i did right in the instructions you have done but just cant seem to see whats wrong.

[prototech]

I followed the above instruction but can't see any change. If I go to different places within the forum, clicking on the banner does nothing and does not take me back to the main index page of the forum. And yes I did refresh theme, template and imageset -twice in fact, and refreshed the browser.

Change height: auto to the height of your header. If it still doesn't work, please provide me with a link to your board so I can look into further; it works perfectly on my installation.

the bottom of the banner doesnt have the curved edges and also have those two white mark things one on each side. ive done everything i believe i did right in the instructions you have done but just cant seem to see whats wrong.

Did you adjust the height in this step?

Before, add:

Code: Select all

<div style="height: 90px ;">

Note: The height must be 10px less than the height of your image!

[Angel-girl]

I have perhaps a noobish question. I can understand everything that's being said here (I believe), but is it easier to do these edits before one has uploaded the files?

Also, I can find none of that code in the aphotic umbra skin I just downloaded. Bleh, I'm an idiot.

[bennzy]

yeah i did, but for some reason it didnt change to the new size but all good now fixed it and it works, thanks for that

[prototech]

I have perhaps a noobish question. I can understand everything that's being said here (I believe), but is it easier to do these edits before one has uploaded the files?

Also, I can find none of that code in the aphotic umbra skin I just downloaded. Bleh, I'm an idiot.

I think it's easier to have a local test installation and make the changes there. Once you're satisfied, then you can upload them to your server. That way if anything goes wrong, your live installation is still working as it should be.

These changes are intended for prosilver-based styles. Aphotic Umbra is based on subsilver2.

[Angel-girl]

Oops, my face is red. No wonder. Hee. Thanks.

Though it says prosilver in the desc. I found subsilver directions and followed them. If only my ftp client would cooperate, I could test them.