News:

SMF 2.1.2 has been released! Take it for a spin! Read more.

Main Menu

VB Postbit Style With User Information Above Posts For SMF 2.0.x

Started by Hj Ahmad Rasyid Hj Ismail, June 18, 2010, 03:52:20 AM

Previous topic - Next topic

Hj Ahmad Rasyid Hj Ismail

MPITT - Move Poster Info To Top (VB Postbit Style)
(previously called VB Postbit Style With User Information Above Posts For SMF 2.0 RC3)

Note: This code is outdated. You can get the new code (simpler & cleaner) its mod page by way of parsing it, discuss and get support at its support page. You can also turn it on and off via Admin CP.

The Old Code (not maintained nor updated)
Quote from: Abu Fahim Ismail on June 16, 2010, 02:58:39 PM
While waiting, I am playing around with display.template.php and almost got it. I just need to create a proper css styling so it works.

I have been modding this for several days. My mod is for SMF 2.0 RC3 and it is like this:
Part A. Modifying display.template.php

1. Find and comment out (I missed this out earlier) this lines:
// Show avatars, images, etc.?
/* if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<li class="avatar" style="overflow: auto;">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</li>'; */


2. Find:
// Show information about the poster of this message.
Add before:

echo '
<div class="posterl">';

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



3. Find:
echo '
<div class="poster">
<h4>';

Replace with:
/* echo '
<div class="poster">
<h4>'; */
echo '
<h4>';


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

Add after:
echo '
</ul>
</div>
<div class="poster">
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';


Part A basically covers the templating. Now let's deal with css in Part B.

Part B: Modifying CSS (Also edited to keep original css stylings by commenting them out)
1. Find:

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

.moderatorbar
{
clear: right;
}

Replace with:
/*
.poster
{
float: left;
width: 15em;
}
.postarea, .moderatorbar
{
margin: 0 0 0 16em;
}
.postarea div.flow_hidden
{
width: 100%;
}

.moderatorbar
{
clear: right;
}
*/
.posterl
{
margin: 0 1.2em 1.2em 1.2em;
float: left;
text-align: center;
width: 160px;
}
.poster
{
margin: 0 0.2em 1.2em 1.2em;
float: right;
text-align: right;
width: 40%;
}
.postarea
{
clear: both;
margin: 1.2em 1.2em 1.2em 1.2em;
border-top: 1px #ccc solid;
}
.postarea div.flow_hidden
{
width: 100%;
}
.moderatorbar
{
clear: right;
margin: 1.2em 1.2em 1.2em 1.2em;
}


2. Find:
/* poster details and list of items */
.poster h4, .poster ul
{
padding: 0;
margin: 0 1em 0 1.5em;
}
.poster h4
{
margin: 0.2em 0 0.4em 1.1em;
font-size: 120%;
}
.poster h4, .poster h4 a
{
color: #c06002;
}
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}
.poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul
{
margin-top: 0.5em;
}
.poster li.warning
{
line-height: 1.2em;
padding-top: 1em;
}
.poster li.warning a img
{
vertical-align: bottom;
padding: 0 0.2em;
}

Replace with:
/* poster details and list of items */
ul, li
{
list-style-type: none!important;
}
.poster h4, .poster ul, .posterl ul
{
padding: 0;
margin: 0 1em 0 1.5em;
}
.poster h4
{
font-size: 120%;
}
.poster ul ul, .posterl ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li, .posterl ul ul li
{
display: inline;
}
.poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul, .posterl li.stars, .posterl li.avatar, .posterl li.blurb
{
margin-top: 0.5em;
}
.poster li.warning, .posterl li.warning
{
line-height: 1.2em;
padding-top: 1em;
}
.poster li.warning a img, .posterl li.warning a img
{
vertical-align: bottom;
padding: 0 0.2em;
}
/*
.poster h4, .poster ul
{
padding: 0;
margin: 0 1em 0 1.5em;
}
.poster h4
{
margin: 0.2em 0 0.4em 1.1em;
font-size: 120%;
}
.poster h4, .poster h4 a
{
color: #c06002;
}
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}
.poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul
{
margin-top: 0.5em;
}
.poster li.warning
{
line-height: 1.2em;
padding-top: 1em;
}
.poster li.warning a img
{
vertical-align: bottom;
padding: 0 0.2em;
}
*/


You should now have the VB Postbit Style With User Information Above Posts. You can move this to tips and tricks if it is useful.

amandeep1

