[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
Locked
Cloud's Soul
Registered User
Posts: 43
Joined: Sun Aug 10, 2003 7:47 am
Location: Austin, Texas
Contact:

Re: [How To] Modify prosilver's header

Post by 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
Registered User
Posts: 66
Joined: Tue Jul 10, 2007 9:16 pm

Re: [How To] Modify prosilver's header

Post by gph »

HishamAbu wrote: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
Registered User
Posts: 53
Joined: Wed Dec 26, 2007 6:15 pm

Re: [How To] Modify prosilver's header

Post by Kingster »

I have did all of that and it still does the same thing everytime
User avatar
HishamAbu
Registered User
Posts: 63
Joined: Thu Dec 27, 2007 6:33 pm
Contact:

Re: [How To] Modify prosilver's header

Post by HishamAbu »

gph wrote:
HishamAbu wrote: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
Kind regards, HishamAbu
gph
Registered User
Posts: 66
Joined: Tue Jul 10, 2007 9:16 pm

Re: [How To] Modify prosilver's header

Post by gph »

Great! :D
User avatar
HishamAbu
Registered User
Posts: 63
Joined: Thu Dec 27, 2007 6:33 pm
Contact:

Re: [How To] Modify prosilver's header

Post by HishamAbu »

prototech wrote: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
Kind regards, HishamAbu
Cloud's Soul
Registered User
Posts: 43
Joined: Sun Aug 10, 2003 7:47 am
Location: Austin, Texas
Contact:

Re: [How To] Modify prosilver's header

Post by 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 :D
#Darren
Registered User
Posts: 206
Joined: Mon Jun 05, 2006 5:18 pm

Re: [How To] Modify prosilver's header

Post by #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! :)
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech »

SwapsRulez wrote:i cant find this code in my overall_header.html....
Then what's the problem? ;)
gph wrote: I'm having a similar problem with missing bottom rounded corners on my custom header...
Can you provide a link to your board?
miaggi wrote: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?
Kingster wrote: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?
HishamAbu wrote: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.
#Darren wrote: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.
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
#Darren
Registered User
Posts: 206
Joined: Mon Jun 05, 2006 5:18 pm

Re: [How To] Modify prosilver's header

Post by #Darren »

prototech wrote: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 :D , thanks prototech!
#Darren
Registered User
Posts: 206
Joined: Mon Jun 05, 2006 5:18 pm

Re: [How To] Modify prosilver's header

Post by #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?
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by prototech »

Do you want to remove the whole header?
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
#Darren
Registered User
Posts: 206
Joined: Mon Jun 05, 2006 5:18 pm

Re: [How To] Modify prosilver's header

Post by #Darren »

prototech wrote: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.
User avatar
prototech
Former Team Member
Posts: 5406
Joined: Mon Mar 19, 2007 2:04 pm
Location: Southern California

Re: [How To] Modify prosilver's header

Post by 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>
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
#Darren
Registered User
Posts: 206
Joined: Mon Jun 05, 2006 5:18 pm

Re: [How To] Modify prosilver's header

Post by #Darren »

Thanks again Prototech 8-)
Locked

Return to “[3.0.x] Styles Support & Discussion”