Float Post Around Poster Info Using CSS

[Hj Ahmad Rasyid Hj Ismail]

Hiya All,

In response to another new request here, I making this a tip or trick so that others can benefit from it, if they want to  . As titled, this is for floating the post (inner section) to surround poster info column in post page. I think may be he wants a wider space for the content (if the post is long enough). See picture for better idea(s).



This is mainly css re-styling, so as "usual",  (lol  I am starting to like this) open your index.css file.

1. Find:

Code Select Expand

/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
overflow: auto;
line-height: 1.4em;
padding: 0.1em 0;
}
Change that too:

Code Select Expand

/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
/* overflow: auto; */
line-height: 1.4em;
padding: 0.1em 0;
}

2. Find:

Code Select Expand

.postarea, .moderatorbar
{
margin: 0 0 0 16em;
}
.postarea div.flow_hidden
{
width: 100%;
}

.moderatorbar
{
clear: right;
}
And change this to:

Code Select Expand

.postarea, .moderatorbar
{
/* margin: 0 0 0 16em; */
}
.postarea div.flow_hidden
{
/* width: 100%; */
margin-right: 1em;
padding-bottom: 1em;
border-bottom: 1px solid #99a;
}

.moderatorbar
{
padding-left: 1.2em;
clear: right;
}

3. Find:

Code Select Expand

.inner
{
padding: 1em 1em 2px 0;
margin: 0 1em 0 0;
border-top: 1px solid #99a;
}
And change that to:

Code Select Expand

.inner
{
padding: 1em 1em 2px 0;
margin: 0 1em 0 1.2em;
/* border-top: 1px solid #99a; */
}

That's it. Good luck and best wishes to you testers.

[icasm]

Easy to modify and understand. Thanks again!

[Hj Ahmad Rasyid Hj Ismail]

No problem. I hope it works well for you.

[Ricky.]

Nice work and improvement.

[MrGrumpy]

Not trying to hijack this thread but this is a variation on ahrasis's version of this change to the post area but this way edits Display.template.php to move the user info into the post area but under the post title, again resulting from the conversation ahrasis linked. This is a little more complicated than ahrasis's version but achieves a different look.



Find and COPY

Code Select Expand


// Show information about the poster of this message.
echo '
<div class="poster">
<h4>';

// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';

// Show a link to the member's profile.
echo '
', $message['member']['link'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

// Show the member's custom title, if they have one.
if (!empty($message['member']['title']))
echo '
<li class="title">', $message['member']['title'], '</li>';

// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<li class="membergroup">', $message['member']['group'], '</li>';

