phpBB • Free and Open Source Forum Software

RSS Facebook Twitter
Menu

[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations
crag364
Registered User
Posts: 100
Joined: Thu Jul 26, 2007 1:24 pm

Re: [How To] Modify prosilver's header

Post by crag364 »

Hi all,

I was wondering if you can help me. I have made a custom header for my forum using split images and tables for the links. How is it possible to get this on my page?

I have followed the tutorials without success. But to add the main image to the page you are only pointing to one image but to make the banner its had to be split into three. You can see the banner here:

http://www.underwaterclipsource.net/uwcs-banner.html

If you could help me put this on I would higher appreciate it!

Thanks.
Top
User avatar
SirClive
Registered User
Posts: 18
Joined: Mon Dec 31, 2007 10:12 pm

Re: [How To] Modify prosilver's header

Post by SirClive »

Hi, I love this mod, it really has made my forum look much better (http://www.weekend-gamer.co.uk/forum) and means that every time I have a new show available I can change the banner to advertise it.

One addition I would love to see is to allow me to upload multiple images and for the board to randomly pick one.
Any chance that this is possible?
Top
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 »

seasalt dreams wrote:I followed all instructions to mod the header image, purged caches etc etc, and nothing. Board still appears the same. I only have prosilver installed.
Are you sure you refreshed the theme and template (ACP => Styles => Style Components => Theme/Template)?
crag364 wrote:Hi all,

I was wondering if you can help me. I have made a custom header for my forum using split images and tables for the links. How is it possible to get this on my page? ...
Replace the following with your code.

Code: Select all

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

		<!-- 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>
SirClive wrote:... One addition I would love to see is to allow me to upload multiple images and for the board to randomly pick one.
Any chance that this is possible?
Knowledge Base - Adding a Random Header Image.. you might have to modify a few things in order to get it to work with the header image instead of the logo. If you need any help, feel free to reply here. :)
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
Top
User avatar
SirClive
Registered User
Posts: 18
Joined: Mon Dec 31, 2007 10:12 pm

Re: [How To] Modify prosilver's header

Post by SirClive »

prototech wrote:
SirClive wrote:... One addition I would love to see is to allow me to upload multiple images and for the board to randomly pick one.
Any chance that this is possible?
Knowledge Base - Adding a Random Header Image.. you might have to modify a few things in order to get it to work with the header image instead of the logo. If you need any help, feel free to reply here. :)
I think I'll stick ith one then, I wouldn't know where to start :lol:
Top
crag364
Registered User
Posts: 100
Joined: Thu Jul 26, 2007 1:24 pm

Re: [How To] Modify prosilver's header

Post by crag364 »

Thanks for your speedy reply. After changing that code it kind of works except it needs some alterations. For some reason it gets messed up in the forum. (See screenshot below)

Image

The code I use is below:

Code: Select all

</head>

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

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="page-header">
	
	<table align="center" id="Table_01" width="875" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="3"><img id="uwcs_banner_01" src="http://www.underwaterclipsource.net/images/uwcs-banner_01.jpg" width="875" height="144" alt="" /></td>
	</tr>
	<tr>
		<td rowspan="6"><img id="uwcs_banner_02" src="http://www.underwaterclipsource.net/images/uwcs-banner_02.jpg" width="713" height="181" alt="" /></td>
		<td><a href="/"><img id="HOME" src="http://www.underwaterclipsource.net/images/HOME.jpg" width="130" height="30" border="0" alt="Home" /></a></td>
		<td rowspan="6"><img id="uwcs_banner_04" src="http://www.underwaterclipsource.net/images/uwcs-banner_04.jpg" width="32" height="181" alt="" /></td>
	</tr>
	<tr>
		<td><a href="/forum/"><img id="FORUM" src="http://www.underwaterclipsource.net/images/FORUM.jpg" width="130" height="30" border="0" alt="Forum" /></a></td>
	</tr>
	<tr>
		<td><a href="/filebox/"><img id="FILEBOX" src="http://www.underwaterclipsource.net/images/FILEBOX.jpg" width="130" height="29" border="0" alt="Filebox" /></a></td>
	</tr>
	<tr>
		<td><a href="/chat/"><img id="CHAT" src="http://www.underwaterclipsource.net/images/CHAT.jpg" width="130" height="30" border="0" alt="Chat" /></a></td>
	</tr>
	<tr>
		<td><a href="#"><img id="DONATE" src="http://www.underwaterclipsource.net/images/DONATE.jpg" width="130" height="30" border="0" alt="Donate" /></a></td>
	</tr>
	<tr>
		<td><img id="uwcs_banner_09" src="http://www.underwaterclipsource.net/images/uwcs-banner_09.jpg" width="130" height="32" alt="" /></td>
	</tr>
