Add a classname to group member posts

This is a simple script to add a classname to the member of a group. The classname is applied to the parent, so it allows you to style any part of that group's posts.


Adding the JavaScript

Go to Administration Panel > Modules > JavaScript codes management and Create a new script.

Title : Your choice
Placement : In the topics
Paste the code below :

Code:

$(function() {
  groupMod('#C20000', 'adminGroup');
 
  function groupMod(color, classname) {$('.post:has(span[style="color:'+color+'"] strong)').addClass(classname)}
});

Modifications :
To add a classname to a group, write the following function in the script : groupMod('color','classname');

color : Insert the hex color of your group here. You can see the color of the group from the Panel of Administration : Users and Groups > Group Administration > edit

classname : Write here the classname that you want to use, to style that specific group's posts.

Altogether we have :

Code:

groupMod('#C20000', 'adminGroup');

You can copy and paste the function as much as you want to add a class to multiple groups, such as below..

Code:

$(function() {
  groupMod('#C20000', 'adminGroup');
  groupMod('#C2F200', 'modoGroup');
  groupMod('#000000', 'techGroup');
  groupMod('#0000C2', 'specGroup');

  function groupMod(color, classname) {$('.post:has(span[style="color:'+color+'"] strong)').addClass(classname)}
});

Save the script after you're finished with your changes.


Utilizing the classnames

Go to Administration Panel > Display > Colors > CSS stylesheet to write styles for your groups..

Example give the group red font on the entire post :

Code:

.adminGroup .content { color:red }

or change the background of their posts :

Code:

.post.adminGroup { background:#C28888 }

The possibilities are endless .. Explore and be creative !

If you have any problems you may post below.

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

thanks so much nice code 

may i ask for little more Info i still confused about the script`s job :/
thanks again

Michael_vx wrote:may i ask for little more Info i still confused about the script`s job :/
thanks again

It will added a classname to the posts of group members. For example, I can color the admin posts :

awesome!
Now I get how you put that little 'admin' in your posts SWEET JOB MATE

Ange Tuteur wrote:
It will added a classname to the posts of group members. For example, I can color the admin posts :

thanks so much now i understand a little and i should read better next time because i use by mistake the javascript as css
my 1st time to make mistake like that and thanks again for the tip

Ange Tuteur wrote:Utilizing the classnames

Go to Administration Panel > Display > Colors > CSS stylesheet to write styles for your groups..

Example give the group red font on the entire post :

Code:

.adminGroup .content { color:red }

im not sure if this still my mistake or not but this part not working with me can it be that code is the problem

Code:

.postbody{
font-size: 28px;
text-align: center;
font-weight: bold;
line-height: 1.0em;
}

or what ? thanks again for the help

try:

Code:

.adminGroup .postbody{
font-size: 28px;
text-align: center;
font-weight: bold;
line-height: 1.0em;
}

Ch@lo Valdez wrote:try:

Code:

.adminGroup .postbody{
font-size: 28px;
text-align: center;
font-weight: bold;
line-height: 1.0em;
}

please read better
i think we talking here about color
of the font
and i said im use this code in case if there any problems in script coding

lol, try using !important

Try this :

Code:

.groupClass .postbody { color:red !important }

but replace groupClass by the classname for your group.

the text still wont change
and i need one more help
i made this

Code:

    .post.adminGroup { background: url(http://i56.servimg.com/u/f56/18/21/60/73/bg_pos11.png) }

its working as a background but i like to have the image to fit the whole post
Stretched image in other word is this possible

Does this change the text ?

Code:

.adminGroup { color:#F66 }

and for the background, try this :

Code:

.post.adminGroup { background: url(http://i56.servimg.com/u/f56/18/21/60/73/bg_pos11.png) 0 0 / 100% 100% }

hi i think it was all my mistake i was using the code like that

Code:

/ group mod /
    .post.adminGroup { background: url(http://i56.servimg.com/u/f56/18/21/60/73/bg_pos11.png) 0 0 / 100% 100% }
/ end group mod /

when i removed the tags /*/ and /*/ the code worked

Code:

.adminGroup .postbody{
font-size: 28px;
text-align: center;
font-weight: bold;
line-height: 1.0em;
}

also worked  thanks a lot sorry again
im dumb i guess it was all my mistake
thanks again

the link
https://i.servimg.com/u/f56/18/21/60/73/bg_pos11.png
not working any more in all of sudden any way
im now testing to add Different colors to Different groups like level 1 level 2
when member have posts as level 1 will be in Group 1 and has the group 1 background and font when member get the needed posts to level 2 will be on group 2 and should have the group 2 background and font instead of the group 1 background and font any advice while im trying that to avoid problems and bugs

Oh if you're adding comments in CSS remember to add the asterisks *

Code:

/* comment */

otherwise you will create an error.

The link is currently working for me. If you're doing it for multiple groups, just make sure that they have different colors and classnames, and you should be good. ^^

okay i understand if i did not use * will make problems in CSS
thanks a lot
and the image is Weird but not to worry
ill upload a copy to my own image host

How do we change the border color of the post?

Depending on your classname it'd look something like this :

Code:

.post.adminGroup { border:1px solid #C28888 }

Wait so this would be the HTML after implementing your script

Code:

<div class="post adminGroup">

By default posts have the class ".post", all the script I posted does is add a custom class for groups.

Yeah I just wanted to know what element you were adding the class to lol