Page 4 of 136

Re: [How To] Modify prosilver's header

Posted: Mon Dec 31, 2007 1:35 pm
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.

Re: [How To] Modify prosilver's header

Posted: Mon Dec 31, 2007 10:15 pm
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?

Re: [How To] Modify prosilver's header

Posted: Mon Dec 31, 2007 11:24 pm
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. :)

Re: [How To] Modify prosilver's header

Posted: Tue Jan 01, 2008 12:06 am
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:

Re: [How To] Modify prosilver's header

Posted: Tue Jan 01, 2008 4:15 am
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

Re: [How To] Modify prosilver's header

Posted: Tue Jan 01, 2008 9:34 am
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?

Re: [How To] Modify prosilver's header

Posted: Thu Jan 03, 2008 5:59 am
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/"

Re: [How To] Modify prosilver's header

Posted: Thu Jan 03, 2008 2:49 pm
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.

Re: [How To] Modify prosilver's header

Posted: Thu Jan 03, 2008 3:46 pm
by guyskankrye
How do you add a “Search” icon and link beside “FAQs”, “Members”, etc?

Re: [How To] Modify prosilver's header

Posted: Fri Jan 04, 2008 1:10 am
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"); }

Re: [How To] Modify prosilver's header

Posted: Fri Jan 04, 2008 3:21 am
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/

Re: [How To] Modify prosilver's header

Posted: Fri Jan 04, 2008 3:27 am
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>

Re: [How To] Modify prosilver's header

Posted: Fri Jan 04, 2008 3:32 am
by guyskankrye
Problem resolved...thanx so much!

Re: [How To] Modify prosilver's header

Posted: Fri Jan 04, 2008 1:27 pm
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?

Re: [How To] Modify prosilver's header

Posted: Fri Jan 04, 2008 1:49 pm
by prototech
I'll add a tutorial on that later on today. :)