[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
marekmikula0
Registered User
Posts: 55
Joined: Thu Jun 12, 2014 11:44 am
Contact:

Re: [How To] Modify prosilver's header

Post by marekmikula0 »

Working this tutorials on phpBB 3.1 ?
Moneyearn.eu - Earnings on the Internet
User avatar
judgedredd
Registered User
Posts: 46
Joined: Mon Mar 10, 2014 4:58 am

Re: [How To] Modify prosilver's header

Post by judgedredd »

No reason why it shouldn't.
User avatar
hewmac06
Former Team Member
Posts: 847
Joined: Sat Apr 08, 2006 12:04 pm
Location: Bellarine Peninsula, Australia
Name: Hugh

Re: [How To] Modify prosilver's header

Post by hewmac06 »

marekmikula0 wrote:Working this tutorials on phpBB 3.1 ?
Hope to get a response to this question when things settle down.
See: viewtopic.php?p=13772001#p13772001
WildIsle
Registered User
Posts: 1
Joined: Sat Nov 01, 2014 3:42 pm

Re: [How To] Modify prosilver's header

Post by WildIsle »

This thread is pretty old but I am trying to do exactly what it describes but right at the start I don't see a 'Templates' or 'Refresh' option. In fact despite installing other themes I only see pro silver as a choice in the Admin Control Panel?

Any suggestions? Using 3.1
User avatar
KevC
Support Team Member
Support Team Member
Posts: 72343
Joined: Fri Jun 04, 2004 10:44 am
Location: Oxford, UK
Contact:

Re: [How To] Modify prosilver's header

Post by KevC »

WildIsle wrote:This thread is pretty old but I am trying to do exactly what it describes but right at the start I don't see a 'Templates' or 'Refresh' option. In fact despite installing other themes I only see pro silver as a choice in the Admin Control Panel?

Any suggestions? Using 3.1
3.0 and 3.1 are different.
You should start a new topic in the 3.1 styles forum
viewforum.php?f=481
-:|:- Support Request Template -:|:-
Image
"Step up to red alert. Sir, are you absolutely sure? It does mean changing the bulb"
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How To] Modify prosilver's header

Post by Lumpy Burgertushie »

alhitary wrote:is this [How to] lesson works fine with 3.1 ?!
i wish it is updated
try it and see if it works. if not, replace the files you edited with the copies you made before you started and you are fine.


robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
prepper
Registered User
Posts: 8
Joined: Thu Nov 13, 2014 4:04 am

Re: [How To] Modify prosilver's header

Post by prepper »

I used the above to add in a custom banner graphic to my site, oldenimagineering.com/forums.

Now I need to move the search box and resolve the now 'scrunched' menu options.

Please advise!

Thanks!
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How To] Modify prosilver's header

Post by Lumpy Burgertushie »

it looks like you combined a couple of different things. you have one div set to 90px for something then another set to 260 for the image in the header bar etc. etc.

I would start over and follow the instructions carefully. you should be removing the logo and site description etc and replacing it with your background image/logo.

further down on the page of instructions it tells you how to either delete the search or move it to the navbar below it.

luck,
robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
fireworktn
Registered User
Posts: 8
Joined: Sat Dec 13, 2014 11:40 am

Re: [How To] Modify prosilver's header

Post by fireworktn »

Can someone remake this tutorials in phpbb 3.1.2 for prosilver se please because i'm really struggling. I think it will not be hard as there is some parts that will stay the same.
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How To] Modify prosilver's header

Post by Lumpy Burgertushie »

here are the relevant parts of it for prosilver_se



Table of Contents

Add a Custom Header Image
Remove Site Logo
Remove Site Name and Description
Remove Search Box
Add search icon to navigation


-----------------------------------------------------------------------------------------------------------------------------------

Add a Custom Header Image
1) First of all, upload your image to the styles/prosilver_se/theme/images/ directory.

2) Open styles/prosilver/theme/common.css
Find:

Code: Select all

