Custom bg code

So, I am trying to allow custom backgrounds for admins and mods. I remember reading a thread that had a code

Code:

$(function(e) {
$('.post:contains(Admin or Mod)').css('background-color','red');
});

Now, I entered this in the CSS under the Colours and backgrounds for common.css

Thing is, it never worked. Is there supposed to be an extra add on and stuff?

Forum here:

http://narutobuddy.forumotion.com/

Thanks!

-FrostByte-

Use this code instead:

Code:

$(function() {
$('div.post:has(".admin1")').css('background','#F00 url(http://i.imgur.com/BVlbi.png) repeat-y');
});

Also when you add it make sure you check the box that says in all pages.
Now
If you use this code make sure in Rank Administration the Rank title is

Code:


    <span class="admin1">Rank Title Here</span>

You can also give this a read.
https://help.forumotion.com/t123317-change-the-post-background-color-of-a-specific-user

Look for the post by sir chavis.

Here's what happened.... this is the code for the CSS total

Code:

/*     
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */
$(function() {
$('div.post:has(".admin1")').css('background','#F00 url(http://i.imgur.com/BVlbi.png) repeat-y');
});
}
html, body {
   color: #536482;
   background-color: #373737;
}


h1 {
   color: #FFFFFF;
}

h2 {
   color: #28313F;
}

h3 {
   border-bottom-color: #CCCCCC;
   color: #115098;
}

hr {
   border-color: #FFFFFF;
   border-top-color: #CCCCCC;
}

hr.dashed {
   border-top-color: #CCCCCC;
}

I changed the rank administrator the that:

Code:

 <span class="admin1">Administrator</span>

Yet it still doesn't work. I thought I got close though.

I did what you did and all it did was change my text humm... Im still looking in to it to see how to do it for you


Ok so i found out how to do it;

FrostByte wrote:Here's what happened.... this is the code for the CSS total

Code:

/*     
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */
$(function() {
$('div.post:has(".admin1")').css('background','#F00 url(http://i.imgur.com/BVlbi.png) repeat-y');
});
}
html, body {
   color: #536482;
   background-color: #373737;
}


h1 {
   color: #FFFFFF;
}

h2 {
   color: #28313F;
}

h3 {
   border-bottom-color: #CCCCCC;
   color: #115098;
}

hr {
   border-color: #FFFFFF;
   border-top-color: #CCCCCC;
}

hr.dashed {
   border-top-color: #CCCCCC;
}

I changed the rank administrator the that:

Code:

 <span class="admin1">Administrator</span>

Yet it still doesn't work. I thought I got close though.

Remove all of that form your forum

Now in Rank Administration set the Rank title to

Code:

<span class="Administrator">Administrator</span>

Then add this to Java script management

Code:

$(function() {
   $('.Administrator').Administrator('.post').addClass('Administrator-answer');
   });

Make sure its set to all pages.

And now add this to your CSS style sheet:

Code:

.post.online.Administrator-answer {
       background: url("http://i.imgur.com/BVlbi.png") repeat-y scroll left top, url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top #E5F1F9;
       }
       .post.Administrator-answer {
       background: url("http://i.imgur.com/BVlbi.png") repeat-y scroll left top #E5F1F9;
       }

I Modfied it from a nother post to fit your needs hope i did it right.
This is where i got the code to modify for you:
https://help.forumotion.com/t112318-helpgroup-backgrounds#736903

When you say delete..... do you mean delete all the CSS? O.o
Or just the add on and leave the original stuff there?

Code:

/*   
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */
$(function() {
$('div.post:has(".admin1")').css('background','#F00 url(http://i.imgur.com/BVlbi.png) repeat-y');
});  < Remove just this?
}
html, body {
  color: #536482;
  background-color: #373737;
}


h1 {
  color: #FFFFFF;
}

h2 {
  color: #28313F;
}

h3 {
  border-bottom-color: #CCCCCC;
  color: #115098;
}

