MyBB Community Forums

Hi, may I know how to center my logo?

My forum: http://amazingforum.net

My current logo: (Without edit)


When I add:

.logo {
text-align: center;
}

It become like this:


The logo doesn't center enough.

EDIT: Sorry becuase the images are too big.

in your HTML, take the menu out of the logo div.

(2012-12-20, 08:09 AM)Leefish Wrote: [ -> ]in your HTML, take the menu out of the logo div.

How to do that?

(2012-12-20, 08:10 AM)Guardian1 Wrote: [ -> ]

(2012-12-20, 08:09 AM)Leefish Wrote: [ -> ]in your HTML, take the menu out of the logo div.

How to do that?

In Header Templates - header

(2012-12-20, 08:10 AM)avril Wrote: [ -> ]

(2012-12-20, 08:00 AM)Guardian1 Wrote: [ -> ](...) how to center my logo? When I add:

.logo {
text-align: center;
}(...)

(...)The logo doesn't center enough.

You may do it in many ways. Fiew examples below :
(you must replace X with distance from left edge in pixels) :

.logo {
    margin-left:    Xpx;
}

or

.logo {
    padding-left:    Xpx;
}

or even something like this where you will be able to move logo exacly where you want
wit X and Y values (use negative values to move left and up use positive values to move logo right and down)

.logo {
    position:    relative;
    top:          Xpx;
    left:          Ypx;
}

It moved the background and menu.

Quote:It moved the background and menu.

There was more things attached to .logo class. and it moved more than we wanted.
In this case we must add some class to logo image - this way we will refer exacly to logo image and nothing more :

In header templates - header you will see something like this :

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

We will, add class .logopic to image so we can refer to this image in our CSS,

class="logopic"

just before this

{$theme['logo']}

So our modified line will looks similar to this :

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

Then in your CSS add last line as :

.logo .logopic {
    position:    relative;
    left:          Xpx;
    top:          Ypx;
}

This way you can move your logo to any position with X and Y values.
(negative values move logo up and left, positive values will move logo down and right)