// Don't show these things for guests.
if (!$message['member']['is_guest'])
{
// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
echo '
<li class="postgroup">', $message['member']['post_group'], '</li>';
echo '
<li class="stars">', $message['member']['group_stars'], '</li>';

// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<li class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</li>';

// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';

// Is karma display enabled?  Total or +/-?
if ($modSettings['karmaMode'] == '1')
echo '
<li class="karma">', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</li>';
elseif ($modSettings['karmaMode'] == '2')
echo '
<li class="karma">', $modSettings['karmaLabel'], ' +', $message['member']['karma']['good'], '/-', $message['member']['karma']['bad'], '</li>';

// Is this user allowed to modify this member's karma?
if ($message['member']['karma']['allow'])
echo '
<li class="karma_allow">
<a href="', $scripturl, '?action=modifykarma;sa=applaud;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.' . $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $modSettings['karmaApplaudLabel'], '</a>
<a href="', $scripturl, '?action=modifykarma;sa=smite;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '">', $modSettings['karmaSmiteLabel'], '</a>
</li>';

// Show the member's gender icon?
if (!empty($settings['show_gender']) && $message['member']['gender']['image'] != '' && !isset($context['disabled_fields']['gender']))
echo '
<li class="gender">', $txt['gender'], ': ', $message['member']['gender']['image'], '</li>';

// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="blurb">', $message['member']['blurb'], '</li>';

// Any custom fields to show as icons?
if (!empty($message['member']['custom_fields']))
{
$shown = false;
foreach ($message['member']['custom_fields'] as $custom)
{
if ($custom['placement'] != 1 || empty($custom['value']))
continue;
if (empty($shown))
{
$shown = true;
echo '
<li class="im_icons">
<ul>';
}
echo '
<li>', $custom['value'], '</li>';
}
if ($shown)
echo '
</ul>
</li>';
}

// This shows the popular messaging icons.
if ($message['member']['has_messenger'] && $message['member']['can_view_profile'])
echo '
<li class="im_icons">
<ul>
', !empty($message['member']['icq']['link']) ? '<li>' . $message['member']['icq']['link'] . '</li>' : '', '
', !empty($message['member']['msn']['link']) ? '<li>' . $message['member']['msn']['link'] . '</li>' : '', '
', !empty($message['member']['aim']['link']) ? '<li>' . $message['member']['aim']['link'] . '</li>' : '', '
', !empty($message['member']['yim']['link']) ? '<li>' . $message['member']['yim']['link'] . '</li>' : '', '
</ul>
</li>';

// Show the profile, website, email address, and personal message buttons.
if ($settings['show_profile_buttons'])
{
echo '
<li class="profile">
<ul>';
// Don't show the profile button if you're not allowed to view the profile.
if ($message['member']['can_view_profile'])
echo '
<li><a href="', $message['member']['href'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/icons/profile_sm.gif" alt="' . $txt['view_profile'] . '" title="' . $txt['view_profile'] . '" />' : $txt['view_profile']), '</a></li>';

// Don't show an icon if they haven't specified a website.
if ($message['member']['website']['url'] != '' && !isset($context['disabled_fields']['website']))
echo '
<li><a href="', $message['member']['website']['url'], '" title="' . $message['member']['website']['title'] . '" target="_blank" class="new_win">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/www_sm.gif" alt="' . $message['member']['website']['title'] . '" />' : $txt['www']), '</a></li>';

// Don't show the email address if they want it hidden.
if (in_array($message['member']['show_email'], array('yes', 'yes_permission_override', 'no_through_forum')))
echo '
<li><a href="', $scripturl, '?action=emailuser;sa=email;msg=', $message['id'], '" rel="nofollow">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . '" />' : $txt['email']), '</a></li>';

// Since we know this person isn't a guest, you *can* message them.
if ($context['can_send_pm'])
echo '
<li><a href="', $scripturl, '?action=pm;sa=send;u=', $message['member']['id'], '" title="', $message['member']['online']['is_online'] ? $txt['pm_online'] : $txt['pm_offline'], '">', $settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/im_' . ($message['member']['online']['is_online'] ? 'on' : 'off') . '.gif" alt="' . ($message['member']['online']['is_online'] ? $txt['pm_online'] : $txt['pm_offline']) . '" />' : ($message['member']['online']['is_online'] ? $txt['pm_online'] : $txt['pm_offline']), '</a></li>';

echo '
</ul>
</li>';
}

// Any custom fields for standard placement?
if (!empty($message['member']['custom_fields']))
{
foreach ($message['member']['custom_fields'] as $custom)
if (empty($custom['placement']) || empty($custom['value']))
echo '
<li class="custom">', $custom['title'], ': ', $custom['value'], '</li>';
}

// Are we showing the warning status?
if ($message['member']['can_see_warning'])
echo '
<li class="warning">', $context['can_issue_warning'] ? '<a href="' . $scripturl . '?action=profile;area=issuewarning;u=' . $message['member']['id'] . '">' : '', '<img src="', $settings['images_url'], '/warning_', $message['member']['warning_status'], '.gif" alt="', $txt['user_warn_' . $message['member']['warning_status']], '" />', $context['can_issue_warning'] ? '</a>' : '', '<span class="warn_', $message['member']['warning_status'], '">', $txt['warn_' . $message['member']['warning_status']], '</span></li>';
}
// Otherwise, show the guest's email.
elseif (!empty($message['member']['email']) && in_array($message['member']['show_email'], array('yes', 'yes_permission_override', 'no_through_forum')))
echo '
<li class="email"><a href="', $scripturl, '?action=emailuser;sa=email;msg=', $message['id'], '" rel="nofollow">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . '" />' : $txt['email']), '</a></li>';

// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div>

Once copied Replace with

Code Select Expand


echo'


Then find

Code Select Expand


// Show the post itself, finally!
echo '
<div class="post">';

And add after that the code you copied above.
Then add after the closing div (last line of that section of code)

