[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
Locked
nabeelmallick
Registered User
Posts: 89
Joined: Sun Dec 16, 2007 12:02 am

Re: [How To] Modify prosilver's header

Post by nabeelmallick »

edit: sorry problem resolved.. it was my stupidity!! :oops:
stephenhart
Registered User
Posts: 10
Joined: Sat Mar 22, 2008 6:09 pm

Re: [How To] Modify prosilver's header

Post by stephenhart »

Thanks for this extensive tutorial and all the Q&A.

I'm completely new to php and phpBB, and for the most part to CSS, but I was able to follow the initial tutorial to change the header image. I worked around the repeat issue by making a wide header image and followed the instructions to prevent that from repeating.

What I'd like to do next is add a row of buttons/links pretty much identical to the standard phpBB Support pages, with the square corners on the bottom of the main image and top of the button row. I've seen a couple of questions along that line, but haven't seen a step-by-step answer. If I missed it, I'd be grateful for a link.

Here's my forum so far.
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 »

319 wrote:
prototech wrote:Can you post a link to your board so that I can take a look at your code?
I have simple Prosilver style.

:arrow: http://www.metal.by/
That's your site, not the board. ;)
stephenhart wrote: What I'd like to do next is add a row of buttons/links pretty much identical to the standard phpBB Support pages, with the square corners on the bottom of the main image and top of the button row. I've seen a couple of questions along that line, but haven't seen a step-by-step answer. If I missed it, I'd be grateful for a link.

Here's my forum so far.
Which buttons are you referring to?
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
stephenhart
Registered User
Posts: 10
Joined: Sat Mar 22, 2008 6:09 pm

Re: [How To] Modify prosilver's header

Post by stephenhart »

stephenhart wrote: What I'd like to do next is add a row of buttons/links pretty much identical to the standard phpBB Support pages...

Here's my forum so far.
prototech wrote: Which buttons are you referring to?
About, Downloads, Customise, Support, etc., right under the header image.
stephenhart
Registered User
Posts: 10
Joined: Sat Mar 22, 2008 6:09 pm

Re: [How To] Modify prosilver's header

Post by stephenhart »

Here's one more thing I'd like to change. I'm hoping an answer to this question will clue me in to similar potential changes.

I'd like to change the text "Board index" in the breadcrumbs row, right under the header graphic.
Daisama
Registered User
Posts: 8
Joined: Sat Mar 22, 2008 9:35 pm

Re: [How To] Modify prosilver's header

Post by Daisama »

problem solved
Last edited by Daisama on Fri Mar 28, 2008 4:27 am, edited 1 time in total.
hithere01
Registered User
Posts: 69
Joined: Tue Jun 28, 2005 7:42 pm

Re: [How To] Modify prosilver's header

Post by hithere01 »

Daisama wrote:Hi,

For some reason, my header's bottom corners only appear in IE. They do not appear in Firefox or Opera. What can I do to fix it? Any help would be appreciated. Thank you.

Here is the link:
http://tinyurl.com/3xdfe2
I removed the corners in firefox by removing the span corner backgrounds and setting the color to transparent, but in IE the corners still remained (I didn't want the rounded corners but simply removing the span tags really hosed the formatting).

Before trying to get rid of those corners however, I happened to install the new Internet Explorer 8 - presto, corners gone, and it appears just like Firefox now.

So before you make work for yourself, you may just want to recommend your users upgrade :D
Daisama
Registered User
Posts: 8
Joined: Sat Mar 22, 2008 9:35 pm

Re: [How To] Modify prosilver's header

Post by Daisama »

hithere01 wrote:So before you make work for yourself, you may just want to recommend your users upgrade :D
If only they would all listen.... :D


So, does anyone know how to fix it for ALL browsers?
Last edited by Daisama on Mon Mar 24, 2008 7:48 pm, edited 1 time in total.
madaros
Registered User
Posts: 9
Joined: Fri Mar 21, 2008 3:43 pm

Re: [How To] Modify prosilver's header

Post by madaros »

madaros wrote:how can i put the image to centre like the whole forum ??
and I want to have only few px space between this image and the blue field with BOARD INDEX,FAQ,MEMBERS....

can somebody help me ?? Ive done a lot alone from instructions here,but I dont know where to find and set the position of the image... :(

http://madaros.ic.cz/root/forum3/
bagheadinc wrote:It looks like it's getting pushed over by the header margins, try taking this line of code...

Code: Select all

<a href="./index.php?sid=3072c7671e2d1b529b02267a249b6b9b" title="Obsah fóra" id="logo"><img src="./styles/prosilver/imageset/site_logo.gif" width="762" height="84" alt="" title="" /></a>
And moving it just above <div id="page-header">
a did that but nothing happens.. it was worse.. :( any other suggestions ??
319
Registered User
Posts: 144
Joined: Fri Dec 21, 2007 12:47 am
Contact:

Re: [How To] Modify prosilver's header

Post by 319 »

prototech wrote:
319 wrote:
prototech wrote:Can you post a link to your board so that I can take a look at your code?
I have simple Prosilver style.

:arrow: http://www.metal.by/
That's your site, not the board. ;)
Sorry, http://www.forum.metal.by/
Daisama
Registered User
Posts: 8
Joined: Sat Mar 22, 2008 9:35 pm

Re: [How To] Modify prosilver's header

Post by Daisama »

problem solved
Last edited by Daisama on Fri Mar 28, 2008 4:27 am, edited 1 time in total.
stephenhart
Registered User
Posts: 10
Joined: Sat Mar 22, 2008 6:09 pm

Re: [How To] Modify prosilver's header

Post by stephenhart »

You might compare the source for my phbBB header image, modified according to the instructions at the beginning of this long thread, with yours. I didn't lose the bottom corners. Just a wild guess, but maybe you selected and replaced just a little too much code. Or, maybe you didn't adjust the height correctly. If you change the 100 px height, you have to change another height to 10 px less.
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 »

stephenhart wrote:About, Downloads, Customise, Support, etc., right under the header image.
I'll get back to you as soon as possible.. I don't have time to come up with the code for it, at the moment.
stephenhart wrote:Here's one more thing I'd like to change. I'm hoping an answer to this question will clue me in to similar potential changes.

I'd like to change the text "Board index" in the breadcrumbs row, right under the header graphic.
In lang/en/common.php, find and edit:

Code: Select all

	'FORUM_INDEX'			=> 'Board index',
Daisama wrote:For some reason, my header's bottom corners only appear in IE. They do not appear in Firefox or Opera. What can I do to fix it? Any help would be appreciated. Thank you.
Change the height to 93px in the following located in colours.css:

Code: Select all

a#header-link {
  display: block ;
  width: auto ;
  height: 103px ; /* Change according to your needs */
  text-indent: -1000px ;
}
madaros wrote:Ive done a lot alone from instructions here,but I dont know where to find and set the position of the image...
None of your code suggests that you followed the instructions from my original post.
In overall_header.html, find:

Code: Select all

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

			<div id="site-description">
				<a href="./index.php?sid=4591ea66e5c2bc89296151a8a6d26dea" title="Obsah fóra" id="logo"><img src="./styles/prosilver/imageset/site_logo.gif" alt="" title="" /></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>

		<div class="navbar">
Replace with:

Code: Select all

<a href="{U_INDEX}" title="Obsah fóra" id="logo"><img src="./styles/prosilver/imageset/site_logo.gif" alt="" title="" /></a>

<div class="navbar" style="clear: both; margin-top: 5px;">
I took a look at your board... but I'm still not exactly sure what you're trying to achieve. Can you explain it a bit further? Maybe provide a more detailed image which actually contains your board instead of phpBB.com's?
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
Daisama
Registered User
Posts: 8
Joined: Sat Mar 22, 2008 9:35 pm

Re: [How To] Modify prosilver's header

Post by Daisama »

Change the height to 93px in the following located in colours.css:

Code: Select all

a#header-link {
  display: block ;
  width: auto ;
  height: 103px ; /* Change according to your needs */
  text-indent: -1000px ;
}
Thank you SO much. It finally works now!
stephenhart
Registered User
Posts: 10
Joined: Sat Mar 22, 2008 6:09 pm

Re: [How To] Modify prosilver's header

Post by stephenhart »

prototech wrote:
stephenhart wrote:About, Downloads, Customise, Support, etc., right under the header image.
I'll get back to you as soon as possible.. I don't have time to come up with the code for it, at the moment.
Thank you. No rush.
prototech wrote:
stephenhart wrote:Here's one more thing I'd like to change. I'm hoping an answer to this question will clue me in to similar potential changes.

I'd like to change the text "Board index" in the breadcrumbs row, right under the header graphic.
In lang/en/common.php, find and edit:

Code: Select all

	'FORUM_INDEX'			=> 'Board index',
Thank you. Got it. And, it gives me a lead on other potential changes.
Locked

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