.headerbar {
	background: transparent none repeat-x 0 0;
	margin-bottom: 1px;
	padding: 5px;
	border-top-left-radius:7px;
	border-top-right-radius:7px;
	border-bottom-right-radius:7px;
	border-bottom-left-radius:7px; 
After, add:

Code: Select all

   height: 100px;
Change the height according to your image.

3) Open styles/prosilver_se/theme/stylesheet.css
Find:

Code: Select all

.headerbar {
	background-color: #7C8891;
	background-image: url("./images/bg_header.gif");
}
Change bg_header.gif to the name of your image.

4) Open styles/prosilver_se/template/overall_header.html
Find:

Code: Select all

<div id="site-description">
Before, add:

Code: Select all

<div style="height: 90px;">
Note: The height must be 10 pixels less than the height of your image!

Find:

Code: Select all

<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
After, add:

Code: Select all

</div>
5) purge the cache and refresh your browser.

-----------------------------------------------------------------------------------------------------------------------------------

Remove Site Logo
1) Open styles/prosilver_se/template/overall_header.html
Find, and remove:

Code: Select all

<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{SITE_LOGO_IMG}</a>
2) purge the cache and refresh your browser

-----------------------------------------------------------------------------------------------------------------------------------

Remove Site Name and Description
1) Open styles/prosilver_se/template/overall_header.html
Find, and remove:

Code: Select all

<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
2) purge the cache and refresh your browser
-----------------------------------------------------------------------------------------------------------------------------------

Remove Search Box
1) Open styles/prosilver_se/template/overall_header.html
Find, and remove:

Code: Select all

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="{SEARCH_WORDS}" placeholder="{L_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 -->
2) purge the cache and refresh your browser

-----------------------------------------------------------------------------------------------------------------------------------

Add search icon to navigation
1) Open styles/prosilver_se/template/navbar_header.html.
Find:

Code: Select all

<li class="small-icon icon-faq" <!-- IF not S_USER_LOGGED_IN -->data-skip-responsive="true"<!-- ELSE -->data-last-responsive="true"<!-- ENDIF -->><a href="{U_FAQ}" rel="help" title="{L_FAQ_EXPLAIN}" role="menuitem">{L_FAQ}</a></li>
After, add:

Code: Select all

<li class="small-icon icon-search" data-last-responsive="true"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}" role="menuitem">{L_SEARCH}</a></li>

2) purge the cache and refresh your browser
Last edited by Lumpy Burgertushie on Sat Jan 03, 2015 1:26 am, edited 1 time in total.
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
User avatar
fireworktn
Registered User
Posts: 8
Joined: Sat Dec 13, 2014 11:40 am

Re: [How To] Modify prosilver's header

Post by fireworktn »

it's all good but i can't find this code.

Code: Select all

<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
            </fieldset>
            </form>
         </div>
      <!-- ENDIF -->
After, add:

Code: Select all

</div>
5) purge the cache and refresh your browser.
User avatar
fireworktn
Registered User
Posts: 8
Joined: Sat Dec 13, 2014 11:40 am

Re: [How To] Modify prosilver's header

Post by fireworktn »

i put the /div after this.. i think its working.

Code: Select all

<div style="height: 80px;">
			<div id="site-description">
			</p>
			</div>

			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
					<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
THANK you so so much btw, you are the best robert
User avatar
Lumpy Burgertushie
Registered User
Posts: 69223
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How To] Modify prosilver's header

Post by Lumpy Burgertushie »

I used the prosilver version of the file instead of the prosilver_se version in the instructions. the code is the same but the spacing is different. I have edited the post above with the correct code from the prosilver_se file.
I also corrected another mistake in it.

glad you got it working.


robert
Premium phpBB 3.3 Styles by PlanetStyles.net

I am pleased to announce that I have completed the first item on my bucket list. I have the bucket.
Elunee
Registered User
Posts: 3
Joined: Mon Apr 06, 2015 12:32 am

Re: [How To] Modify prosilver's header

Post by Elunee »

I'm feeling down... it doesn't make sense... I'm doing EXACTLY what is written in the first post, but it doesn't work at all -.- The search bar i mean.
Link to site(don't mind the header, I'm working on it atm, just stopped because of this search box) - http://hgmn.cba.pl/index.php
How my code looks:

Code: Select all

