Customizing SMF > Graphics and Templates

Template Edit? Post Profile on top

<< < (3/3)

Antechinus:
Bloc is usually on the ball with things like this, but may be a bit busy at the moment. If you're still stuck in a day or two I'll sort it for you.

Mikirin:
Thank you, I think he's a bit busy though, since there's still no reply after three days. I'll wait a little longer and if there's no reply then I'll rely on you, thank you!

Antechinus:
As per upated request........................

This should work pretty well. It's just css edits without any template hacks. Note that it will work best with a default avatar set, so that everyone has an avatar. Some numbers might need a bit of adjustment too.

If you need something more tolerant that will handle having avatars or no avatars, it would probably be best to edit the template to change the markup. Some things can be done just with css, but it gets a bit silly after a while. :)

Try this anyway and see how you like it. Replace the default code with this lot. Starts around Line 1750 of a vanilla Overview index.css.


--- Code: ---/* poster and postarea + moderation area underneath */
.post_wrapper
{
float:left;
width:100%;
}
.poster
{
float: left;
width: 98%;
border-bottom: 1px solid #666;
padding: 0;
margin: 0 1% 4px 1%;
}
.postarea, .moderatorbar
{
margin: 0 1% 4px 1%;
float: left;
width: 98%;
padding: 0;
box-sizing: border-box; -moz-box-sizing: border-box;
}
.postarea div.flow_hidden
{
width: 100%;
}
.moderatorbar
{
clear: both;
}
/* poster details and list of items */
.poster h4, .poster ul
{

margin: 0 1em 0 1.5em;
}
.poster h4
{
margin: 0.2em 0 0.4em /*Next depends on avatar width*/110px;
padding: 0;
font-size: 120%;
float: left;
}
.poster ul {
float: left;
width: 100%;
margin: -25px 0 0 0;
box-sizing: border-box; -moz-box-sizing: border-box;
text-align: right;
}
.poster ul li
{
margin: 6px 6px 0 0;
}
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
float: none;
}
.poster ul ul li
{
display: inline;
}
.poster li.blurb
{
float: left;
margin: /*Adjust next to suit. */ -40px 5px 0 5px;
}
.poster li.avatar
{
overflow: hidden;
float: left;
margin: /*Adjust next to suit. */ -50px 10px 0 10px;
}
.poster ul li.profile
{
margin: 6px 0 0 0;
}
--- End code ---

And just after the quickbuttons:


--- Code: ---.post
{
margin: 6px 0 0 0;
float: left;
width: 100%;
padding: 0;
box-sizing: border-box; -moz-box-sizing: border-box;
border-top: 1px solid #666;
}
--- End code ---

Navigation

[0] Message Index

[*] Previous page