[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
Locked
gmenge
Registered User
Posts: 1
Joined: Wed Oct 29, 2008 4:06 pm

Re: [How To] Modify prosilver's header

Post by gmenge »

modifying header for random images
Hi,
I am trying to get random images to display on my header but this topic is for prosilver and I am using fisublack2 theme based on subsilver2 and there is no colours.css so I can't seem to figure out how to get this to work on my site.
Does anyone here have any ideas?
Here is the site: http://grandshelters.com/phpBB3/index.php
Thanks,
crag364
Registered User
Posts: 84
Joined: Thu Jul 26, 2007 1:24 pm

Re: [How To] Modify prosilver's header

Post by crag364 »

Hi,

What code would I need to change to make the clickable links in another place as I am looking at changing my header.

Thanks,

Craig
prototech wrote:
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/"
User avatar
naijand
Registered User
Posts: 52
Joined: Sun Nov 02, 2008 6:28 pm
Contact:

Re: [How To] Modify prosilver's header

Post by naijand »

I'd be glad if someone can help me please:

My site is HERE

I have noticed that:
  • There's no space - top and bottom of of navbar
    The header bar is wider than the navbar (i've reduced width to 85 from 90 px but its still wider than the navbar)
    Top rounded corner show funny white sign
Will be glad if someone can have a look and help

Thanks in advance
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: [How To] Modify prosilver's header

Post by Raimon »

@naijand sorry, no support for you, you have removed the Powered by phpBB copyright on your footer, see also rule4j and rule4k.
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!
User avatar
naijand
Registered User
Posts: 52
Joined: Sun Nov 02, 2008 6:28 pm
Contact:

Re: [How To] Modify prosilver's header

Post by naijand »

naijand wrote:I'd be glad if someone can help me please:

My site is HERE

I have noticed that:
  • There's no space - top and bottom of of navbar
    The header bar is wider than the navbar (i've reduced width to 85 from 90 px but its still wider than the navbar)
    Top rounded corner show funny white sign
Will be glad if someone can have a look and help

Thanks in advance
Sorry about the footer, partner messed up the code up after trying to ammend it, I've restored it now. Thanks and looking forward to seeing some answers to above quoted support question.
User avatar
RGR A_No
Registered User
Posts: 16
Joined: Sat May 31, 2008 12:26 am
Location: Lisbon, Maine
Contact:

Re: [How To] Modify prosilver's header

Post by RGR A_No »

I got the tick

I’m working on the add a custom Header Image and I did the step by step. Here is what I did.

Open styles/prosilver/theme/common.css now looks like this:

Code: Select all

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
	height: 150px;
My header size is 1000X150


styles/prosilver/theme/colours.css now has my image name in it.

Code: Select all

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

Code: Select all

<div style="height: 140px;">
<div id="site-description">
10 less that my image

And I added the </div> so it looks like this

Code: Select all

					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->
            </div>
I think I got it all but as you can see I have a tick in my header.

http://node01.tmdhosting210.com/~thrgrrgt/Forum/
Any help would be great.

Thanks
User avatar
RGR A_No
Registered User
Posts: 16
Joined: Sat May 31, 2008 12:26 am
Location: Lisbon, Maine
Contact:

Re: [How To] Modify prosilver's header

Post by RGR A_No »

I got the header!

Looking to change some other stuff. Great forum!
acoyauh
Registered User
Posts: 10
Joined: Thu Oct 23, 2008 9:10 pm

Re: [How To] Modify prosilver's header

Post by acoyauh »

K, I've been trying to change the logo and header size of my PHPBB3 prosilver. First one is easy, but...

Followed the tutorial here and have several problems:

Changed the header backgound image to

background-image: url("{T_THEME_PATH}/images/ik_logosm.jpg");

But the old one (an external image) keeps showing instead of the right one. Yes, I refreshed style and template in the ACP, n+2 times in the past two days to no avail...

The header's size does not change even when entering the code indicated, (reviewed it again with the above post, it's ok...) the logo just overflows the unchanged header, it also somehow provoked the searchbox to float off where it shouldn't:

Image

And the more I try to widen the header the more it floats, while the header's height stays the same...

Image

my /styles/prosilver/template/overall_header.html:
<div style="height: 140px;">
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}

...

title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
</div>
My common.css:
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
height: 150px;
}
My colours.css:
.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/ik_logosm.jpg");
color: #FFFFFF;
}

See anything wrong? Site at http://www.warlords-lor.org/index.php if you want to check it...
User avatar
hewmac06
Former Team Member
Posts: 823
Joined: Sat Apr 08, 2006 12:04 pm
Location: Bellarine Peninsula, Australia
Name: Hugh
Contact:

Re: [How To] Modify prosilver's header

Post by hewmac06 »

