[How To] Modify prosilver's header

[Cloud's Soul]

Wow alot of issues, anyone got any solutions? I mean what are we not doing right or missing. Lol, I am thinking that we are still missing one piece..or atleast I think so.

[gph]

I'm having some trouble. I've followed all the steps, but the new header image just doesn't want to show.

Did you refresh the style cache at ACP >> Styles >> Themes [for the CSS changes] and the template cache using the bottom set of buttons on the first page of the ACP [for the overall_header.html changes] - both followed by clearing the cache in your browser and then reloading your pages?

[Kingster]

I have did all of that and it still does the same thing everytime

[HishamAbu]

I'm having some trouble. I've followed all the steps, but the new header image just doesn't want to show.

Did you refresh the style cache at ACP >> Styles >> Themes [for the CSS changes] and the template cache using the bottom set of buttons on the first page of the ACP [for the overall_header.html changes] - both followed by clearing the cache in your browser and then reloading your pages?

Thank you so much. I never knew about the Styles > Themes > Refresh, I only knew about the ACP Index > Purge the cache.

Thanks a million, it's now working and looks very nice.

Kind regards

[gph]

Great!

[HishamAbu]

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: xyz ; /* Change according to your needs */
  text-indent: -1000px ;
}

This doesn't seem to be working for me. What it's done is shifted the Site Name and Description down, and put an invisiable block above it, with a link to the main index.

My details are:

styles/prosilver/template/overall_header.html

Code: Select all

			<div id="site-description">
            	<a href="{U_INDEX}" title="{L_INDEX}" id="header-link">Index</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>
		</div>

styles/prosilver/theme/colours.css

Code: Select all

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

Anyone know how to fix this?

Thanks again.

Kind regards

[Cloud's Soul]

Code: Select all

.headerbar {
background: #505C65 none repeat-x 0 0;
[b]background-image: url("{T_THEME_PATH}/images/header.gif");[/b]
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
height: 150px ;
}

Update; Problem Fixed, wouldn't show up due to one piece missing, "bolded for your pleasure", in Silver.CSS

For other's I'd recommend you apply this to certain CSS files that maybe missing them.

http://requiem-knights.com/azeroth

Looks better

[#Darren]

Great guide but there is something I don't get. It tells us how to remove the search box, but it doesn't tell us how to relocate it to another area.

Don't you guys want to keep the search box? I know I do!

[prototech]

i cant find this code in my overall_header.html....

Then what's the problem?

I'm having a similar problem with missing bottom rounded corners on my custom header...

Can you provide a link to your board?

I´ve got a little problem with this modification. I do have now my
custom header, but with a little problem with the time and "last visit"...

Must be missing a closing tag, can you provide a link to your board?

I have a problem I did this to my forum and I cant figure out what to do about the header part where it is showing the blue. Could someone help me out here is a photo of the forum page.

There's some inconsistencies with the height. Can you provide a link to your board?

This doesn't seem to be working for me. What it's done is shifted the Site Name and Description down, and put an invisiable block above it, with a link to the main index.

That will only work correctly for people who have removed both the site name and description. I'll try and come up with another solution for those that did not remove them.

Great guide but there is something I don't get. It tells us how to remove the search box, but it doesn't tell us how to relocate it to another area.

I'll add another two tutorials that will explain how to replace the "Change font size" icon with the search box and how to add a link to the search similar to what phpbb.com has.

[#Darren]

I'll add another two tutorials that will explain how to replace the "Change font size" icon with the search box and how to add a link to the search similar to what phpbb.com has.

Sounds like a thing of beauty , thanks prototech!

[#Darren]

Prototech,

having removed the Site Logo, Site Name and Description and Search Box, a long thin dark background image remains. Can we get rid of that too?

[prototech]

Do you want to remove the whole header?

[#Darren]

Do you want to remove the whole header?

I think that's what I want. I want to remove the whole area that had the logo, name, description, search, including the rounded rectangle that circled it.

[prototech]

Remove the following from overall_header.html:

Code: Select all

<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- 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 -->

			<span class="corners-bottom"><span></span></span></div>
		</div>

[#Darren]

Thanks again Prototech