Awards

Hello.

How to make my awards look like this:  instead of this: 


I really do not want my forum's profile to be changed.

I am using "image list" to do my awards, because I want them to have a title when hover on them.

Forum URL: www.namelesscraft.org

Thank you.

Try and see if this CSS code works

Code:

.profile_field_list li img { display:inline-block }

Ramdaman wrote:Try and see if this CSS code works

Code:

.profile_field_list li img { display:inline-block }

Thank you, but unfortunately didn't work

Try this:

Code:

.profile_field_list li img { display:inline-block !important; }

Didn't work

I will show my published templates

index_body:

viewforum_body:

(have to double post cause the message was too long)

viewtopic_body:

MY CSS:

Add the #CSS code to the top of your stylesheet.

Also tried that, didn't work.

bump

Hey, just asking, how are you able to select multiple images from the image list? I can only select one..

PA wrote:Hey, just asking, how are you able to select multiple images from the image list? I can only select one..

It is not possible.

Hey, this's your CSS

Code:

.filtered_profile_field {
background: #0f0f0f;
border-bottom: 2px solid #000;
border-left: 1px solid #000;
border-right: 2px solid #000;
border-top: 1px solid #000;
color: #C9C9C9;
display: block;
font-family: Verdana;
font-size: 10px!important;
height: 1%;
margin-bottom: 2px;
margin-left: 10px;
overflow: hidden;
padding: 5px 0 5px 5px;
text-align: left!important;
vertical-align: middle;
width: 187px;


And what I modified

Code:

.filtered_profile_field {
background: #0f0f0f;
border: none !important;
color: #C9C9C9;
display: inline-block;
font-family: Verdana;
font-size: 10px !important;
height: 1%;
margin-bottom: 2px;
margin-left: 10px;
overflow: hidden;
padding: 5px 0 5px 5px;
text-align: left!important;
vertical-align: middle;
/* width: 187px; NEED REMOVE*/

Did you have a separator for profile? Add new one.
Don't like it? Ya, me too!

Yea I don't like that at all...
Isn't there another way?

Try this CSS:

Code:

td.row1 {
display: block;
position: relative;
top: -6px;
text-align: left;
z-index: 99;
background: #141414;
box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0px 1px rgba(255, 255, 255, 0.02) inset, 0px 1px 3px rgba(0, 0, 0, 0.9);
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10x;
padding-top: -5px;
padding-bottom: 15px;
padding-left: 6px;
border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-bottom: 5px solid #FFB008;
}

That didn't work. The index had orange bars everywhere

Hello try this
1. Admin Panel > Display > Template > General > View_topic_body
Search:

Code:

<!-- BEGIN profile_field -->
                                                          {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                                 <!-- END profile_field -->

Replace to:

Code:


<!-- BEGIN profile_field -->
                                                          {postrow.displayed.profile_field.LABEL}<span class="award-egc">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
                                 <!-- END profile_field -->

Then after that.
Place this CSS:

Code:

.award-egc img {
background: #272A2F;
border-radius: 5px;
height: 25px;
width: 25px;
}

Save

Finish

Result:

Now its all screwed....
Its like this:



Instead of being like this





I'd really appreciate if someone helped me doing a profile like this:

Using drop shadows and everything

a

bp

you can try this



css

Code:

.profileee {
    background-image: url("http://i.imgur.com/I35DAyA.png");
    border-bottom: 4px solid #835596;
    border-style: solid none;
    border-top: 4px solid #835596;
    margin: 10px !important;
    padding: 10px 0px 30px;
    text-align: center;
    width: 215px;
    border-radius: 3px;
 
}

.profileee hr{
  border-bottom: 0.01em solid #333;
  background-color: #000;
  color: #000;
  height: 3px;
  width:100%;
}

javascript

Code:

$(function(){
$('.profileee span strong:nth-child(2)').after(' <hr></hr> ');
$('.profileee span img:nth-child(2)').after(' <hr></hr> ');
});

No....
I want a profile like this:

bump

bump

bump

You have new thing in profiles for each award, right?

Have you tryed changing their seprator?