I just tried this with RC3 and all it did was move the info above the post but it was still aligned vertically instead of horizontally. More specifically I am trying to align the user group images (am using multiple group badges mod) going horizontally instead of vertically.

Matthew K.

I have actually developed a mod to do this, but am not sure if I'll ever submit it or not. Maybe later down the road.

KensonPlays

really labradoodle? you sure have secret mods up your sleeve!

Hj Ahmad Rasyid Hj Ismail

Quote from: amandeep1 on September 09, 2010, 08:16:34 PM
I just tried this with RC3 and all it did was move the info above the post but it was still aligned vertically instead of horizontally. More specifically I am trying to align the user group images (am using multiple group badges mod) going horizontally instead of vertically.
I have developed this further but you have to mod a lot on css and Display.template.php. I will make a mod of this later when it is better.

Hj Ahmad Rasyid Hj Ismail

Quote from: Labradoodle-360 on September 09, 2010, 10:26:07 PM
I have actually developed a mod to do this, but am not sure if I'll ever submit it or not. Maybe later down the road.

There is a mod for this but it is not working on SMF 2.0 RC2 and above. Nas has taken over it but confirmed he will not or has no time to develop it as it involved a lot of css.

amandeep1


hash899

will this be compatible with RC2 ever? and is it possible to move the user information to the right? here is the topic i created, I would appreciate it if u could help out: http://www.simplemachines.org/community/index.php?topic=400181.0

Hj Ahmad Rasyid Hj Ismail


Hj Ahmad Rasyid Hj Ismail

Quote from: hash899 on September 12, 2010, 04:43:04 AM
will this be compatible with RC2 ever? and is it possible to move the user information to the right? here is the topic i created, I would appreciate it if u could help out: http://www.simplemachines.org/community/index.php?topic=400181.0
It should be.

About your post I'll reply there ok.

Hj Ahmad Rasyid Hj Ismail

I will submit this mod within this week. I hope it will be useful to everyone.


Stigmartyr

Quote from: ahrasis on September 19, 2010, 05:06:44 PM
I will submit this mod within this week. I hope it will be useful to everyone.

Can't wait!!  I can haz download yet?

This is the mod I've been searching for <3

Hj Ahmad Rasyid Hj Ismail

Sorry, not yet. I have to deal with RC4 first. Will release it here soon.

Stigmartyr

Quote from: ahrasis on November 17, 2010, 06:43:22 AM
Sorry, not yet. I have to deal with RC4 first. Will release it here soon.

Ok - I appreciate your help with this as I have been tampering with my forum already.  I've left myself with alot of space between the avatar and personal info.. Wondering if you have a nicer layout that spreads the postbit around more evenly.

Example: http://black-chapter.com/forums/open-frequency/terms-of-enlistment/

Hj Ahmad Rasyid Hj Ismail

I have made them running but need a few more things to ensure its working properly. I might only support RC4 and above but will try to see whether I can do it for RC2 and RC3 later. Inet is running it now. For testing, use tester1 tester1.

EDITED: Test link changed.

nvcnvn

I have chang my default theme to display the member info section to a dropdown list like VBB Instead of a row to save space.

Not so pretty but I can accept it:
demo:
http://hocvui.net/4rum/mobile-soft/download-phan-mem-yahu-chat-yahoo-tren-dien-thoai/

Se my name!? Move your mouse on my name and you will see!

It no need to add any CSS, but replace alot of HTML code :)) so it seem...useless!

Hj Ahmad Rasyid Hj Ismail

Quote from: ahrasis on November 17, 2010, 04:52:37 PM
I have made them running but need a few more things to ensure its working properly. I might only support RC4 and above but will try to see whether I can do it for RC2 and RC3 later. Inet is running it now. For testing, use tester1 tester1.

EDITED: Test link changed.
You should see what I've done first and comment on it. I already try php/html approach alone but it wont really work without a good css.

What I have done is viewable here: Inet
Note that avatar is blurred if viewer is guest.

jaisi

it's possible for Rc4 are it's onlly for RC3 ?? my forum version is RC4

Hj Ahmad Rasyid Hj Ismail

It has been done and currently is being tested here: I Net @ Net Ville. I will not release this mod until it is fully functional and error free.

So far I will be supporting OS & Browser Detection and Location & Join Date but have no idea of others yet. Kindly suggest the best arrangement, comment what you've seen there and tell me what you are expecting from this mod.

Note: I might also release this as a theme.

Advertisement: