Sticky / Pinned text background codes

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

Hey @APE,

Could you send us a link of a forum that contains a pinned topic to see what's wrong?

Luffy

its in my profile

When I check the CSS, I only see a background image.

This is what i Dont get lol it works for all the rest but not for that one the full code is in the top post lol

Did you change this part:

Code:


$(document).ready(function() {
      $('dd.dterm strong:contains("Sticky")').each(function(){
       $(this).addClass('sticky');
       });
        });

To:

Code:

$(document).ready(function() {
       $('dd.dterm strong:contains("Pinned")').each(function(){
       $(this).addClass('pinned');
       });
       });


Yes
it has a code for sticky and one for pinned
i removed the sticky code but still nothing

Change this:

Code:

.an, .g-a,.sticky{

To:

Code:

.an, .g-a,.pinned{

This is the Code for Pinned
Java.....

Code:

$(document).ready(function() {
        $('dd.dterm strong:contains("Pinned")').each(function(){
        $(this).addClass('P-D');
        });
        });

CSS.......

Code:

.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;
}

@APE the pinned is not with bold letters. Try either making it bold or try replacing the javascript with this one:

Code:

$(document).ready(function() {
        $('dd.dterm:contains("Pinned")').each(function(){
        $(this).addClass('P-D');
        });
        });

I am not sure it'll work like this but you can change it if it's wrong!

Luffy wrote:@APE the pinned is not with bold letters. Try either making it bold or try replacing the javascript with this one:

Code:

$(document).ready(function() {
        $('dd.dterm:contains("Pinned")').each(function(){
        $(this).addClass('P-D');
        });
        });

I am not sure it'll work like this but you can change it if it's wrong!

it sort of worked lol it worked as putting the background on like it should do but now the Box is going right across the page


Not sure why as its the same Code as the rest i am using just colour change thats it

bump

Hey @APE,

Try the default one you used to have before and try making the text Pinned with bold letters and see if it works. I think that's why it is not working.

I have done and still nothing
i made it bold by CSS but still come out with no background at all.

The only time the background come up was when i removed the code and added yours but then the background become big and i could not change it

Can you make it with the background as you showed above to give it a look via element?

lol Don't know how to lol still trying to work all this code stuff out my self.... just cant get my little head round it all

APE wrote:

Luffy wrote:@APE the pinned is not with bold letters. Try either making it bold or try replacing the javascript with this one:

Code:

$(document).ready(function() {
        $('dd.dterm:contains("Pinned")').each(function(){
        $(this).addClass('P-D');
        });
        });

I am not sure it'll work like this but you can change it if it's wrong!

it sort of worked lol it worked as putting the background on like it should do but now the Box is going right across the page


Not sure why as its the same Code as the rest i am using just colour change thats it

Add this code once more to give the result a look and see what's wrong with it!

ive added it again but i still can't work out why its messing up

I cannot see it as the image.

sorry i was playing with the code's lol

http://www.achatworld.com/f28-site-news-updates

It makes the whole line like that because the code adds the class to the dterm element and that's the line.
May i ask what do you have when you go to
ACP(Admin Control Panel) > General > Messages and e-mails > Configuration > Messages
where it says about the Pinned and for the rest?

That are blank all but the pinned one that was sticky renamed pinned

The field you have for your pinned can you change it to:

Code: <strong>Pinned</strong>

and retry adding your default code to see if it works?

lol nope now it puts the word <strong> in the box to lol

Ok remove that lol.
Go to:
Admin Panel > Display > Templates > topic_list_box
and search for:

Code: {topics_list_box.row.topic.table_sticky.L_TITLE}

and replace it with:

Code: <strong>{topics_list_box.row.topic.table_sticky.L_TITLE}</strong>

Save and publish it and lets hope it'll work!

Nope lol still nothing

Silly me. The Pinned field must be a sceditor field. Try adding in the sticky field

Code: [b]Pinned:[/b]

and try it out. I think now it'll work..

Edit: Nah it doesn't! Hehe just give me some moments to give it one more look cause i am writing the first thing that comes to my head!

Nope still nothing

Did you empty the field and for the word sticky it worked?