Add icons on your prefixes

Add icons on your prefixes

winchester

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

Code:
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...
 

winchester

Member
Normally yes

replace this :
Code:
pre-TRAD pre
by that :
Code:
prefix prefixTRAD
in EXTRA.CSS :
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 :

194906
 
Last edited:
Top