HOW TO: Custom Header/Banner & Resize Forum Width

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
drewkawa
Registered User
Posts: 4
Joined: Mon Aug 13, 2007 5:38 pm

HOW TO: Custom Header/Banner & Resize Forum Width

Post by drewkawa » Mon Aug 13, 2007 5:46 pm

A lot of you seem to be asking the same questions I asked a few days ago, so instead of banging your head and making others bang their heads Im hoping this post answers some of your questions.

Below is my original question that was answered by Greenweaver and should help most of you with your questions.

Enjoy!

---------------------------------------------------------------------------------------------------------------------------------
Im sorry, it's been asked a 1,000 times, but for the life of me I can't find the answer. I've searched for over an hour and my eyes hurt as much as my head.

Questions that are bugging me
1. does the header image have to be a .gif (can it be a jpg, etc???)
2. if it can be a .jpg what other steps do I need to take in order for it to work?

I would like to change the header/banner (same thing right?) on the top of my site to an image that spans the width of the board. I found some tutorials that tell me to change certain things in certain files... but Ive lost the links and now I am stuck. Any help would be greatly appreciated.

Link: http://www.modboyz.com/phpBB3/index.php ... 7c4775fc05

Thank you very, very much,

Drew
Last edited by drewkawa on Thu Aug 16, 2007 4:11 pm, edited 2 times in total.

User avatar
Greenweaver
Former Team Member
Posts: 3913
Joined: Tue Jan 10, 2006 5:25 am
Location: In the rain
Contact:

Re: Header/Banner

Post by Greenweaver » Mon Aug 13, 2007 5:55 pm

It can be a jpg if you want, where is the image you want to use? How do you want it to look, any images you can show us to help us see what you are trying to do?
Image
Modage: Page Title Number MOD
Linkage: Find me at Styles Support & Discussion | Get a new style | Customise your style | phpBB userguide
Noteage:
Graphics requests to members over 20 posts and genuine phpbb requirements | I do not provide custom psd files

drewkawa
Registered User
Posts: 4
Joined: Mon Aug 13, 2007 5:38 pm

Re: Header/Banner

Post by drewkawa » Mon Aug 13, 2007 6:15 pm

The site is for a video game and Im searching for a banner/image that is dynamic, however as far as images go something like:
Image
*(.png file Would that work? If so how?)

For a rough idea of how Id like to change things I could use this forum as an example.

1. Forum size - I'd like the same width for the my forum style as phpbb's (which is narrower); mine is quite wide(havent searched for that tutorial yet, but Im sure there's info out there.)

2. Banner size/style - I like php's as well. (its centered and the the lenght/width is just right)


** if you need an actual image then I can hunt around for one, but in the mean time what steps do i need to start customizing?

Regards,

Drew

User avatar
Greenweaver
Former Team Member
Posts: 3913
Joined: Tue Jan 10, 2006 5:25 am
Location: In the rain
Contact:

Re: Header/Banner

Post by Greenweaver » Mon Aug 13, 2007 7:03 pm

Ok, see that makes much more sense already.

1) To change the width of your board, open up the file called "common.css", make sure it is the file which is in the style folder you wish to edit. Find this part of the code:

Code: Select all

 #wrap {
       padding: 0 20px;
       min-width: 650px;
    }
Change to something like this:

Code: Select all

    #wrap {
       padding: 0 20px;
       width: 850px;
       min-width: 650px;
       margin: 0 auto;
    }
2) If you want a banner like ours, then get the image the same size as your banner area which should be around 850px x 129px or whatever. Place the image inside you styles images folder. The "images" folder that is inside the "theme" folder. Upload the image to your web server ready for use.

Now we need to open up the file called "colours.css" and find this part of the code:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}
Change the background-image property to your new image which can be a jpg if you wish. So it would look something like this:

Code: Select all

.headerbar {
	background-color: #12A3EB;
	height: 129px;
	background-image: url("{T_THEME_PATH}/images/my_new_image.jpg");
	color: #FFFFFF;
}
Save and upload to your web server and that should be you.

One last thing you may want to do is is remove the corners from the bottom of yur header. Open up the file called "overall_header.html" and find this part of the code:

Code: Select all

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

			<span class="corners-bottom"><span></span></span></div>
		</div>
Change to this instead:

Code: Select all

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

			</div>
		</div>
Ok, I think I have covered it all for you.
Image
Modage: Page Title Number MOD
Linkage: Find me at Styles Support & Discussion | Get a new style | Customise your style | phpBB userguide
Noteage:
Graphics requests to members over 20 posts and genuine phpbb requirements | I do not provide custom psd files

drewkawa
Registered User
Posts: 4
Joined: Mon Aug 13, 2007 5:38 pm

Re: Header/Banner

Post by drewkawa » Mon Aug 13, 2007 10:10 pm

thank you very much for your time...

The resizing has been perfect and with some editing I have my image up, (but it is repeating and doesnt fit with my icon.)

Im going to bry and find a different icon and have my image centered with a black or dark blue background.)

Thank you again!

Drew

drewkawa
Registered User
Posts: 4
Joined: Mon Aug 13, 2007 5:38 pm

Re: Header/Banner

Post by drewkawa » Thu Aug 16, 2007 4:06 pm

* bump and request sticky...

it seems that this question is asked a lot and the time taken by Greenweaver in answering was very clear.
Tks again..


Drew

Willoughby_wx
Registered User
Posts: 105
Joined: Thu Jul 12, 2007 11:21 pm
Location: In another world
Contact:

