[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
Locked
Orange Guy
Registered User
Posts: 6
Joined: Sun Jan 06, 2008 5:39 am

Re: [How To] Modify prosilver's header

Post by Orange Guy »

prototech wrote:
Orange Guy wrote:Any thoughts on what line in common.css I need to adjust padding in to make the menu not wrap?
Can you provide a link to your board?
The menu wraps in FF. In IE, it doesn't wrap, but gets shifted one pixel to the right.

http://www.qcdiscgolfclub.com/forum/
Daniel_L
Registered User
Posts: 113
Joined: Fri Jan 04, 2008 3:01 pm

Re: [How To] Modify prosilver's header

Post by Daniel_L »

prototech wrote:It would still be a good idea to change the background color. To remove the space, open common.css and find:

Code: Select all

#site-description h1 {
	margin-right: 0;
After, add:

Code: Select all

	display: inline;
It does not work, what happened is the title and description moved closer to the top but the mystery space below the logo is still there.
Image
Don't worry, the black is there only to better explain. As you can see, there is some space below the logo and the black area that I would like to eliminate and of course also eliminate the black space completly because even in red (like it is in fact) it's not welcome. So I guess I need to move the corners up a bit?

EDIT: just tried in FF and all is fine there! Another IE6 only problem. I guess there is nothing to do except messing in the tweaks.css

This is what I get in FF:
Image
We see the space reserved for the logo don't show up but that's not a problem, it means there is no weird space below. Also I don't know why, the Advanced search is left aligned while in IE it look centered in the search field box.

Thanks again and again. :)
Successfully running phpBB 3 on an association website since Feb 25th of 2008.
I'm a voluntarily webmaster.
User avatar
MechaCon-Loki
Registered User
Posts: 67
Joined: Tue Dec 18, 2007 5:13 pm
Location: Lafayette, LA
Contact:

Re: [How To] Modify prosilver's header

Post by MechaCon-Loki »

re: Adding the random banner

Works beautifully. Took only a few moments and now my site has a new feature for our users 8-)

Thanks prototech for adding on to an already great tutorial.
User avatar
SwapsRulez
Registered User
Posts: 163
Joined: Sun Sep 16, 2007 5:48 am

Re: [How To] Modify prosilver's header

Post by SwapsRulez »

i cant find this code in my overall_header.html

Code: Select all

<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->
here goes my whole 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="2002-2006 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{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 (i = 0; i <= onload_functions.length; i++)
		{
			eval(onload_functions[i]);
		}
	}

	window.onunload = function()
	{
		for (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 class="outside">
 <div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
<div class="inside">
 <div class="notopgap">
<div id="wrap">
	<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 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>
    		<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"><a href="#" onclick="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></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 class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</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 --><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 -->
So can you return the file by making some changes in it according to your way..... :P
please.... :cry: Thanks in advance... :)
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 »

Having some issues...

http://requiem-knights.com/azeroth/index.php

My background image is repeating itself, and my PC is running images at 1440x900 19"w

But anyways, I am trying to figure out if there is a code that allows me to have it on auto I suppose, trying to center and not have it on repeat.

edit everything the way it supposed to be, and didn't replace bg_header.gif, though it won't see it even though I refresh cache.
gph
Registered User
Posts: 66
Joined: Tue Jul 10, 2007 9:16 pm

Re: [How To] Modify prosilver's header

Post by gph »

I have been following this excellent HOWTO guide - great work!!

A question - now that I have removed my site logo and description, and have replaced the default background with a customer header image - how do I create a hyperlinked area that matches the header area, similar to the header on each phpbb.com web page? Do I "overlay" some sort of hyperlinked transparent block over the header? If so - how? :-)

Thanks!

gph
guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: [How To] Modify prosilver's header

Post by guyskankrye »

gph wrote:I have been following this excellent HOWTO guide - great work!!

A question - now that I have removed my site logo and description, and have replaced the default background with a customer header image - how do I create a hyperlinked area that matches the header area, similar to the header on each phpbb.com web page? Do I "overlay" some sort of hyperlinked transparent block over the header? If so - how? :-)

Thanks!

gph
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 ;
}
Don't forget to change "height: xyz" to the height of your header. Example: 140px.

