Customizing SMF > Graphics and Templates

Post Author Table Column Background or Border

(1/2) > >>

MovedGoalPosts:
SMF 2.0.2 Default curve theme.  All I've done so far is a few css colour changes, nothing to the layout order.

As indicated on the attached screenshot I would like to be able to:
1)  Change the background colour marked in red to the entire author's detail column areas (but would probably alternate in the same way as each post row colour can alternate)

2)  Place a border line, marked in yellow, to separate the post content column from the author's column.

Trouble is the post column template doesn't seem to be structured to let me do this?
Each post is framed in the a row defined by windowbg.  Within this three main sub rows of full width : topslice, post_ wrapper and botslice.
Within post_wrapper one finds the two columns of poster (for the author's stuff) and postarea (for the message) created, before a full width row for the moderator bar which is again subdivided into columns.  And of course post area is split into a number of rows.

I managed to apply a css left border to the various rows contained in the postarea but unfortunately, probably due to margins and padding, they didn't join up.

Anyone got any bright ideas please, or should I give up on this idea?

Antechinus:
This is the user area in index.css:


--- Code: ---.poster
{
float: left;
width: 15em;
}
--- End code ---

Try:


--- Code: ---.poster
{
float: left;
width: 15em;
background: hex-code-of-your-choice;
border-right: 2px solid hex-code-of-your-choice;
}
--- End code ---

MovedGoalPosts:
Thanks for looking but I'd already tried that one.  As this attachment shows the "poster" class doesn't cover the full column height unless the message was a single line and the user doesn't have any signature stuff.

Antechinus:
Ah. You want it full height. In that case you have to get cunning. Divs collapse to the height of their content, and don't think you can cheat by using height: 100%; or something. That wont work either. :D

However, there is an old dodge that should give you the result you are after. I haven't tested it for this particular purpose, but offhand I don't think it will break anything. Try ths:


--- Code: ---.post_wrapper
{
float:left;
width:100%;
overflow: hidden;
}
.poster
{
margin-bottom: -5000px;
padding-bottom: 5010px;
float: left;
width: 15em;
background: hex-code-of-your-choice;
border-right: 2px solid hex-code-of-your-choice;
}
--- End code ---

What this does is hide anything that wants to extend outside the post_wrapper div. This means that although your poster div is massively tall, you wont see most of it. The negative bottom margin will hide that immense amount of padding.

The reason for using such a huge amount of padding is that posts can be very long, so it makes sense to use more padding than you will ever need. 5000px should cover it, but you can always use more if you want to. Just make sure the negative bottom margin is that same as the padding or slightly less, otherwise content will tend to be clipped by the post wrapper.

ETA: This is commonly known as the "One True Layout" trick, and has been around since at least IE5 days. :)

MovedGoalPosts:
Oooh that's close :)

Just need to somehow continue this into the areas used by topslice and botslice.

Navigation

[0] Message Index

[#] Next page