MyBB Community Forums

I am wanting to center my logo and main links on my website:
www.ultimategamingforums.co.uk

How can I do this?

you can do the logo by
ACP > templates and style > templates > your theme templates > options > expand > header templates > options > expand > header > options > edit > add code1 to the logo line
code 1 :

Quote:<center> </center>

regards,

Explain more as this isn't working.

here is my code in header template:

<div id="navhead">
<p class="rightp">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="small"></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></p>
</div>
<div id="header">
<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 id="panel" style="float:right;">
{$welcomeblock}
</div></div>
<div class="menu">
<ul><div class="menu_center">
<li><a href="{$mybb->settings['bburl']}"><img class="icons" src="images/excite/house.png" alt="house" />Home</a></li>

<li><a href="{$mybb->settings['bburl']}/search.php"><img class="icons" src="images/excite/search.png" alt="search" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img class="icons" src="images/excite/members.png" alt="members" />Members</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img class="icons" src="images/excite/help.png" alt="help" />{$lang->toplinks_help}</a></li>
</ul>
</div>

<div id="container">
<a name="top" id="top"></a>



<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>


{myshoutbox_abcd}

change it to this

<div id="navhead">
<p class="rightp">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="small"></g:plusone>
<!-- Place this tag after the last plusone tag -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></p>
</div>
<div id="header">
<center>
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
</center>
<div id="panel" style="float:right;">
{$welcomeblock}
</div></div>
<div class="menu">
<ul><div class="menu_center">
<li><a href="{$mybb->settings['bburl']}"><img class="icons" src="images/excite/house.png" alt="house" />Home</a></li>

<li><a href="{$mybb->settings['bburl']}/search.php"><img class="icons" src="images/excite/search.png" alt="search" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img class="icons" src="images/excite/members.png" alt="members" />Members</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img class="icons" src="images/excite/help.png" alt="help" />{$lang->toplinks_help}</a></li>
</ul>
</div>

<div id="container">
<a name="top" id="top"></a>



<hr class="hidden" />
<br class="clear" />
<div id="content">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
<navigation>


{myshoutbox_abcd} 

problem solved ?

No has no worked.

You may just add / update your "logo" class by adding this to your global.css:

.logo
{
margin-left:auto;
margin-right:auto;
}

yeah that worked!, cool guy

---

How can I center my main links such as 'Home, Search ect..

If its not inline with your logo then update the menu class in same way.

If it is inline just use a <br /> before <div class="menu"> and do the CSS modification.

Can you do the code for me on here?

Find this:

</div></div>
<div class="menu">

Replace with:

</div></div>
<br /><div class="menu">

Go to global.css

Find:

.menu {

Change it to:

.menu {
margin-left:auto;
margin-right:auto;