MyBB Community Forums

Full Version: adding a border on postbit
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
i'm trying to add 2 borders on postbit, so far i got this:
[Image: 12674170_1005707369502086_2028703379_n.j...e=56B5034F]

i edited postbit_classic with this (pls note the 2 divs with borders bellow):
{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>

<div class="post classic {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
	
<div class="post_author scaleimages">
		<div class="author_information">
			<div style="border: 1px solid #3c699c; padding:2px;"><strong><span class="largetext">{$post['profilelink']}</span></strong><br /></div>
			</br>
			<div style="border: 1px solid #3c699c; padding:2px;">{$post['useravatar']}
			<span class="smalltext">
				{$post['usertitle']}<br />
				{$post['userstars']}
				{$post['groupimage']} 
			</span>
				

	</div>
	</div>


	
	<div class="author_statistics">
{$post['user_details']}
</div>
	
		
</div>
	
<div class="post_content">
		<div class="post_head">
		{$post['posturl']}
		{$post['icon']}
		<span class="post_date">{$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
	{$post['subject_extra']}
	</div>
	<div class="post_body scaleimages" id="pid_{$post['pid']}">
		{$post['message']}
	</div>
	{$post['attachments']}
	{$post['signature']}
	<div class="post_meta" id="post_meta_{$post['pid']}">
		{$post['iplogged']}
	</div>
</div>
<div class="post_controls">
	<span class="float_left" style="padding-left: 3px; padding-top: 7px; display: inline-block;">{$post['onlinestatus']}</span>
	<div class="postbit_buttons author_buttons float_left">
		{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
	</div>
	<div class="postbit_buttons post_management_buttons float_right">
		{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
	</div>
</div>
</div>
I've tried to make the 2nd border to end at Warning level, but I can't get it done. Is there any other way of doing this?
there should be no need to add the border as inline style property
instead you can use required border through existing div elements (eg. .post_author)
.post_author {border: 1px solid #3C699C!important;}
true but placing that on .post_author would do only one border around everything (username, avatar, usertitle, etc etc).

i was trying to make two borders, one only on username and the other on everything else (ava, usertitle, user_details) Toungue.
Move the useravatar-variable and the author_statistics class inside the author_information div (right above the closing div-tag and below the closing span-tag), now move the profilelink variable + the span & the strong tag 1 line up so that it's above the author_information class.

Now wrap the profilelink 'line' in a new div, something like this:

<div class="user-author"><strong><span class="largetext">{$post['profilelink']}</span></strong></div>

Now add an additional class to the author_information div/class so that it the author_information class looks like this (dont mind the strange class name):

<div class="author_information st-t-pd">


That's it for the template editing part..



Add the following two classes  / code to the bottom of your global.css now:

.user-author {
    margin-bottom: 10px;
    text-align: center;
    padding: 7px;
    border: 1px solid #ddd;
}

.st-t-pd { padding-top: 1em !important; }


Now find (.post .post_author div.author_information  &)  .post.classic .post_author div.author_information and add a border of your choice to it, something like:

border: 1px solid #3498db


And last but not least you have to add a margin to the .post.classic .post_author div.author_avatar class, something like this:


margin-top: 1.475em !important;



I hope that's what you wanted...