The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Topic Avatars Design(?)

View previous topic View next topic Go down

In progress Topic Avatars Design(?)

Post by J0k3R^ on April 24th 2014, 6:28 pm

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


J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

In progress Re: Topic Avatars Design(?)

Post by Sir Chivas™ on April 24th 2014, 11:32 pm

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.

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: Topic Avatars Design(?)

Post by J0k3R^ on April 25th 2014, 7:25 am

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:rose:

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

In progress Re: Topic Avatars Design(?)

Post by Pizza Boi on April 25th 2014, 8:00 am

Hi Very Happy

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 Neutral

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum