Topic Avatars Design(?)

Hi, is there any way to make my topic avatars look like that or a similar design? i saw it from a forumotion forum.

Hi,

Yes, it's possible. However, it's only possible on punBB and phpBB2 forums. Can you please provide both your forum URL & the one in the screenshot? Thank you.

Regards,
Sir Chivas.

yeah im using punbb, thats my forum url: http://myplanet.forumgreek.com/forum
and thats where i saw it from: http://www.thegreeksenergy.com/t63350-topic

Regards,
Joker   

Hi

Hmm... I will not give out their full styles but something similar to it only. This is for the username:

Code:

.pun .user-ident .username {
background: url() repeat-x scroll 50% 0 #Color;
border: 1px solid #Color;
border-bottom: 1px solid #Color;
border-top-left-radius: #px;
border-top-right-radius: #px;
border-width: #px;
margin-bottom: -#px;
padding: #px!important;
width: #px;
}

This is for the avatar area:

Code:

.pun .user-ident .user-basic-info {
background-color: #Color;
border: 1px solid #Color;
border-radius: #px;
font-size: #em;
font-weight: #;
line-height: #em;
margin: 0 #px #px;
padding: #px;
text-align: center;
text-shadow: 0 #px 0 #Color, 0 #px 0 #Color, 0 #px 0 #Color, 0 #px 0 #Color, 0 #px 0 #Color, 0 #px #px rgba(0, 0, 0, 0.1), 0 0 #px rgba(0, 0, 0, 0.1), 0 #px #px rgba(0, 0, 0, 0.3), 0 #px #px rgba(0, 0, 0, 0.2), 0 #px #px rgba(0, 0, 0, 0.25), 0 #px #px rgba(0, 0, 0, 0.2);
}

Now find this in your template viewtopic_body:

Code:

{postrow.displayed.POSTER_AVATAR}<br

Replace it by:

Code:

<div class="aviecustom">{postrow.displayed.POSTER_AVATAR}</div><br />

Add this in your stylesheet:

Code:

.aviecustom
background-color: #Color;
border: #Color solid #px;
border-radius: #px #px #px #px;
height: #px;
margin-bottom: #px;
overflow: hidden;
padding: #px;
text-align: center;
width: #px;
}

Code:

{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</div></div>

Replace it by:

Code:

<span class="leftp"></span><span class="rightp"></span>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</div></div>

Add this in CSS:

Code:

.leftp
background: url(IMG LINK) repeat-x scroll 50% 0 #Color;
border: #px solid #Color;
border-radius: #px 0 0 0;
float: left;
height: #px;
margin-left: -#px;
margin-top: -#px;
width: #px;
}
.rightp {
background: url(IMG LINK) repeat-x scroll 50% 0 #Color;
border: #px solid #Color;
border-radius: 0 #px 0 0;
float: right;
height: #px;
margin-right: -#px;
margin-top: -#px;
width: #px;
}

Anyway, this is for the rank name now, go to AP < Rank Administration < Click on a rank and modify it and add:

<div class="rankp"></div>

In the beginning and end like this:

Code:

<div class="rankp">Admin</div>

And then this in your stylesheet:

Code:

.rankp {
background: url(IMG LINK) repeat-x scroll 50% 0 #Color;
border: #px solid #Color;
border-radius: 0 0 #px #px;
color: #Color;
margin-left: -#px;
margin-right: -#px;
margin-top: #px;
padding: #px;
}

Sorry if it took awhile, I was trying to look at the site thoroughly, lol.

Edit: Sorry if it's a bit of a hassle, but I had to do this one by one on my site. I suggest you read everything first before starting to make it faster for you

Regards,
Pizza Boi