hr {
  border-color: #FFFFFF;
  border-top-color: #CCCCCC;
}

hr.dashed {
  border-top-color: #CCCCCC;
}

Ok, so I did that. Here is the current CSS.

Code:

/*     
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */
html, body {
   color: #536482;
   background-color: #373737;
}

h1 {
   color: #FFFFFF;
}

h2 {
   color: #28313F;
}

h3 {
   border-bottom-color: #CCCCCC;
   color: #115098;
}

hr {
   border-color: #FFFFFF;
   border-top-color: #CCCCCC;
}

hr.dashed {
   border-top-color: #CCCCCC;
}

.post.online.Administrator-answer {
      background: url("http://i.imgur.com/BVlbi.png") repeat-y scroll left top, url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top #E5F1F9;
      }
      .post.Administrator-answer {
      background: url("http://i.imgur.com/BVlbi.png") repeat-y scroll left top #E5F1F9;
      }

I don't know if I am supposed to remove EVERYTHING else besides that code? It still didn't show up, and it's set to all pages o.o

remove just this:

Code:

$(function() {
$('div.post:has(".admin1")').css('background','#F00 url(http://i.imgur.com/BVlbi.png) repeat-y');
});

So yes remove the add on and leave the orginal stuff.
i also had to tweak the code again so re read it i had to edit in a part i missed

Ok, here is the current code for the CSS

Code:

/*   
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */
html, body {
  color: #536482;
  background-color: #373737;
}

h1 {
  color: #FFFFFF;
}

h2 {
  color: #28313F;
}

h3 {
  border-bottom-color: #CCCCCC;
  color: #115098;
}

hr {
  border-color: #FFFFFF;
  border-top-color: #CCCCCC;
}

hr.dashed {
  border-top-color: #CCCCCC;
}

.post.online.Administrator-answer {
      background: url("http://i.imgur.com/BVlbi.png") repeat-y scroll left top, url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top #E5F1F9;
      }
      .post.Administrator-answer {
      background: url("http://i.imgur.com/BVlbi.png") repeat-y scroll left top #E5F1F9;
      }

JS page managerment(Named Custom bg)

Code:

$(function() {
  $('.Administrator').Administrator('.post').addClass('Administrator-answer');
  });

Rank title is:

Code:

<span class="Administrator">Administrator</span>

Still isn't showing up. It's still showing the plain white bg.

Then try removeing everything from CSS.
and leaving just
.

Code:

post.online.Administrator-answer {
      background: url("http://i.imgur.com/BVlbi.png") repeat-y scroll left top, url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top #E5F1F9;
      }
      .post.Administrator-answer {
      background: url("http://i.imgur.com/BVlbi.png") repeat-y scroll left top #E5F1F9;
      }

And replace this in the java management page:

Code:

$(function() {
  $('.Administrator').closest('.post').addClass('Administrator-answer');
  });

You can always re enter it if it does not work!
But if it does not, Then The only other thing i can think of is when i altered it i messeed it up so follow the exact way its written here:help.forumotion.com/t112318-helpgroup-backgrounds#736903

Tis my mistake. I forgot to enable it.

Thanks a lot! It works xD

*Mark as solved*

Ok Good what Code did you end yup Using, that way i can Mark at as this one to use, So others will know

CSS code:

Code:

.post.online.Administrator-answer {
      background: url("http://i.imgur.com/kFOpiqv.jpg") repeat-y scroll left top, url("http://2img.net/i/fa/prosilver/icon_user_online_en.png") no-repeat scroll right top #E5F1F9;
      }
      .post.Administrator-answer {
      background: url("http://i.imgur.com/kFOpiqv.jpg") repeat-y scroll left top #E5F1F9;
      }

Js manager code:

Code:

$(function() {
$('.Administrator').closest('.post').addClass('Administrator-answer');
});

Rank title:

Code:

<span class="Administrator">Administrator</span>

I changed the CSS picture to my own pic. But it worked. Thanks!