MyBB Community Forums

site is here, but it's super WIP.

hi, just started working with mybb. i'm trying to "convert" my old jcink theme (here, though it's totally unpolished & doesn't work nice w/ atypical resolutions bc i switched to mybb before completing) but having a really hard time getting my board wrappers to work. in my code, there are 3 main wrappers-- the "hardwayborder", which is a translucent border-made-div, the wrapper, which contains the header as a background image (so i can minimize the amount of elements i have on ever page, and so that i can set its height to a percentage so no users have to scroll for a long time to see the actual forum), and the cwrapper, for the board content. i have not yet included the sidebar that's present in the original theme, since i just want to get the wrappers working first.

i cannot for the life of me, however, get my wrapper to use padding, margins, heights, et cetera to make the header image actually show. from my experience i can only assume this is because some other code in some random area is overriding it, but i just cannot figure it out. it is extremely frustrating.

1st question--how do i achieve the look of my wrappers in the jcink theme in mybb's codes & templates, etc? here's my present (edited) css, & my header code, creating this monstrosity. you will notice my html is not very organized; this is because i have deleted and re-written it at least a dozen times to try and identify the issue.

CSS:

/* 
---------------------------
      body & wrappers
--------------------------- */

BODY { 
	font-family: Verdana, Tahoma, Arial, sans-serif; 
	font-size: 12px; 
	color: #000; margin:20px 0px;
	padding:0px;
	background-color:#CCC; 
	text-align:justify;
	background-image:url('https://files.jcink.net/uploads/doremi/youth_is_fleeting/background.jpg');
	background-size:100%;
	background-color:#1a1f1e;
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center;
}

/* Board Width */


#hardwayborder {
	background-color:rgba(255,255,255, 0.5);
	padding:15px;
	border-radius:5px;
	margin:auto;
	max-width:1200px;
}

#wrapper {
	background-image:url('{$theme['logo']}');
	padding:10px;
	padding-top:500px;
	max-width:1200px;
	margin:auto;
	border-radius:5px;
	background-repeat:no-repeat;
}

#cwrapper { 
	padding:10px;
	background-color:rgba(255,255,255, 0.8);
	text-align:left;
	max-width:950px;
	border-radius:5px;
	margin-top:500px;
}

#sidebar {
	padding:10px;
	width:180px;
	float:right;
	background-color:rgba(255,255,255, 0.8);
	border-radius:5px;
	height:100%
}

HEADER:

<div id="hardwayborder">
	<div id="wrapper">
		<a name="top" id="top"></a>
		<div id="header">
							<div id="cwrapper">
				<div class="wrapper">
					<ul class="menu top_links">
						{$menu_portal}
						{$menu_search}
						{$menu_memberlist}
						{$menu_calendar}
						<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
					</ul>
			<div id="panel">
				<div class="upper">
					<div class="wrapper">
						{$quicksearch}
						{$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
			</div>
		</div>
		<div id="content">
			<div class="wrapper">
				{$pm_notice}
				{$remote_avatar_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
				<navigation>
				<br />

thanks for any help--if i need to provide more info/code i can.

Not sure if this is your problem, but ID (#) overrides class, you have quite a few of both. You have margin set to auto in one #, and then you're trying to float with a class.

I just did a quick search and came up with this - maybe it helps you to understand:

https://css-tricks.com/the-difference-be...and-class/

the problem with that is, i only use ID's for the elements i'm having a problem with; sorry if including the table classes was confusing, they aren't used on that page. i also haven't added the sidebar at all, and all 3 of my wrappers don't use float.

in the past i have tried deleting everything in the header section (and the welcomeblocks--everything that isn't my 3 divs is there on the default and some of the classes aren't even in global.css it seems) just to see if *only* having my own wrappers would fix the problem (literally just the three divs and that's it) but it doesn't seem to change the fact that i cannot add margin-top to my cwrapper, nor can i add top padding (or height) to my wrapper itself to make the header image view able (and it seems to be crushed behind the boards, somehow)

what definition do you have for #header ?

you definitely have a conflict there - the logo is in the #wrapper definition where you have margin set to auto, i would try to set margin on this id rather than cwrapper.

not sure what you mean by a definition--do you mean the template set? there isn't actually a #header element in the css code, only this, and my divs aren't contained in lists:

#header ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#header ul.menu li {
	margin: 0 7px;
	display: inline;
}

#header ul.menu li a {
	padding-left: 20px;
	background-image: url(images/headerlinks_sprite.png);
	background-repeat: no-repeat;
	display: inline-block;
	line-height: 16px;
}

... and even if i set padding-top:500px (or use margin, or add it to the cwrapper) to !important as i would normally do to determine if it was being overwritten, it doesn't seem to change anything, even though i can delete items in the header template as i please and they will disappear. that's probably worth mentioning.

thanks for the support, also, i'm super stuck on this.

The variable you put down in the CSS won't work there:

#wrapper {
    background-image:url('{$theme['logo']}');
    padding:10px;
    padding-top:500px;
    max-width:1200px;
    margin:auto;
    border-radius:5px;
    background-repeat:no-repeat;
}

well, it has been working (surprisingly) but i did just replace it with the direct path to the image.

it seems like, for some reason, mybb has been using a cached version of global.css and it's got all kinds of inane stuff in there from the very first time i threw it in the code. i have tried rebuilding the cache and just flat out deleting the cache files twice now and it still seems to somehow bring up deprecated code in inspect element & view page source on chrome. the crazy codes are consistent with this... what can i do?

post a link to the site, then we can see better.

sorry for the wait, i had to leave the house.

i posted the site in the first post; it's here.

the validator shows that you have missing closing </div> tag(s)

https://validator.w3.org/check?uri=https...ne&group=0

where do you want to have margin again?