You haven't got rid of the "Change font size" icon. That should bring your search box back to where it should be. See first post.
acoyauh
Registered User
Posts: 10
Joined: Thu Oct 23, 2008 9:10 pm

Re: [How To] Modify prosilver's header

Post by acoyauh »

Thank you for responding, hewmac06

I removed it but the searchbox is still off.

And what about the header size? Why isn't it working for me? I've been re-doing this over and over for 2 days and always end up the same...

* Update: Turns out my host has a cache that made the changes display not show till later. Thanks for the help!
Last edited by acoyauh on Fri Nov 07, 2008 2:35 pm, edited 1 time in total.
User avatar
naijand
Registered User
Posts: 52
Joined: Sun Nov 02, 2008 6:28 pm
Contact:

Re: [How To] Modify prosilver's header

Post by naijand »

naijand wrote:I'd be glad if someone can help me please:

My site is HERE

I have noticed that:
  • There's no space - top and bottom of of navbar
    The header bar is wider than the navbar (i've reduced width to 85 from 90 px but its still wider than the navbar)
    Top rounded corner show funny white sign
Will be glad if someone can have a look and help

Thanks in advance
Can someone please help this poor lady please. Thanks in anticipation.
heywho
Registered User
Posts: 5
Joined: Fri Nov 07, 2008 5:03 am

Re: [How To] Modify prosilver's header

Post by heywho »

Hi

I'm a complete noob, with bad eyes, no programming background and ADD..... and I've been through this tutorial at least 8 times, and still cannot figure out how to get the bottom-corners to position correctly at the bottom of the logo image

I THINK I've tried everything suggested, in the order suggested at least 20 times in the last 2 days, and this is the best I've got so far..... It's a great tutorial, and lot's to learn..... but just getting my feet wet is almosyt over my head.....

it seems like it should be simple, but when I change the size of the image in the overall-header.html everything gets wonky..... plus..... I removed the logo, description and search box.... so I am having a hard time figuring out where to close the last </div>

I'd be happy for now just to get those corners where they belong..... happy to email/pm the needed files if helpful..... but right now..... I'm probably 18 hours into it.... and lost

site is at http://astro-brasil.com/phpBB3/index.php

Thanks......
User avatar
TheIlluminative
Former Team Member
Posts: 2451
Joined: Thu Jun 26, 2003 11:34 pm
Location: Egypt
Name: Mahmoud
Contact:

Re: [How To] Modify prosilver's header

Post by TheIlluminative »

heywho, you could try the following, open file: styles/Swanky_1.5_Left_Profiles/template/overall_header.html, find:

Code: Select all

		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>

		
    		<span class="corners-bottom"><span></span></span></div>
		</div>
replace with:

Code: Select all

		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
		<div style="height: 191px;">
        			<div id="site-description">
        				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
        			</div>
		</div>
    		<span class="corners-bottom"><span></span></span></div>
		</div>
naijand, try this, open file: styles/prosilver_se/template/overall_header.html, find:

Code: Select all

        		<div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
                <div style="height: 90px;">
        			<div id="site-description">
        				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
        			</div>  
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
replace with:

Code: Select all

        		<div class="headerbar">
        			<div class="inner"><span class="corners-top"><span></span></span>
                <div style="height: 90px;">
        			<div id="site-description">
        				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
        			</div></div>
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
heywho
Registered User
Posts: 5
Joined: Fri Nov 07, 2008 5:03 am

Re: [How To] Modify prosilver's header

Post by heywho »

[quote="TheIlluminative"]heywho, you could try the following, open file: styles/Swanky_1.5_Left_Profiles/template/overall_header.html, find:
]
replace with:

Code: Select all

		<div class="headerbar">
			<div class="inner"><span class="corners-top"><span></span></span>
		<div style="height: 191px;">
        			<div id="site-description">
        				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
        			</div>
		</div>
    		<span class="corners-bottom"><span></span></span></div>
		</div>
This worked halfway....

it got the corners down to the bottom, but now all four of the corners are a few pixels off the inside edges

And thanks Illuminative for the help and the quick response.... If it helps, the current logo image is 900px wide ---edit--- I shrunk the image by 10PX, and did a full refresh... still has the corners floating

http://astro-brasil.com/phpBB3/index.php
Last edited by heywho on Fri Nov 07, 2008 9:20 am, edited 1 time in total.
User avatar
TheIlluminative
Former Team Member
Posts: 2451
Joined: Thu Jun 26, 2003 11:34 pm
Location: Egypt
Name: Mahmoud
Contact:

Re: [How To] Modify prosilver's header

Post by TheIlluminative »

After reviewing your site, I saw you got this doubled:

Code: Select all

		<div class="headerbar">
          <div class="headerbar">
remove one of them.
Locked

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