MyBB Community Forums

Full Version: [ASB / MyBB GoMobile] How to make header expand across entire width
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Don't think I didn't try before I come posting. I have tried all manner of DIV and span in the header template and can't get the header to 'listen' to what I say.

I'm not sure if it's because the sideboxes are being loaded after the header?

When the site is loading slightly slow, you can see header expand across the whole page, then the forum index and sideboxes load and the header gets 'shrunk down' to 2/3rds.

Any suggestions to keep the header across the width of the page?
Hi, I have a really busy week ahead of me but if you can wait till this evening, I'll try to check things out on MyBB GoMobile and ASB-- never done much testing with that.
That would be great man. It looks like what's happening is the index is loading after header (as it should) and then that forces header (which was already properly loaded) over to the side. It's not a big issue with only 1 sidebar, but with 2 it pushes it over. The only partial success I've had is making header width 200% or making it a fixed width, but then of course that causes other issues worse than the initial problem.

Off-topic, but I've done a bit of work with CSS and getting MyAlerts pop-up proper on GoMobile. With default GoMobile CSS, the alerts are unreadable due to several issues - text colors, using default #panel a: block background which covers up the lines above/below when hovering over links, and box pop up location. I'll post my changes later. I'm sure someone will be able to improve upon it, but they are 1000% better than the default.
Still haven't gotten a chance to take a look at GoMobile but I haven't forgotten.
this is driving me out of my mind. i've lost about 8 hours of my life to experimenting with all manner of <div> <span> position, display styles... I have gotten nowhere.

Any CSS experts can figure this out, please let me know. The issue is that the sideboxes load after header and so header and footer end up squashed to the left.
Sorry I never got back with you. I have been extremely busy.
Don't worry about it man. Whenever you have time. Someone who has some in depth knowledge of CSS may be able to figure it out as well.
The problem is in html markup (table tags and their behaviour). Table cells have some odd behaviour when you try to wrap them (on low width values they won't 100% squeeze like the rest of the content). Only solution is to replace table tag(s) with div.

ACP -> template and styles -> templates -> gomobile -> advnaced sidebox template -> asb_begin

AND replace everything with:

<div class="asb_content_wrapper">

<div class="asb_left_sidebar">{$left_content} <!-- start: ASB middle column (page contents of {$filename}) -->
		
</div>


<div class="asb_content">


and save it


Open asb_end and replace everything with

</div>

</div>

<div class="asb_right_sidebar">{$right_content}</div>

<br class="clear" />

		<!-- end: ASB middle column (page contents of {$filename}) -->

Themes -> gomobile -> global.css -> advanced edit and paste

.asb_left_sidebar {float:left;width:160px;}
.asb_right_sidebar {float:right;width:160px;}
.asb_content_wrapper {width:100%;margin-right:-166px;float:left;}
.asb_content {margin:0 166px;}

And if your boxes are squeezed use media query to fix it (with screen resolution of 360px max):


@media screen and (max-width: 360px){ 
.asb_right_sidebar, .asb_left_sidebar {float:none;width:100%;margin-bottom:8px;}
.asb_content_wrapper {float:none;margin:0;}
.asb_content {margin:0;}
}