[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
Locked
heywho
Registered User
Posts: 5
Joined: Fri Nov 07, 2008 5:03 am

Re: [How To] Modify prosilver's header

Post by heywho »

TheIlluminative wrote:After reviewing your site, I saw you got this doubled:

Code: Select all

		<div class="headerbar">
          <div class="headerbar">
remove one of them.
BINGO!!!!!.. :D

Thanks...... I was tearing my hair out for two long days on this..... God bless ya
User avatar
naijand
Registered User
Posts: 52
Joined: Sun Nov 02, 2008 6:28 pm
Contact:

Re: [How To] Modify prosilver's header

Post by naijand »

TheIlluminative wrote:naijand, try this, open file: styles/prosilver_se/template/overall_header.html, find:

Code: Select all

        		<div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
                <div style="height: 90px;">
        			<div id="site-description">
        				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
        			</div>  
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
replace with:

Code: Select all

        		<div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
                <div style="height: 90px;">
        			<div id="site-description">
        				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
        			</div></div>
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
Thanks Theilluminative, I've done what you advised and refreshed but still no joy, the 3 errors are still showing; the tick marks at both top edges, the bigger header image (despite resizing) and the overlap.

Hoping you'll have a look again HERE

Thank you
Amphor
Registered User
Posts: 88
Joined: Mon Dec 25, 2006 6:18 pm

Re: [How To] Modify prosilver's header

Post by Amphor »

How to make Site name centered to header, I'm using prosilver special edition
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 »

naijand wrote:Thanks Theilluminative, I've done what you advised and refreshed but still no joy, the 3 errors are still showing; the tick marks at both top edges, the bigger header image (despite resizing) and the overlap.
Use this as your overall_header.html:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="shortcut icon" href="http://adeyinka.adeyeye.googlepages.com/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http://adeyinka.adeyeye.googlepages.com/favicon.ico" type="image/x-icon" />

{META}

<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!--
	phpBB style name: prosilver
	Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  Tom Beddard ( http://www.subBlue.com/ )
	Modified by:      
	
	NOTE: This page was generated by phpBB, the free open-source bulletin board package.
	      The phpBB Group is not responsible for the content of this page and forum. For more information
	      about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
	var jump_page = '{LA_JUMP_PAGE}:';
	var on_page = '{ON_PAGE}';
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';
	var style_cookie = 'phpBBstyle';
	var onload_functions = new Array();
	var onunload_functions = new Array();

	<!-- IF S_USER_PM_POPUP -->
		if ({S_NEW_PM})
		{
			var url = '{UA_POPUP_PM}';
			window.open(url.replace(/&/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
		}
	<!-- ENDIF -->

	/**
	* Find a member
	*/
	function find_username(url)
	{
		popup(url, 760, 570, '_usersearch');
		return false;
	}

	/**
	* New function for handling multiple calls to window.onload and window.unload by pentapenguin
	*/
	window.onload = function()
	{
		for (var i = 0; i < onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (var i = 0; i < onunload_functions.length; i++)
		{
			eval(onunload_functions[i]);
		}
	}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />

<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div id="wrap">
    <div class="border-left">
    <div class="border-right">
    <div class="border-top">

    <div class="border-top-left">
    <div class="border-top-right">
        <div class="inside" style="direction: {S_CONTENT_DIRECTION}; ">
        	<a id="top" name="top" accesskey="t"></a>
        	<div id="page-header">
        		<div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
                        <div style="height: 90px;">
                			<div id="site-description">
        
                				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
                			</div>  
                        </div>
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
        		
        		<div class="navbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
        
        			<ul class="linklist navlinks">
        				<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

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

        				<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
        				<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->

        				<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
        				<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
        			</ul>
        
        			<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
        			<ul class="linklist leftside">
        				<li class="icon-ucp">
        					<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>

        						<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> &bull; 
        					<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
        					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
        					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
        					<!-- ENDIF -->

        				</li>
        			</ul>
        			<!-- ENDIF -->
        
        			<ul class="linklist rightside">
                <li><a href="{U_RSS}" title="{L_RSS_EXPLAIN}"><img src="{T_THEME_PATH}/images/icon_rss.gif"/></a></li>
        				    <li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li>
        				<!-- IF not S_IS_BOT -->
        					<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->

        					<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
        					<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
        				<!-- ENDIF -->
        			</ul>
        
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
        
        	</div>
        
        	<a name="start_here"></a>

        	<div id="page-body">
        		
        		 <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) --> 
        		<div id="message" class="rules">
        			<div class="inner"><span class="corners-top"><span></span></span>
        				<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
        		<!-- ENDIF -->
Amphor wrote:How to make Site name centered to header, I'm using prosilver special edition
In common.css, find:

Code: Select all

#site-description {
	float: left;
	width: 70%;
}
Replace with:

Code: Select all

#site-description {
	float: left;
	width: 70%;
	text-align: center;
}
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
Amphor
Registered User
Posts: 88
Joined: Mon Dec 25, 2006 6:18 pm

Re: [How To] Modify prosilver's header

Post by Amphor »

prototech wrote:
Amphor wrote:How to make Site name centered to header, I'm using prosilver special edition
In common.css, find:

Code: Select all

#site-description {
	float: left;
	width: 70%;
}
Replace with:

Code: Select all

#site-description {
	float: left;
	width: 70%;
	text-align: center;
}
I wanted to center it to the whole header, so I changed the width to 100%, but thanks
User avatar
naijand
Registered User
Posts: 52
Joined: Sun Nov 02, 2008 6:28 pm
Contact:

