Recent Tutorials
Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Add a classname to group member posts

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 21 Oct 2014, 18:48

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. Smile


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 ! Wink

If you have any problems you may post below.


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


Last edited by Ange Tuteur on Tue 15 Mar 2016, 06:24; edited 1 time in total
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 41
Posts : 63
Points : 999
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Thu 23 Oct 2014, 23:53

thanks Smile so much nice code 
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1371
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Sat 25 Oct 2014, 18:13

may i ask for little more Info i still confused about the script`s job :/
thanks again
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Sun 26 Oct 2014, 18:03

@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 :
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 20
Posts : 274
Points : 1559
Reputation : 85
Location : India!
Language : English, Hindi
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://tokyoghoular.foruns.com.pt/

PostRhino.Freak on Mon 27 Oct 2014, 10:44

awesome! Very Happy
Now I get how you put that little 'admin' in your posts Razz SWEET JOB MATE
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1371
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Mon 27 Oct 2014, 22:51

@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 Very Happy
my 1st time to make mistake like that Very Happy 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
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 41
Posts : 63
Points : 999
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Mon 27 Oct 2014, 23:26

try:
Code:
.adminGroup .postbody{
font-size: 28px;
text-align: center;
font-weight: bold;
line-height: 1.0em;
}
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1371
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Tue 28 Oct 2014, 00:25

@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
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 41
Posts : 63
Points : 999
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Tue 28 Oct 2014, 00:28

lol, try using !important
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 28 Oct 2014, 20:49

Try this :
Code:
.groupClass .postbody { color:red !important }

but replace groupClass by the classname for your group.
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1371
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Wed 29 Oct 2014, 09:01

the text still wont change Shocked
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
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 31 Oct 2014, 22:13

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% }
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1371
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Mon 03 Nov 2014, 05:01

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
Ch@lo Valdez

Title :
Hello!!
Gender : Male
Age : 41
Posts : 63
Points : 999
Reputation : 5
Location : Mexico
Language : eng spa
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

PostCh@lo Valdez on Mon 03 Nov 2014, 19:14

Rolling Eyes
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1371
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Tue 04 Nov 2014, 06:59

the link
https://i56.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 Smile
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 05 Nov 2014, 01:29

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. ^^
Michael_vx

Title :
Gender : Male
Age : 24
Posts : 290
Points : 1371
Reputation : 74
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Wed 05 Nov 2014, 09:32

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 Very Happy
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2310
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Sat 25 Jun 2016, 22:13

How do we change the border color of the post?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 27 Jun 2016, 11:00

Depending on your classname it'd look something like this :
Code:
.post.adminGroup { border:1px solid #C28888 }
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2310
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Tue 28 Jun 2016, 03:46

Wait so this would be the HTML after implementing your script

Code:
<div class="post adminGroup">
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8393
Reputation : 2009
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 28 Jun 2016, 09:11

By default posts have the class ".post", all the script I posted does is add a custom class for groups.
Ace 1
Valued Member
Title :
God of Creation
Gender : Male
Age : 17
Posts : 1927
Points : 2310
Reputation : 55
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Fri 01 Jul 2016, 06:16

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

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum