Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: backend on November 12, 2012, 01:30:57 PM

Title: How to add a line between poster profile and post
Post by: backend on November 12, 2012, 01:30:57 PM
I am using SMF 2.0.2  (curve theme) and I would like to add a line between the poster's profile and the main post. Right now it is like all one big box and I would like to seperate the two like it was in the previous SMF version.

thanks,
Title: Re: How to add a line between poster profile and post
Post by: backend on November 12, 2012, 01:32:01 PM
Look at my name and the information below it and how there is no divider between that and the main post on the right.

Title: Re: How to add a line between poster profile and post
Post by: mashby on November 13, 2012, 12:10:31 PM
.poster { border-right: 1px solid black; }
Tweak that to your desire...and .poster should already exist in the CSS file. Just need to add a border over on the right to that class.
Title: Re: How to add a line between poster profile and post
Post by: Hj Ahmad Rasyid Hj Ismail on November 13, 2012, 10:18:45 PM
There is no easy way as poster css is floating to the left and it may not be in a full height. Similarly, posterarea and moderatorbar. A proper construction of Display.template.php with additional div and css is needed in order to achieve that. You may have to find a good themer who can help you with that.
Title: Re: How to add a line between poster profile and post
Post by: Antechinus on November 13, 2012, 11:25:23 PM
Actually you can tweak the css if you want it full height. ;)

The trick is to hide the topslice and botslice spans, then add top and bottom padding and border-radius to the post backgrounds. That works.

There's a bit of detailing involved (stopping backgrounds collapsing, making .poster appear full height, etc) but it can all be done with a bit of css.
Title: Re: How to add a line between poster profile and post
Post by: Hj Ahmad Rasyid Hj Ismail on November 18, 2012, 09:19:57 PM
appear full height

This is always a problem to me. Making a div appear full height especially when it is empty. Unless a div have content, it will never display full height to me.
Title: Re: How to add a line between poster profile and post
Post by: Antechinus on November 19, 2012, 02:44:53 AM
No it wont, but there are ways you can cheat. One old trick is often called the "one true layout" trick. This works very well if you can get away with using hidden overflow on your parent container. In other words, if you need content (like drop menus) that extends outside the parent you can't use this trick.

What you do is set a very large bottom padding on the div you want to "stretch", and hide the excess by using an equally large negative margin. As an example:

Code: [Select]
.post_wrapper {overflow: hidden;}
.poster {padding-bottom: 5000px; margin-botom: -5000px; border-right: 1px solid #aaa;}