MyBB Community Forums

Hi, I have rewritten or actually attempted to rewrite the default postbit classic template tableless and now when I thought I did a good job I just noticed two issues.

First off, here is my tableless template code:

{$ignore_bit}
<div class="postbody" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
	<div class="postbodyInner">
		<div class="postSidebar">
					<div class="postAuthor">
								<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
								<p class="userName" style="margin-top:0; font-size:11px">
									{$post['onlinestatus']}{$post['profilelink']}
								</p>
								<p class="userTitle" style="margin:0">
									<span class="smalltext">{$post['usertitle']}</span>
								</p>
								<p class="userrank" style="margin:0">
									{$post['userstars']}
									{$post['groupimage']}
								</p>
								<p class="useravatar" style="margin:0">
									{$post['useravatar']}
								</p>
								<ul class="userdetails">
									{$post['user_details']}
									{$post['iplogged']}
								</ul>
					</div>
		</div>
		<div class="postContent">
					<div class="postContentInner">
								<div class="postHeader">
									{$post['posturl']} <img src="/images/icons/postdate.gif"> {$post['postdate']} - {$post['posttime']}
								</div>
								<div class="messageBody">
									<div id="pid_{$post['pid']}">
										{$post['message']}
										{$post['editedmsg']}
									</div>
								</div>
								<div class="attachments">
										{$post['attachments']}
								</div>
								<div class="signature">
										{$post['signature']}
								</div>
								<div class="messageFooter">
										<div class="buttonContainer">
											<ul id="postButtons">
												{$post['button_rep']}
												{$post['button_edit']}
												{$post['button_quickdelete']}
												{$post['button_quote']}
												{$post['button_multiquote']}
												{$post['button_report']}
												{$post['button_warn']}
												{$post['button_reply_pm']}
												{$post['button_replyall_pm']}
												{$post['button_forward_pm']}
												{$post['button_delete_pm']}
											</ul>
										</div>
								</div><div class="clear"></div>
					</div>
		</div>
	</div>
</div>

Issue 1: Javascript (inline-moderation) related

Normally if you check the little checkbox in thread view (Moderators, Administrators only) the main content section gets wrapped up in an orange like color. This way you know visually if a post is checked or not.

With my tableless template no wrapping in a different color happens. I figured it has something to do with javascript referring to table tags, but since I have no tables anymore, no wrapping happens.

There are several lines of code in the inline_moderation.js file that seems to be responsible for the wrapping of tables, for instance:

		if(element.checked == true)
		{
			inlineModeration.inlineCount++;
			newIds[newIds.length] = id;
			var tr = element.up('tr');
			if(tr)
			{
				tr.addClassName('trow_selected');
			}
		}
		else
		{
			inlineModeration.inlineCount--;
			var tr = element.up('tr');
			if(tr)
			{
				tr.removeClassName('trow_selected');
			}

			if(inlineCookie.indexOf("ALL") != -1)
			{
				// We've already selected all threads, add this to our "no-go" cookie
				remIds[remIds.length] = id;
			}
		}

I tried to modify the code with my limited to non-existend javascript knowledge, as expectd I failed.

Now I have to rely on someone else fixing this for me. All I want is that <div class="postbodyInner"> <div class="postbody" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> gets wrapped up by a color if the checkbox for inline-moderation is checked.

Issue 2: HTML/CSS related

If the content section gets stuffed with a lot of text, the height of the section is automatically changed. Normally the height of the postSidebar div would change too since both divs are inside the very same div, but in my case it remains fixed. You can see it very well if the postSidebar has a different color than the content section. There will be a huge gap on the left side.

I think it is caused by bad CSS. Can anyone help me finding the right CSS values?

I may be able to help with the CSS, post your css, and a link to your forum would help.

Hi, I don't have a domain yet since I am still learning myBB on my localhost server.

Here is the CSS:

.postSidebar {
	float: left;
	width: 180px;
	overflow: hidden;
	text-align: left;
}

.postAuthor {
	padding: 5px 0 0 5px;
}

.postContent {
	margin: 0 0 0 180px;
}

.postContentInner {
	padding: 5px;
	background-color: #FFFFFF;
}

.editnote {
	margin-top: 20px;
	font-size: 10px;
}

.messageBody {
	display: block;
	overflow: hidden;
	position: relative;
}

.userdetails {
	padding: 0;
	list-style-type: none;
	font-size: 11px;
}

.messageFooter {
	clear: both;
	margin: 7px 0 0;
}

.postbodyInner {
	background-color: #FFFFFF;
	display: block;
}

.buttonContainer li {
	display: inline;
}

#postButtons {
	margin: 0;
	padding: 0;
	text-align: right;
}

You may need to assign a relative position to the class you have an issue with, or set a % value, for both classes for height.

Hi, I did that, but this didn't seem to have an effect. In any case, I have set up a test server with a fresh mybb installation here, where you can see it for yourself: http://mattstestserver.bplaced.net/showthread.php?tid=1

As you can see there is a gap on the left side under the postSidebar Container.

Can't really help you with that but maybe you can get some ideas here:

http://matthewjamestaylor.com/blog/ultim...xel-widths

http://matthewjamestaylor.com/blog/equal...s-no-hacks

Hi, I think this sentence is important:

Quote:Vertical dimensions are left unset so they automatically stretch to the height of the content.

But that doesn't work for me even though I left the vertical dimension of the postSidebar container unset.

On your current tableless setup you can make postSidebar transparent and assign white background color to postbodyInner.On that way white bg will only display on sidebar since postContentInner is using green color as background.

Quote:I tried to modify the code with my limited to non-existend javascript knowledge, as expectd I failed.

Now I have to rely on someone else fixing this for me. All I want is that <div class="postbodyInner"> <div class="postbody" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> gets wrapped up by a color if the checkbox for inline-moderation is checked.

Try with inline_moderation.js attached in this post and open your global.css and find:

Quote:.trow_selected td {
background: #FFFBD9;
}

replace it with:

Quote:.trow_selected div.postbody {
background: #FFFBD9;
}

Both issues solved. Thank you very much Johnny S :)