Thank Prototech when it works. :D
gph
Registered User
Posts: 66
Joined: Tue Jul 10, 2007 9:16 pm

Re: [How To] Modify prosilver's header

Post by gph »

That worked like a treat - thank you to both guyskakyre and prototech :-)
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 »

I am having problems too and I modifed with Progrey like the last guy, but still no image shows up, and I have editted the very same way on page one, and looked at silver.Css and changed it....I think something is missing in the lesson. Followed everything to just try to change the header.
guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: [How To] Modify prosilver's header

Post by guyskankrye »

Cloud's Soul wrote:I am having problems too and I modifed with Progrey like the last guy, but still no image shows up, and I have editted the very same way on page one, and looked at silver.Css and changed it....I think something is missing in the lesson. Followed everything to just try to change the header.
ACP - Styles - Style Components - Themes - Progrey - Refresh - Yes?
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 »

Yup, "Refreshed" and Refreshed/Deleted the "Cache" as well...Lol, I don't know what the problem is, with the regular Prosilver is was doing the same thing too...I dunno if I missed something but I followed the instructions. Not doing random. But with Prosilver the picture was on repeat (only 850px) so I saw 1 1/2 of the picture so...I hope I am not going nuts here...


Code: Select all

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

Code: Select all

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
	height: 150px;
}
Common

Code: Select all

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

Code: Select all

</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
			</div>
Those are my Overall_header
gph
Registered User
Posts: 66
Joined: Tue Jul 10, 2007 9:16 pm

Re: [How To] Modify prosilver's header

Post by gph »

I'm having a similar problem with missing bottom rounded corners on my custom header. My code from overall_header.html:

Code: Select all

<div id="wrap">
	<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: 100px;">
			<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="header-link">Index</a>
				<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>
I have already altered the height on the stylesheet, to that of the image, which is 110px tall. Can't for the life of me figure this out... is it a missing </div> somewhere perhaps??

If I set the height to 120px in the .headerbar properties on common.css, I end up with an extra 10px of header, and then the rounded corners appear.... :roll:
miaggi
Registered User
Posts: 4
Joined: Thu Jan 10, 2008 10:00 am
Location: Innsbruck/Austria

Re: [How To] Modify prosilver's header

Post by miaggi »

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".
It looks like there is missing some space between the blue bar and
the time:

http://img413.imageshack.us/my.php?image=bild1ow9.png
takk
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 »

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

My Edits

styles/prosilver/theme/common.css

Code: Select all

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
	height: 140px;
}
styles/prosilver/theme/colours.css

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/header.gif");
	color: #FFFFFF;
}
styles/prosilver/template/overall_header.html

Code: Select all

<div id="wrap">
	<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: 130px ;">

			<div id="site-description">
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>
		</div>
			<span class="corners-bottom"><span></span></span></div>
		</div>

    <div id="tabs">
       <ul>
          <li<!-- IF basename($_SERVER['SCRIPT_NAME']) == 'index.php' or basename($_SERVER['SCRIPT_NAME']) == 'viewforum.php' or basename($_SERVER['SCRIPT_NAME']) == 'viewtopic.php' --> class="activetab"<!-- ENDIF -->><a href="{U_INDEX}"><span>{L_INDEX}</span></a></li>
          <!-- IF S_DISPLAY_SEARCH --><li<!-- IF basename($_SERVER['SCRIPT_NAME']) == 'search.php' --> class="activetab"<!-- ENDIF -->><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}"><span>{L_SEARCH}</span></a></li><!-- ENDIF -->
          <!-- IF S_DISPLAY_MEMBERLIST --><li<!-- IF basename($_SERVER['SCRIPT_NAME']) == 'memberlist.php' --> class="activetab"<!-- ENDIF -->><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}"><span>{L_MEMBERLIST}</span></a></li><!-- ENDIF -->
          <li<!-- IF basename($_SERVER['SCRIPT_NAME']) == 'faq.php' --> class="activetab"<!-- ENDIF -->><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}"><span>{L_FAQ}</span></a></li>
       </ul>
    </div>
Just so you know, I've got the 'Prime Quick Login' Version 1.0.1d installed, and the Easy Menu.

Does anyone know how to fix this?

Thanks.
Kind regards, HishamAbu
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 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.
Image
Locked

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