[How To] Modify prosilver's header

Orange Guy · Post by **Orange Guy** » Mon Jan 07, 2008 1:12 am

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 · Post by **Daniel_L** » Mon Jan 07, 2008 2:26 am

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.

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:

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.

MechaCon-Loki · Post by **MechaCon-Loki** » Mon Jan 07, 2008 7:43 am

re: Adding the random banner

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

Thanks prototech for adding on to an already great tutorial.

SwapsRulez · Post by **SwapsRulez** » Mon Jan 07, 2008 10:24 am

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

please....

Thanks in advance...

Cloud's Soul · Post by **Cloud's Soul** » Tue Jan 08, 2008 7:46 am

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 · Post by **gph** » Wed Jan 09, 2008 3:03 am

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 · Post by **guyskankrye** » Wed Jan 09, 2008 11:58 am

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.

gph · Post by **gph** » Wed Jan 09, 2008 2:59 pm

That worked like a treat - thank you to both guyskakyre and prototech

Cloud's Soul · Post by **Cloud's Soul** » Wed Jan 09, 2008 10:14 pm

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 · Post by **guyskankrye** » Wed Jan 09, 2008 10:50 pm

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 · Post by **Cloud's Soul** » Thu Jan 10, 2008 12:56 am

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 · Post by **gph** » Fri Jan 11, 2008 4:28 am

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

miaggi · Post by **miaggi** » Fri Jan 11, 2008 6:07 pm

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

HishamAbu · Post by **HishamAbu** » Fri Jan 11, 2008 7:05 pm

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.

Kingster · Post by **Kingster** » Fri Jan 11, 2008 7:36 pm

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.

advertisements