Re: HOW TO: Custom Header/Banner & Resize Forum Width

Post by Willoughby_wx » Thu Aug 16, 2007 4:14 pm

/Adds to favourites

Thanks a lot Greenweaver!

User avatar
Greenweaver
Former Team Member
Posts: 3913
Joined: Tue Jan 10, 2006 5:25 am
Location: In the rain
Contact:

Re: HOW TO: Custom Header/Banner & Resize Forum Width

Post by Greenweaver » Thu Aug 16, 2007 4:21 pm

You are both welcome, I hope it worked out for you. Also, there are some black rounded corners here if you need them:

If you need a different colour, just ask.
Image
Modage: Page Title Number MOD
Linkage: Find me at Styles Support & Discussion | Get a new style | Customise your style | phpBB userguide
Noteage:
Graphics requests to members over 20 posts and genuine phpbb requirements | I do not provide custom psd files

Ryan_P
Registered User
Posts: 54
Joined: Fri Jul 14, 2006 4:14 am
Location: La Verne, Ca
Contact:

Re: HOW TO: Custom Header/Banner & Resize Forum Width

Post by Ryan_P » Fri Aug 17, 2007 1:00 am

I am having a problem with my image size. The image is 1200 px. x 125 px. When the board is stretched passed the 1200 px., the image is repeated when it needs to stretch along with the page. Is this not possible?

- Ryan

barinov
Registered User
Posts: 2
Joined: Fri Aug 17, 2007 2:05 pm

Re: HOW TO: Custom Header/Banner & Resize Forum Width

Post by barinov » Fri Aug 17, 2007 2:18 pm

Hi there!
I followed your awesome mini- tutorial GreenWeaver and I can´t get this work..

Here no problem..changed the width definitons.
common.css (located at /style/prosilver/theme)

Code: Select all

/* Main blocks
---------------------------------------- */
#wrap {
       padding: 0 20px;
       width: 850px;
       min-width: 650px;
       margin: 0 auto;
}
Then uploaded a named logo.jpg(located at /style/prosilver/theme/images).
The image is 850px by 129px

Modified colours.css(located at /style/prosilver/theme)

Code: Select all

/* Round cornered boxes and backgrounds
---------------------------------------- */

.headerbar {
   background-color: #12A3EB;
   height: 129px;
   background-image: url("Desktop/{T_THEME_PATH}/images/logo.jpg");
   color: #FFFFFF;
}
The forum as the formated width and the desired shape, but the image doesn't appears. It gets the color from colours.css I suppose..

heres the link:
http://briosovsc.247ihost.com/forum/

User avatar
Greenweaver
Former Team Member
Posts: 3913
Joined: Tue Jan 10, 2006 5:25 am
Location: In the rain
Contact:

Re: HOW TO: Custom Header/Banner & Resize Forum Width

Post by Greenweaver » Fri Aug 17, 2007 5:33 pm

On this code:

Code: Select all

.headerbar {
   background-color: #12A3EB;
   height: 129px;
   background-image: url("Desktop/{T_THEME_PATH}/images/logo.jpg");
   color: #FFFFFF;
}
How come your image path has the word "Desktop" in it? It should just be this:

Code: Select all

.headerbar {
   background-color: #12A3EB;
   height: 129px;
   background-image: url("{T_THEME_PATH}/images/logo.jpg");
   color: #FFFFFF;
}
That should fix it for you.
Image
Modage: Page Title Number MOD
Linkage: Find me at Styles Support & Discussion | Get a new style | Customise your style | phpBB userguide
Noteage:
Graphics requests to members over 20 posts and genuine phpbb requirements | I do not provide custom psd files

barinov
Registered User
Posts: 2
Joined: Fri Aug 17, 2007 2:05 pm

Re: HOW TO: Custom Header/Banner & Resize Forum Width

Post by barinov » Fri Aug 17, 2007 8:32 pm

Omg..
Many thx for that correction GreenWeaver!

I was working locally with all files..How could I not noticed :mrgreen: Now it works fine!
Thank you again for the quick feedback

User avatar
Greenweaver
Former Team Member
Posts: 3913
Joined: Tue Jan 10, 2006 5:25 am
Location: In the rain
Contact:

Re: HOW TO: Custom Header/Banner & Resize Forum Width

Post by Greenweaver » Fri Aug 17, 2007 11:38 pm

No problem, I am glad you got it working.
Image
Modage: Page Title Number MOD
Linkage: Find me at Styles Support & Discussion | Get a new style | Customise your style | phpBB userguide
Noteage:
Graphics requests to members over 20 posts and genuine phpbb requirements | I do not provide custom psd files

sotis
Registered User
Posts: 294
Joined: Tue Oct 17, 2006 4:56 pm
Location: Bulgaria
Contact:

Re: HOW TO: Custom Header/Banner & Resize Forum Width

Post by sotis » Sat Aug 18, 2007 9:31 pm

How can I have random header/banners displayed instead of one ?

User avatar
wmtipton
Registered User
Posts: 564
Joined: Thu Apr 26, 2007 8:16 pm
Contact:

Re: HOW TO: Custom Header/Banner & Resize Forum Width

Post by wmtipton » Sun Aug 19, 2007 12:07 am

Ok...so I followed the instructions and got my forum more narrow and the logo up...but how the heck do I get rid of the phpBB logo there?

Image
mysql database backup software - mysql Workbench

Locked

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