PDA

View Full Version : borders around userstats in postbit


deb0
11-25-2004, 01:44 AM
I saw this layout on another site, but can't figure out how to do it. Basically, they have borders around each user stat in the postbit template. See attachment.

Blue Moose Aaron
11-25-2004, 02:06 AM
That can be done with CSS. If no one has shown you how by the time I get home (after the holiday) I'll do it for you

Or you could point me to the site and I could show you the code that is used for it

deb0
11-25-2004, 02:27 AM
I would immensley appreciate that.

Thanx

rex_b
12-02-2004, 08:08 PM
Anybody?

Rick Sample
12-02-2004, 08:16 PM
I have it on my site, but I forgot how I did that :)

Blue Moose Aaron
12-02-2004, 08:36 PM
Im doing it now

Blue Moose Aaron
12-02-2004, 08:54 PM
ok, sorry, I forgot I said I would do it. Anyway, here goes:

If you have different styles, you'll have to change the colors. I went ahead and made it the same colors as the image you posted.

Log into your admincp and go to:
Styles & Templates > Style Manager > Your Style > Main CSS
At the bottom of that page you'll see a box that says 'Additional CSS Definitions'. In that box add this:
.infobox {
border-top-width: 1px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 1px;
border-style: solid;
border-color: #000;
background-color: #eee;
padding: 3px;
margin-top: 3px;
margin-bottom: 3px;
font-size: 10px;
width: 95%;
}

Save

No go to
Styles & Templates > Style Manager > Your Style > Edit Templates > Postbit Templates > postbit (or postbit_legacy if you are using the one with the post info on the left)

Now find the info you want to be boxed in and add in front of it
<div class="infobox">

and behind the info you want boxed in add
</div>

For example to display the post count in a box you would have
<div class="infobox">$vbphrase[posts]: $post[posts]</div>

Rick Sample
12-02-2004, 09:01 PM
Your is a bit different from mine, but I'll post mine, too:


.info {
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 4px;
background-color: #F9F9F9;
border-top: 1px solid #0D1E3E;
border-right: 2px solid #0D1E3E;
border-left: 1px solid #0D1E3E;
border-bottom: 2px solid #0D1E3E;
margin-bottom: 2px;
}

<div class="info"> yoru stuff in here </div>

example: http://www.muscle-mustangs.com/forums/showthread.php?p=14144#post14144

Blue Moose Aaron
12-02-2004, 09:11 PM
Looks like either will work perfectly