Code Select Expand


';

Now open index.css and find

Code Select Expand


.poster
{
float: left;
width: 15em;
}
.postarea, .moderatorbar
{
margin: 0 0 0 16em;
}



Replace with

Code Select Expand


.poster
{
float: left;
width: 13em;
padding: 5px;
border: 1px solid #9999AA;
margin: 10px 20px 0 0;
text-align: center;
border-radius: 6px;
}
.postarea, .moderatorbar
{
margin: 0 0 0 1em;
}

If you want the post profile on the right



Replace the .poster code for the 1 below, this floats it to the right and adjusts the margins to align it correctly on the right hand side.

Code Select Expand


.poster
{
float: right;
width: 13em;
padding: 5px;
border: 1px solid #9999AA;
margin: 10px 10px 0 20px;
text-align: center;
border-radius: 6px;
}

And to move the "Author" title on the titlebar to the right above the post profile

Find

Code Select Expand


#forumposts h3 span#author
{
margin: 0 7.7em 0 0;
}

Replace with

Code Select Expand


#forumposts h3 span#author
{
margin: 0 4em 0 0;
float: right;
}


Obviously if you want things aligned/positioned slightly different adjust the margins to suit your needs.
Although this edits a template file this shouldn't cause a problem with mods that edit the post profile as the whole post profile code has just been moved and not edited.
The rounded corners uses  CSS3 border-radius that isn't supported in older browsers so will give square corners in for example IE7/IE8

[Hj Ahmad Rasyid Hj Ismail]

Thanks Ricky.

And great job MrGrumpy. I like it...

[MrGrumpy]

And great job MrGrumpy. I like it...

Thanx

[Ricky.]

Nice work mcgrumpy..looks cool !

[Hj Ahmad Rasyid Hj Ismail]

Agreed with Ricky. Nice add up / update MrGrumpy. It looks nicer on the right side. But will be better if the Author column on the top is removed.

[MrGrumpy]

oooops forgot bout that, i'll fix that tomorrow


ETA - code updated, author column moved to right rather than just deleting it.

[[unplugged]]

Very nice work! It really makes the post flow better.

One thing I noticed while testing this was that if a guest (or a member whose account had been removed) has posts, the container for their poster info gets reduced to the point of looking out of place as seen here:


This can be remedied quite easily by adding a minimum height to the container which results in:


The minimum height will make the container appear more like the others:


To do this, open index.css and (once again) find:

Code Select Expand

.poster
{

and add after it:

Code Select Expand

min-height: 160px;

The height can, of course, be adjusted to personal taste.



EDIT:

Also, to better align the container, the margin for the .poster class should be margin: 25px 20px 0 15px; resulting in:



Now the top and left side of the container line up with the wrapped text.

[Hj Ahmad Rasyid Hj Ismail]

Good improvement MrGrumpy. Nice add up too SunKing. Keep it up guys. Forum users are expecting more selection of display / post page rather than the usual "boring" one.  If you know what I mean   

[MrGrumpy]

Forum users are expecting more selection of display / post page rather than the usual "boring" one.  If you know what I mean   

Moving the poster profile will save on space, especially for fixed width forums/themes and there won't be dead space under the poster profile on longer posts.

[Hj Ahmad Rasyid Hj Ismail]

Indeed it does MrGrumpy. I can't think of a better way but to incorporate them into my Xenforo Like Display / Post Page for 2.0 [WIP Mod].

[MrGrumpy]

I've been meaning to implement it in themes before now but hadn't got around to looking at the code but will use it in future especially in my fixed width themes, never have liked the way forums had the poster profile separate from the post content, always seemed disjointed to me

(but then I moan about a lot of stuff with forums lol)

[ascaland]

Definitely a neat idea, im going to use this. Thanks guys.

[AussieBill]

The poster, postarea and moderatorbar classes are also used in PersonalMessage.template.php, so that needs a bit of fixing too.

[Hj Ahmad Rasyid Hj Ismail]

So far, they'll look the same AussieBill.

[AussieBill]

Ah, OK then. Must have been something I did

[trenchteam]

I started a post here: http://www.simplemachines.org/community/index.php?topic=445939.0

I was led here to this post. I was interested Mr. Grumpy in creating organizing my display profile similar to the ones you use in your themes?