MyBB Community Forums

Full Version: Placing a square logo to the left of the header
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello,

Does anyone have any ideas about how to place a square logo to the left of the headers rather than above the headers? My community's logo is square and it would look strange to us to have it at the top because of all of the space it would waste.

To clarify my question, I've attached a mock-up screen shot that should make it pretty clear what we are trying to do.

Currently we are running MyBB 1.6.5, with a fresh install. No mods to the templates, etc.

Forest
Replace the header template with something like this:
<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
<div class="float_left">
			<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>
<div class="float_right">
			<div class="menu">
				<ul>
					<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
					<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
					<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
				</ul>
			</div>
			<hr class="hidden" />
			<div id="panel">
				{$welcomeblock}
			</div>
</div>
		</div>
		<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}
			<navigation>
			<br />
Wow, Alan, that's terrific! Open source software is the best.

Is there any chance of extending the float_left to include the title of the forum? (i.e. the next thing down.)
(2012-01-10, 03:38 AM)ForestForTrees Wrote: [ -> ]Wow, Alan, that's terrific! Open source software is the best.

Is there any chance of extending the float_left to include the title of the forum? (i.e. the next thing down.)

It looks like I'd maybe have to edit the index template and at least one other template, perhaps in the Forum Display group. Anything else?

Sorry to be a bit demanding, but the logo is so tall that it looks a bit off as is:
http://tmswiki.org/tms-forum/index.php

Thanks again for your help.
^ is "boogleyboogley" title for your forum ? at present logo at right side looks odd !
(2012-01-10, 05:14 AM)ranjani Wrote: [ -> ]^ is "boogleyboogley" title for your forum ? at present logo at right side looks odd !
Oops, sorry. "boogleyboogley" was just an artifact of my feeble attempt to fix it myself. It's a word I made up that I use for programming, much like many use "foo," but it's long enough that I can use it for global search and replaces without worrying about collateral damage. The title of the forum is "The TMS Wiki's TMS Forum."

It's all back to the current best version, now. Thanks for checking it out. Any thoughts?

The big question is which templates would I have to edit to put a closing </div> tag in that would come under the forum title?
That's the navigation bar, not just the forum title, if you go into a forum and/or thread you'll see what I mean. Anyway, you can do that by changing the header template again:

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
<div class="float_left">
            <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>
<div class="float_right">
            <div class="menu">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
                </ul>
            </div>
            <hr class="hidden" />
            <div id="panel">
                {$welcomeblock}
            </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            <navigation>
</div>
        </div>
            <br />
(2012-01-10, 12:01 PM)Alan Shepperson Wrote: [ -> ]... you can do that by changing the header template again:

        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            <navigation>
</div>
        </div>
            <br />
Thank you, that looks much better.

I'm trying to read the code so I can tweak it on my own. I know that curly braces indicate PHP variables that MyBB will replace. I supect that "<navigation>" also gets replaced, but am not sure why it uses angle brackets instead of curly braces. Can you suggest any references where I might be able to read up on this?

Forest
(2012-01-10, 12:01 PM)Alan Shepperson Wrote: [ -> ]That's the navigation bar, not just the forum title, if you go into a forum and/or thread you'll see what I mean. Anyway, you can do that by changing the header template again:

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
<div class="float_left">
            <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>
<div class="float_right">
            <div class="menu">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
                </ul>
            </div>
            <hr class="hidden" />
            <div id="panel">
                {$welcomeblock}
            </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            <navigation>
</div>
        </div>
            <br />

Ouch, I just discovered some fairly negative consequences from that code. Check out the attached screenshots from the New Thread screen.