Sticky / Pinned text background codes

First topic message reminder :

Hi all

i have this code i got from some place and it all works fine but i make a change to the Word Sticky to pinned now the pinned don't have a color background like it did when it was as sticky

i made a change to the code but still not showing
 

CSS Files:

Code:

  vertical-align:middle
}
a.topictitle {
  vertical-align:bottom
    padding-top:10px;
}
.an, .g-a,.sticky{
background-color: #3689D1;
background-image: url("http://i55.servimg.com/u/f55/14/73/12/96/highli10.png");
background-position: 0 -1px;
background-repeat: repeat-x;
border-radius: 3px;
color: #FFFFFF;
display: inline-block;
font-family: Verdana,Geneva,sans-serif !important;
font-size: 9px;
font-weight: bold;
height: 16px;
line-height: 16px;
padding: 0 5px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
text-transform: uppercase;
vertical-align: middle;
  border: 1px solid #CCC !important;
}

.p-l {
background-color: #00E600;
background-image: url("http://i55.servimg.com/u/f55/14/73/12/96/highli10.png");
background-position: 0 -1px;
background-repeat: repeat-x;
border-radius: 3px;
color: #FFFFFF;
display: inline-block;
font-family: Verdana,Geneva,sans-serif !important;
font-size: 9px;
font-weight: bold;
height: 16px;
line-height: 16px;
padding: 0 5px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
text-transform: uppercase;
vertical-align: middle;
border: 1px solid #CCC !important;
}

.M-L{
background-color: #660000;
background-image: url("http://i55.servimg.com/u/f55/14/73/12/96/highli10.png");
background-position: 0 -1px;
background-repeat: repeat-x;
border-radius: 3px;
color: #FFFFFF;
display: inline-block;
font-family: Verdana,Geneva,sans-serif !important;
font-size: 9px;
font-weight: bold;
height: 16px;
line-height: 16px;
padding: 0 5px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
text-transform: uppercase;
vertical-align: middle;
  border: 1px solid #CCC !important;
}
.P-D {
background-color: #00E600;
background-image: url("http://i55.servimg.com/u/f55/14/73/12/96/highli10.png");
background-position: 0 -1px;
background-repeat: repeat-x;
border-radius: 3px;
color: #FFFFFF;
display: inline-block;
font-family: Verdana,Geneva,sans-serif !important;
font-size: 9px;
font-weight: bold;
height: 16px;
line-height: 16px;
padding: 0 5px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
text-transform: uppercase;
vertical-align: middle;
border: 1px solid #CCC !important;
}
span.corners-bottom span {
    border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
}


Java Code:

Code:

//Sticky box code
        $(document).ready(function() {
        $('dd.dterm strong:contains("Sticky")').each(function(){
        $(this).addClass('sticky');
        });
        });
        $(document).ready(function() {
        $('dd.dterm strong:contains("Announcement")').each(function(){
        $(this).addClass('an');
        });
        });
        $(document).ready(function() {
        $('dd.dterm strong:contains("Global announcement")').each(function(){
        $(this).addClass('g-a');
        });
        });
$(document).ready(function() {
        $('dd.dterm strong:contains("Poll")').each(function(){
        $(this).addClass('p-l');
        });
        });
$(document).ready(function() {
        $('dd.dterm strong:contains("Moved")').each(function(){
        $(this).addClass('M-L');
        });
        });
        $(document).ready(function() {
        $('dd.dterm strong:contains("Pinned")').each(function(){
        $(this).addClass('P-D');
        });
        });

//END OF CODE

P-D is the code for Pinned

what am i doing wrong ?

Much thanks to anyone that can help

APE

yes it works fine when its called Sticky but as soon as i call it pinned again Bam it's not working

is there away i can change the name sticky in the CSS to pinned then make the code work that way i think making it by adding it to the ACP settings is not really changing it to its own name just masking it

Remove the text Pinned to give it a try!

yes see now the sticky is there and it has the background

Yes this is a lot easier lol
Add in your CSS:

Code:

.sticky {
    font-size: 0;
    background: #51D43E;
}
.sticky::before {
    content: "Pinned:" !important;
    font-size: 9px;
    font-weight: bold;
}

lol that sort of worked it's now called pinned:sticky

Yes yes i saw that! Try adding to the class .sticky the !important to

Code: font-size:0 !important;

it worked thank you @Luffy

Yayyy!!! Hehehe, for it's background do the same with the !important and it'll change!!

you really Don't know how hard that was and me really loosing sleep over it it's now 1:51 for me in the uk work at 7am

anyway thanks again now my mind at rest lol

THAHK YOU

Hehehe here it's 3.53am so im worst! lol i get up at 7 for my uni at 8 lol! Enjoy!