Re: [How To] Modify prosilver's header

Post by naijand »

prototech wrote:
naijand wrote:Thanks Theilluminative, I've done what you advised and refreshed but still no joy, the 3 errors are still showing; the tick marks at both top edges, the bigger header image (despite resizing) and the overlap.
Use this as your overall_header.html:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>........
Prototech, thank you very much, your code worked like a charm. Thanks also theIlluminative.
User avatar
girlintrouble
Registered User
Posts: 856
Joined: Fri Jan 25, 2008 8:35 pm
Location: UK

Re: [How To] Modify prosilver's header

Post by girlintrouble »

Hi Guys

I have turned off registration and it shows a "|" where the register has been removed in the above text but I dont think I see it.

Welcome Guest: Login | It is currently Sat Nov 08, 2008 9:57 pm

Thanks
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [How To] Modify prosilver's header

Post by Raimon »

girlintrouble wrote:Hi Guys

I have turned off registration and it shows a "|" where the register has been removed in the above text but I dont think I see it.

Welcome Guest: Login | It is currently Sat Nov 08, 2008 9:57 pm

Thanks
replace ;

Code: Select all

      <!-- IF not S_USER_LOGGED_IN -->
             <P>Welcome Guest: <a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a> | <!-- IF S_REGISTER_ENABLED --> <a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF -->
             <span style="margin-left: 450px !important;">{CURRENT_TIME}</span></p>
      <!-- ELSEIF  S_USER_LOGGED_IN -->

             <P>Welcome {S_USERNAME}</p>
      <!-- ENDIF -->
with ;

Code: Select all

      <!-- IF not S_USER_LOGGED_IN -->
             <P>Welcome Guest: <a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a> <!-- IF S_REGISTER_ENABLED --> |  <a href="{U_REGISTER}">{L_REGISTER}</a><!-- ENDIF -->
             <span style="margin-left: 450px !important;">{CURRENT_TIME}</span></p>
      <!-- ELSEIF  S_USER_LOGGED_IN -->

             <P>Welcome {S_USERNAME}</p>
      <!-- ENDIF -->
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!
User avatar
girlintrouble
Registered User
Posts: 856
Joined: Fri Jan 25, 2008 8:35 pm
Location: UK

Re: [How To] Modify prosilver's header

Post by girlintrouble »

Thanks for that Raimon
I knew what I wanted with those ||||s but I just couldnt see them lol (must get my eyes tested), even when u posted it I couldnt see them - I had to really gawk at it lol - and as you knew it was exactly what I needed.
Thanks again.

