MyBB Community Forums

*** If a non-pornographic LGBT forum offends you, consider this your notice to leave ***

*** Forum will be upgraded to 1.6.1 once I have a handle on the existing issues ***

I recently upgraded this forum from 1.4.11 to 1.6.0. Prior to the upgrade, I knew that the theme I was using has not been upgraded to 1.6, so I expected some template issues.

I reverted all the updated templates to 1.6-spec, making changes along the way as the "Diff Reports" suggested. Yet I am having issues with the header.

Can anyone tell me what CSS-inserts I need to add in order to bring the forum header back to its original look?

Here is the original look in MyBB 1.4:



This is what I see in MyBB 1.6, after all the templates were reverted:



I first decided to tackle the white background color and try to change it back to the original. Through Firebug, I discovered the correct CSS ID is .logo.

Yet when I add:

background: #29373B !important;

or

background-color: #29373B !important;

The correct color only appears in Google Chrome and no other browser. This is after I have cleared my cache. Should I be using different CSS or are you able to see the correct color from your browser?

2) What is the correct CSS to extend the "Welcome Bar" across the width of the entire screen?

3) What is the correct CSS to extend the bars with "Search, Member List, User CP, Admin CP, etc." to the full width of #container?

I appreciate any help!

P.S. This is my current header template code:

<div id="container">
		<a name="top" id="top"></a>
			<hr class="hidden" />
			<div id="panel">
				{$welcomeblock}
			</div>
		</div>
		<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}
			<navigation>
			<br />

Try to put:

background: #29373B;

Does that work or not?

(2010-12-21, 08:50 AM)The Elite Wrote: [ -> ]Try to put:

background: #29373B;

Does that work or not?

Same issue, with or without the "important".

1. Put the background css under #panel and #container if thats the look you want:
background: #29373B;

2. Add position: absolute; and left:0; for topbar class. You'll then have to move the logo down by adding padding-top: 20px to logo class

3. For this to be done correctly you have to correct some errors in your theme. ids should be unique to a page and I see you're using panel id in multiple places, this will cause it to show up incorrectly. Fixing that will enable you to put this block in its own div which you can make as wide as the container by using width:100%

G33K, your help is much appreciated! Your Fit On Page plugin is fantastic too.

Issues 1 and 2 were perfectly solved.

Regarding issue 3, I may need some more information to solve.

As DougSD wrote the theme, not myself, I am not knowledgeable on where panel id is being inserted and where it is appropriate. Should I go through all the header templates looking for/changing something? If this is too large of a job I can live with the bar as it is now, but if I can teach myself and give this a try then I will do that.

---

New issue, which I will refer to as #4.

If you look at the screenshot below, you will see problems with the register text in the welcome bar (missing end parenthesis and space) and other bar (extraneous register link).

Which templates do I need to investigate? What changes would you recommend?

For #3 you need to move the welcomebar-top and welcomebar-bottom to below the logo div and then remove the container header and panel divs that the welcome bars were in. You can post the header templates here or in PM if you don't get which ones to remove.

#4 they should all be in the header templates

Thanks for the help!

I tried looking this over the last few days, but I honestly do not know what I'm doing. I hate to have to ask someone to make the edits for me, but I really do appreciate the help.

Here are the header templates:

header:

http://snipt.org/tomog/

header_welcomeblock_guest:

http://snipt.org/ugKp/

header_welcomeblock_member:

http://pastie.org/1403000

header_welcomeblock_member_admin:

http://pastie.org/1403002

header_welcomeblock_member_moderator:

http://pastie.org/1403005

Try this for the header_welcomeblock_guest

<div class="topbar">
		<div class="inside">
			<script type="text/javascript">
			<!--
				lang.username = "{$lang->login_username}";
				lang.password = "{$lang->login_password}";
				lang.login = "{$lang->login}";
				lang.lost_password = "<a href=\"{$mybb->settings['bburl']}/member.php?action=lostpw\">{$lang->lost_password}<\/a> ";
				lang.register_url = " &mdash; <a href=\"{$mybb->settings['bburl']}/member.php?action=register\">{$lang->welcome_register}<\/a>";
				lang.remember_me = "{$lang->remember_me}";
			// -->
			</script>
			<div class="info">{$lang->welcome_guest}
				<span id="quick_login">{$lang->welcome_guest} (<a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="MyBB.quickLogin(); return false;">{$lang->welcome_login}</a> &mdash; 
				<a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>)</span>
				<span style="float: right;"> {$lang->welcome_current_time}</span>
			</div>
		</div>
		</div>

		<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 class="welcomebar">
			<div class="welcomebar-top">
				<span class="menu"><li><a href="http://gaycarfans.com"><img src="http://gaycarfans.com/wp-content/uploads/2010/05/homegrau.png" alt="" title="" />Main Site</a></li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/search.png" alt="" title="" />{$lang->toplinks_search}</a> <a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/memberlist.png" alt="" title="" />{$lang->toplinks_memberlist}</a> <a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/calendar.png" alt="" title="" />{$lang->toplinks_calendar}</a> <a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/help.png" alt="" title="" />{$lang->toplinks_help}</a></span>		
			</div>
			<div class="welcomebar-bottom">
				<span style="margin-right:20px;">
				<a href="#quick_login" onclick="MyBB.quickLogin(); return false;"><img src="{$theme['imgdir']}/icons/login.png" alt="" /> {$lang->welcome_login}</a><a href="{$mybb->settings['bburl']}/member.php?action=register"><img src="{$theme['imgdir']}/icons/register.png" alt="" /> {$lang->welcome_register}</a></span>				
				<a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a><a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a>
			</div>
		</div>

If it works use a similar layout for the header_welcomeblock_member, just substitute it with the member specific elements.

Also, to make the welcomebar full width now, just add this to the css:
.welcomebar {
width: 100%;
}

Thank you so much for your time!

That code worked perfectly to resolve the registration text issues, but it also removed the main forum container for some reason. Do you know how to add the div#container back in? Until you're able to take a look, I've reverted the live forum back to the old code for now.

Screenshot of site without div#container:



I also tried:

.welcomebar {
width: 100%;
}

And that resulted in no change, with or without an !important. So I then tried adding width:100% to welcomebar-top, welcomebar-bottom, etc. and that did result in increased width, but not enough to span across the entire div#container as it was before the forum upgrade. Additionally, the width was only added to the right side, not the left.

Would anyone else mind trying to fix the code?