REGISTER or LOGIN to have the annoying ads removed.
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Header image
#1
Hi all,

I want to be able to change the header image just like on http://www.mybboard.net (the official MyBB site).

I don't know where to find the css class that holds the background component of this header.

I did search on the official forum and this one also. Google turned up no exact HowTo either.

Can you guys help me out? I especially hope for a reaction from jeremiah cause his black theme looks awsome.

Thanks guys.

Sebastiaan. Tongue
#2
By default, MyBB just uses a logo image rather than an actual banner. You'd have to edit the header template as well as add a CSS class or two.
#3
(Feb 18, 2010, 09:24 AM)euantor Wrote: By default, MyBB just uses a logo image rather than an actual banner. You'd have to edit the header template as well as add a CSS class or two.

Thanks euantor for your quick reply.

I have played around changing the MyBB logo. To take a little step further i want to change the background for the (header) area where the logo is placed.

A good example is the official MyBB website at: http://www.mybboard.net. You can see the logo and behind it is a nice picture of mountains.

I want to do the same thing to my (dutch) forum at: http://www.jijschrijft.nl.

I do know where to find the theme files in MyBB but what I can't find is the actual css file that holds the description or the settings if you will that need to be changed to change the background color white to a nice looking image that I have prepaired.

Also it might be very usefull if I can find a good tutorial of the MyBB theme system.

Thanks for your time.

Sebastiaan.
#4
Ok. I'll sort you out a quick guide that should sort things out for you =P
By default, the MyBB logo is positioned within the COntainer div. To add a banner, that's going to need to change.

First steps first. Go to "Templates and Styles" within the admin area. Select your theme that you wish to change the header of. Click "Add Stylesheet". Call it "custom.css", set it "Globally" and select "Write my own content". In the box that appears, add this code:

Code:
#topheader {
    width: 95%;
    background: #fff url(images/gfxpalace/misc/head_bg.png) no-repeat;
        background-position: center top;
    border: 0px solid #e4e4e4;
    color: #000000;
    margin: auto auto;
    padding: 20px;
    text-align: left; /* IE 5 fix */
}

(You can customise this however you wan, obviously).

Now, save that and go back to "STyles and Templates". Now to edit the template.

Click on Templates at the left and select the template set for your theme. Edit the template called "header".

Right at the top, add:

Code:
<div id="topheader">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
</div>

Now, find the next recurrence of
Code:
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
and delete it. Save and you should be done. it doesn't look great - but it's up to you to customise it exactly how you want =D I can help with that too if you wish.



NOTE: you may want to edit the logo image so it has a transparent background. Otherwise it will look not too good.
#5
Hey Euantor,

Many thanks man for your really good tutorial.

I followed it and it worked. http://www.jijschrijft.nl

Since i am more of an graphic designer than a coder your tutorial was very helpfull to me. Now i can do more graphics.

Furthermore I am thinking of designing a whole template. But i have to search fore some decent source files (psd).

The real problem the will be to convert the design to a working template. That will be over my head i guess.

Many thanks and thumbs up !

Sebastiaan Kop.
#6
No problem at all Smile I do design custom themes from time to time - so if you need some help, I'd be more than happy.


Possibly Related Threads...
Thread Author Replies Views Last Post
  [Ask]separate mybb forum to wordpress header? TaligsikDako 0 3,883 Sep 10, 2010, 09:32 PM
Last Post: TaligsikDako
  How To Add Extra Links To Your Header Kaleb 10 9,258 Sep 05, 2010, 11:17 AM
Last Post: Kaleb
Big Grin [Tutorial] How To Move Member List Search To The Header Kaleb 3 4,763 Aug 29, 2010, 03:31 PM
Last Post: Kaleb
  Need help with my header link itsmie 2 2,702 Dec 30, 2009, 09:58 PM
Last Post: Starnova
  vB header? theone759 1 2,311 Feb 14, 2009, 10:41 PM
Last Post: labrocca

Forum Jump:


Users browsing this thread: 1 Guest(s)