<!DOCTYPE html>
<html dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}">
<head>
<meta 

charset="utf-8" />
<meta name="viewport" content="width=device-width" />
{META}
<title><!-- IF UNREAD_NOTIFICATIONS_COUNT -->({UNREAD_NOTIFICATIONS_COUNT}) <!-- 

ENDIF --><!-- IF not S_VIEWTOPIC and not S_VIEWFORUM -->{SITENAME} - <!-- ENDIF 

--><!-- IF S_IN_MCP -->{L_MCP} - <!-- ELSEIF S_IN_UCP -->{L_UCP} - <!-- ENDIF --

>{PAGE_TITLE}<!-- IF S_VIEWTOPIC or S_VIEWFORUM --> - {SITENAME}<!-- ENDIF --

></title>

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link 

rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" 

href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link 

rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" 

href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --

><link rel="alternate" type="application/atom+xml" title="{L_FEED} - 

{L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF 

S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" 

title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF 

-->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" 

type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" 

href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF 

S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" 

type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" 

href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and 

S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - 

{L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&t={S_TOPIC_ID}" 

/><!-- ENDIF -->
<!-- ENDIF -->

<!-- IF U_CANONICAL -->
	<link rel="canonical" 

href="{U_CANONICAL}" />
<!-- ENDIF -->

<!--
	phpBB style name: prosilver
	

Based on style:   prosilver (this is the default phpBB3 style)
	Original author:  

Tom Beddard ( http://www.subBlue.com/ )
	Modified by:
-->

<link 

href="{T_THEME_PATH}/print.css?assets_version={T_ASSETS_VERSION}" 

rel="stylesheet" type="text/css" media="print" title="printonly" />
<!-- IF 

S_ALLOW_CDN --><link href="//fonts.googleapis.com/css?family=Open

+Sans:600&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-

ext,greek,vietnamese" rel="stylesheet" type="text/css" media="screen, projection" 

/><!-- ENDIF -->
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" 

media="screen, projection" />
<link href="{T_STYLESHEET_LANG_LINK}" 

rel="stylesheet" type="text/css" media="screen, projection" />
<link 

href="{T_THEME_PATH}/responsive.css?assets_version={T_ASSETS_VERSION}" 

rel="stylesheet" type="text/css" media="only screen and (max-width: 700px), only 

screen and (max-device-width: 700px)" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
	

<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" 

rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

<!-- 

IF S_PLUPLOAD -->
	<link href="{T_THEME_PATH}/plupload.css?assets_version=

{T_ASSETS_VERSION}" rel="stylesheet" type="text/css" media="screen, projection" 

/>
<!-- ENDIF -->

<!--[if lte IE 9]>
	<link href="{T_THEME_PATH}/tweaks.css?

assets_version={T_ASSETS_VERSION}" rel="stylesheet" type="text/css" 

media="screen, projection" />
<![endif]-->

<!-- EVENT overall_header_head_append 

-->

{$STYLESHEETS}

<!-- EVENT overall_header_stylesheets_after -->

</head>
<body 

id="phpbb" class="nojs notouch section-{SCRIPT_NAME} {S_CONTENT_DIRECTION} 

{BODY_CLASS}">

<!-- EVENT overall_header_body_before -->

<div id="wrap">
	<a 

id="top" class="anchor" accesskey="t"></a>
	<div id="page-header">
		

<div class="headerbar">
			<div class="inner">

			

<div id="site-description">	<div style="height: 376x;">
				
				<p class="skiplink"><a href="#start_here">

{L_SKIP}</a></p>
			</div>			</div>

			

			</div>
		</div>

		<!-- INCLUDE 

navbar_header.html -->
	</div>

	<!-- EVENT overall_header_page_body_before -->

	

<a id="start_here" class="anchor"></a>
	<div id="page-body">
		<!-- IF 

S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
		<div 

id="information" class="rules">
			<div class="inner">
			

	<strong>{L_INFORMATION}{L_COLON}</strong> {L_BOARD_DISABLED}
			

</div>
		</div>
		<!-- ENDIF -->

		<!-- EVENT 

overall_header_content_before -->
Locked

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