Add icons on your prefixes

[winchester]

winchester submitted a new resource:

Add icons on your prefixes - Add nice icons on your prefixes

Hi xf,

Today I share a tutorial for : Add icons on your prefixes.

Go to your admin panel : forums/Discussion Prefixes/Add a prefix

In my example I create the prefix translation

started by checking the box : Other, custom use of CSS class name

Then added this:

pre-TRAD pre

You have more than changed the TRAD by what you desire

as I illustrate them in this picture

View attachment 178863

finally go in the...

Read more about this resource...

 

[HenryRocket]

@winchester is posible this from version 1.5? is very intereset.

 

[winchester]

Normally yes

replace this :

pre-TRAD pre

by that :

prefix prefixTRAD

in EXTRA.CSS :

.prefixTRAD:before {
    margin-right: 4px;
    font-size: 80%;
}
.prefix.prefixTRAD {
    color: white;
    background-color: #72e64c;
    border-color: #81A9E1;
    background-repeat: repeat-x;
    background-image: none;
    background-position: bottom;
    border-radius: 3px;
    border: 1px solid rgb(0, 0, 0) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    _border: 1px solid rgb(0, 0, 0) !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px rgba(0, 0, 0, 0.1);
    font-size: 12px;
    font-weight: bold;
}
.prefixTRAD:before {
    content: url(https://vf99.net/styles/ML.gif);
}

Result :

 

[YAPResearch]

This may sound really REALLY dumb but anyone got this in English?