Background color for different group posts

Hello everyone

I apologize in advance If this has already been posted, but I haven't been able to find a solution to the specific issue.

Ok, so since my forum uses a clear Background, I decided to give it a little color. Using each group color as their post background inspired by your staff background posts, they look great! So I found this code when I was trying to find how it is used here on FM, and I decided I'd like to use just one part of it. And it worked great for my Admins following the steps with codes I found here:
https://i.servimg.com/u/f38/17/78/08/77/help_t10.png

I tried following the same steps to add a different background color for the other groups I have on my forum, but they would change all groups to the new color no matter what I tried (with my little knowledge of coding of course). So I kept searching and came across the reference for the tutorial on the fmquery forum. So after playing with it for a few days (cause I could not get it to add the background color for some reason) I actually got it to kind of work. And I say "kind of" because I now have the background for a specific group and it didn't change my Admin group color. But it is repeating on the post and I would like it to appear as on the Admin posts. Mind you I have no real clue about coding I am learning now. But I played with it all possible ways I could think of but nothing else worked besides these 2 ways:
a) this one keeping the order the same as the other code that got my Admin background working

Code:

.SouLs {
    background: url("http://i38.servimg.com/u/f38/17/78/08/77/right-11.png") repeat-y scroll right top  !important;
    }


b)this one keeping the order in which fmquery posted the code

Code:

.SouLs {
    background:  repeat-y scroll right top url("http://i38.servimg.com/u/f38/17/78/08/77/right-11.png") !important;
    }

But no matter which of the above 2 code formats I use, this is how my posts look:
https://i.servimg.com/u/f38/17/78/08/77/groups10.jpg

As you can see on circle #1 (admin post background) it doesn't repeat, as to where on circle #2 (other user group background) it repeats.

Is there a way to change this while still using all the codes from fmquery, maybe I am forgetting/missing some part?, or do I need to do it with a total different set of codes?

And just to finish this inquiry.. 1 question, do I have to add the whole set of codes for each different group background color, once it's working like I prefer, or is there another way? Curious because I know we have to add the classname in order for it to work.

Thank you in advance,
Rii

The effect will only look the same as we have here if your forum is phpBB3.

Thank you Rideem3, but sorry I don't understand. I don't want it to look exactly the same as on here, I just want the gradient effect portion of it, which I was able to get those results with the first code. All I did was just use the gradient image and left my post background clear. And it works great, exactly the effect I want. But I don't know how to add the other classes/groups to give them the same effect. Everything I try changes them all to the same exact color of the new group I try to add. That definitely defeats the purpose of the different group colors lol.
So anyway, when I used your codes for the punbb version which is the version I use, I don't see anywhere I can leave the background of posts themselves clear/empty. Could this be maybe a CSS code I am missing? Or do you mean that using your code there is no way to keep the effect on the profile section of the post instead of having it repeat to the post itself?

I have to say that I like your tutorial of adding the different background group colors because it shows us how to add/change the class name. With the first code I used for the Admins post background it was quick and easy but I have no clue how to add/change class to add the other groups since it was a copy and paste. I like learning as I go along making the different changes on my forum.
Obviously it is doable since I have its results themselves right here (effect I want for all background group colors is circle #1):
https://i.servimg.com/u/f38/17/78/08/77/groups10.jpg

So then, I guess my next question would be.. Is there a tutorial that I can follow for the 1st code I used on the Admins background posts so that I can add my other groups and have that same effect?

thank you in advance for your help,
Rii

I would love to do this if I knew how, but I am inexperienced, as I mentioned before I have very little coding knowledge.

Rii

That is the CSS code I am using

I went back and re-did everything step by step again and I still get the of circle #2

Rii

Well I really want the effect of circle #1. The coding style I don't believe is an issue for me, its a learning experience regardless. But then since I can't use the fmquery code to obtain the desired style, do you or anyone else know where I could find the full tutorial where the code nera provided is found? Sorry to be such a bother

And again thank you so much for your help Rideem
Rii



Update:
Rideem, I have not stopped searching for a way around this or how to find a way to create an id and class for the codes nera shared. But for the time being this is what I got while still using the codes provided on fmquery:
https://i.servimg.com/u/f38/17/78/08/77/new_re10.jpg
Using the gradient image with its position to the left along with this CSS code:

Code:

.SouLs {
    background: url("http://i38.servimg.com/u/f38/17/78/08/77/left-t10.png") repeat-y left top !important;
    }

I really wanted it to the right, so not 100% satisfied but I guess this will suffice

I would like, if it's ok to leave this thread open for a while to see if anyone can help me find a way to create the id and class for the codes nera shared. So they can be added for the other groups.

Other than that two question remain.
1) Do I need to repeat the whole process for each individual group?
(ei. I have five different groups, so I would have to use the full set of codes for each?)

2) Is there a limit to the amount of members that are added to each group while using these codes?

Regards,
Rii

phpbb2 colorize certain members backgrounds tutorial here finally!


CSS

Code:

.manager{
  background-color:rgba(144,144,144,0.5)!important;
}

you can change the background to what ever, do not use gradients unless image.

JS file
EDIT BETTER CODE-

Code:


//copyright 2012 NLG nextlevelgaming
$(document).ready(function() {
    var $NLG = $('.post td span a');
    $NLG.filter(':contains("TheGamer")').closest('td').removeClass('row1 row2').next('td').removeClass('row1 row2').closest('tr').addClass('manager');
  });

For multiple users-

EDITED THIS CODE FOR UPDATE AND FUNCTION REMOVES

Code:


//copyright 2012 NLG nextlevelgaming
$(document).ready(function() {
    var $NLG = $('.post td span a');
    $NLG.filter(':contains("TheGamer")').closest('td').removeClass('row1 row2').next('td').removeClass('row1 row2').closest('tr').addClass('manager'); 
    $NLG.filter(':contains("USER2")').closest('td').removeClass('row1 row2').next('td').removeClass('row1 row2').closest('tr').addClass('manager');
      $NLG.filter(':contains("USER3")').closest('td').removeClass('row1 row2').next('td').removeClass('row1 row2').closest('tr').addClass('manager');
  });

You can make each user have a different color by assigning a differnt class!
OMG I've been working on this code for ever, I won't settle for "This is not possible with phpbb2 and punbb" Because I've proven alot wrong!!!

Yay hope you enjoyed the code!

EDIT!!!ok so realizing now why you were having problems, Im sorry but I thought you had phpbb2 so i made the code for phpbb2 it's a whole different scenario for punbb. I'm working on it now

EDIT!!!ok so realizing now why you were having problems, Im sorry but I thought you had phpbb2 so i made the code for phpbb2 Sad it's a whole different scenario for punbb. I'm working on it now Smile

hehe it's ok NLG, I am still very grateful for you taking the time to do this and now sure the phpbb2 users might want to give it a go and enjoy it as well. Yes I am on punbb and I did try adding this but I failed and obviously I see why lol . I will be waiting anxiously for punbb version, go NLG!! And thank you again

You need to repeat the process for each individual user if your using fmQuery's method. However using fmQuery's method, you can style the psot beyond the background. Font color, style, etc.

Awesome Rideem, thank you, and will I have any limit as to the amount of members I can have in each group?

Thank you Rideem and thank you NLG for all your help

I've marked as solved it can be locked.

Regards,
Rii