</table>
Any ideas what I have done wrong and how to stretch it along the whole of the page?

Once again many thanks.

Craig
Top
User avatar
SirClive
Registered User
Posts: 18
Joined: Mon Dec 31, 2007 10:12 pm

Re: [How To] Modify prosilver's header

Post by SirClive »

Hi me again. Just thought of another one that would be very good. You have posted code for making the header link back to the forum main page. How would I change that to allow me to set the url for where it links to so I link out fgrom the forum?
Top
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 »

crag364 wrote:Thanks for your speedy reply. After changing that code it kind of works except it needs some alterations. For some reason it gets messed up in the forum. (See screenshot below)
Try this.. open overall_header.html
Find:

Code: Select all

<table align="center" id="Table_01" width="875" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td colspan="3"><img id="uwcs_banner_01" src="http://www.underwaterclipsource.net/images/uwcs-banner_01.jpg" width="875" height="144" alt="" /></td>
   </tr>
   <tr>
      <td rowspan="6"><img id="uwcs_banner_02" src="http://www.underwaterclipsource.net/images/uwcs-banner_02.jpg" width="713" height="181" alt="" /></td>
      <td><a href="/"><img id="HOME" src="http://www.underwaterclipsource.net/images/HOME.jpg" width="130" height="30" border="0" alt="Home" /></a></td>
      <td rowspan="6"><img id="uwcs_banner_04" src="http://www.underwaterclipsource.net/images/uwcs-banner_04.jpg" width="32" height="181" alt="" /></td>
   </tr>
   <tr>
      <td><a href="/forum/"><img id="FORUM" src="http://www.underwaterclipsource.net/images/FORUM.jpg" width="130" height="30" border="0" alt="Forum" /></a></td>
   </tr>
   <tr>
      <td><a href="/filebox/"><img id="FILEBOX" src="http://www.underwaterclipsource.net/images/FILEBOX.jpg" width="130" height="29" border="0" alt="Filebox" /></a></td>
   </tr>
   <tr>
      <td><a href="/chat/"><img id="CHAT" src="http://www.underwaterclipsource.net/images/CHAT.jpg" width="130" height="30" border="0" alt="Chat" /></a></td>
   </tr>
   <tr>
      <td><a href="#"><img id="DONATE" src="http://www.underwaterclipsource.net/images/DONATE.jpg" width="130" height="30" border="0" alt="Donate" /></a></td>
   </tr>
   <tr>
      <td><img id="uwcs_banner_09" src="http://www.underwaterclipsource.net/images/uwcs-banner_09.jpg" width="130" height="32" alt="" /></td>
   </tr>
</table>
Replace with:

Code: Select all

<div class="header">
    <ul>
      <li><a class="header" href="/">Home</a></li>
      <li><a class="header" href="/forum/">Forum</a></li>
      <li><a class="header" href="/filebox/">Filebox</a></li>
      <li><a class="header" href="/chat/">Chat</a></li>
      <li><a class="header" href="#">Donate</a></li>
    </ul>
   </div>
Open colours.css and find:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}
After, add:

Code: Select all

div.header {
	background: url("{T_THEME_PATH}/images/uwcs-banner.jpg") no-repeat;
	width: 147px;
	height: 178px;
	padding: 130px 0 0 710px;
	margin: auto;
}

div.header ul {
  list-style-type: none;
}

