Topic: How to add a line between poster profile and post

[backend]

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,

[backend]

Look at my name and the information below it and how there is no divider between that and the main post on the right.

[mashby]

.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.

[Hj Ahmad Rasyid Hj Ismail]

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.

[Antechinus]

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.

[Hj Ahmad Rasyid Hj Ismail]

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.

[Antechinus]

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;}