Just having last bit of trouble with the PM notification on the transparent style - Boy do I really wish I never went anywhere near that style!!! :evil: :evil: :evil: :evil: :evil: (anyhow thats another topic - so sorry for going OT - maybe a good reminder to people not to use unchecked styles! Obviously I was a newbie when I started with it.
lbkk
Registered User
Posts: 10
Joined: Tue Oct 21, 2008 6:03 pm

Re: [How To] Modify prosilver's header

Post by lbkk »

prototech wrote:Try the following..
In overall_header.html, find:

Code: Select all

<div class="headerbar">
Replace with:

Code: Select all

<div class="headerbar" style="background-image: url('<!-- IF FORUM_ID == 4 -->{T_THEME_PATH}/images/header1.jpg<!-- ELSE -->{T_THEME_PATH}/images/bg_header.gif<!-- ENDIF -->') ">
- Edit the code above to suit your needs. The number (4) is the forum id and the part following it (header1.jpg) will be the image used for that forum.

- Add <!-- ELSEIF FORUM_ID == 2 -->{T_THEME_PATH}/images/header2.jpg before <!-- ELSE --> for any extra forums. Change the forum id (2) and the name of the image(headerbg2.jpg) following it according to the forum. The part after <!-- ELSE --> will be the image displayed for everything else.

Good luck. ;)


Thanks for the good suggestion and Prototech come up this great headbar
It's work great at IE but in FireFox...anyhelp is appreciate it..

Thanks again
onetimer
Registered User
Posts: 133
Joined: Tue Apr 13, 2004 12:24 am

Re: [How To] Modify prosilver's header

Post by onetimer »

Hi, I'm having a little difficulty with the corner images. My background image (bg_header.gif) is 200 pixels high, but in order to get the corners to show I have to set the height to 194 pixels (in common.css). That's not a problem, and I assume it's because of some padding somewhere (?). But if I want to make my bg_header.gif smaller (and I do!) these corners disappear completely, even if I set the pixel hight in common.css to a lower number. All that happens is that the top navigation bar (bg_nav_block_header.gif) moves closer to the overall header.

I also do not know where my top corner images are (I think I maybe accidentally deleted that code). Where do I edit back the top corners?

These are the corners I'm talking about;
Image
One, Two, Three!
Sandra_D
Registered User
Posts: 7
Joined: Sun Nov 09, 2008 3:53 pm

Re: [How To] Modify prosilver's header

Post by Sandra_D »

Hi, thanks for this tut. Now I have a question..........what is the right width size for animage to match the rest of the layout, if you see my header it repeats a bit atthe right end, please help!
http://worldofpixels.com/DAC/

Edit:
I think I got it, but will this happen again if my image next time doesn't have much black at the ends?
kurishiiu
Registered User
Posts: 3
Joined: Tue Nov 11, 2008 4:20 pm

Re: [How To] Modify prosilver's header

Post by kurishiiu »

Sandra_D wrote:Hi, thanks for this tut. Now I have a question..........what is the right width size for animage to match the rest of the layout, if you see my header it repeats a bit atthe right end, please help!
http://worldofpixels.com/DAC/

Edit:
I think I got it, but will this happen again if my image next time doesn't have much black at the ends?
i had the same problem a couple of minutes ago, this the answer

open common.css

find

Code: Select all

.headerbar {
   background: #ebebeb none repeat-x center 0;
replace with

Code: Select all

.headerbar {
   background: #ebebeb none no-repeat center 0;
hopes it help ;)
Last edited by kurishiiu on Thu Nov 13, 2008 2:04 pm, edited 1 time in total.
User avatar
naijand
Registered User
Posts: 52
Joined: Sun Nov 02, 2008 6:28 pm
Contact:

Re: [How To] Modify prosilver's header

Post by naijand »

does this support 3.03?

Thanks
Sandra_D
Registered User
Posts: 7
Joined: Sun Nov 09, 2008 3:53 pm

Re: [How To] Modify prosilver's header

Post by Sandra_D »

sorry if my question is dumb, but where do I find the headerbar? :oops:
Locked

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