a.header {
  width: 130px; 
  height: 30px;
  display: block;
  text-indent: -1000px;
}
Rename the following image to uwcs-banner.jpg and upload it to the styles/prosilver/theme/images/ directory.

http://img185.imageshack.us/img185/3310 ... nerby4.jpg
SirClive wrote:How would I change that to allow me to set the url for where it links to so I link out fgrom the forum?
Change href="{U_INDEX}" to something similar to href="http://www.yoursite.com/"
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
Top
crag364
Registered User
Posts: 100
Joined: Thu Jul 26, 2007 1:24 pm

Re: [How To] Modify prosilver's header

Post by crag364 »

Hi, Once again thanks for the speedy reply. Its getting there.

I now still have the blue header in the background. (It was blue but I added the white colour code which turned it grey) I suspect its to do with:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}
still being left in the code. To make this blank would I just have to make the bg_header.gif white in a photo editor or is there a easier way in doing this?

You can see what it looks like atm in the image below.

Image

Many thanks.
Top
guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: [How To] Modify prosilver's header

Post by guyskankrye »

How do you add a “Search” icon and link beside “FAQs”, “Members”, etc?
Top
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 »

crag364 wrote: I now still have the blue header in the background. (It was blue but I added the white colour code which turned it grey) I suspect its to do with: ...
In overall_header.html find

Code: Select all

<div class="headerbar">
Replace it with:

Code: Select all

<div>
That should fix it, if not then just remove the following code from colours.css

Code: Select all

.headerbar {
   background-color: #12A3EB;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
}
guyskankrye wrote:How do you add a “Search” icon and link beside “FAQs”, “Members”, etc?
Open overall_header.html and find:

Code: Select all

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
After, add:

Code: Select all

<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH --><li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH}">{L_SEARCH}</a></li><!-- ENDIF -->
Open buttons.css and find:

Code: Select all

.icon-faq,
After, add:

Code: Select all

 .icon-search,
Open colours.css and find:

Code: Select all

.icon-faq						{ background-image: url("{T_THEME_PATH}/images/icon_faq.gif"); }
After, add:

Code: Select all

.icon-search						{ background-image: url("{T_THEME_PATH}/images/icon_textbox_search.gif"); }
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
Top
guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: [How To] Modify prosilver's header

Post by guyskankrye »

I used some tips on how to get the search link where I like it but it distorted the spacing of the header and such. Could you help me get the spacing and curved edges back to the way they were? Thanx soooo much!!!

Here is a link to my board:
http://louisvillediscgolf.com/phpBB/
Top
Thatbitextra
Former Team Member
Posts: 7604
Joined: Mon Mar 21, 2005 5:04 am
Location: A place where something is or could be located; a site.

Re: [How To] Modify prosilver's header

Post by Thatbitextra »

In overall_header.html, change:

Code: Select all

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

Code: Select all

			<div style="height: 140px;">
				<div id="site-description">
					<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
				</div>
			</div>
Styles KB
My MODs: Choose Who to Accept PMs From (Prevents unwanted PMs!) | Warn of Old Topic Before Posting Reply
Style: subBlack (Now updated to phpBB 2.0.22 and 5 new color schemes!)
Top
guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: [How To] Modify prosilver's header

Post by guyskankrye »

Problem resolved...thanx so much!
Top
guyskankrye
Registered User
Posts: 74
Joined: Tue Nov 30, 2004 6:45 pm

Re: [How To] Modify prosilver's header

Post by guyskankrye »

prototech wrote:
SirClive wrote:... One addition I would love to see is to allow me to upload multiple images and for the board to randomly pick one.
Any chance that this is possible?
Knowledge Base - Adding a Random Header Image.. you might have to modify a few things in order to get it to work with the header image instead of the logo. If you need any help, feel free to reply here. :)
Any clue as to what would have to change. I've removed the logo and site discription so all I have is an image in the header. Would this Random Header mod work for that?
Top
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 »

I'll add a tutorial on that later on today. :)
Need help with MOD/style installations or other phpBB problems? Contact me for a quote.
Top

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