Group Color to CSS Class

Started by RetroX, August 11, 2011, 04:08:10 PM

Previous topic - Next topic

RetroX

Link to Mod

This mod effectively converts the online color that is set per group into a CSS class, so that group colors can be managed per skin.

Each group will inherit the "group-member" class, however, they will also inherit the "group-X" class, where X is the contents of the online color field.  The English language file has been modified slightly to account for this change, however, I'd be willing to submit translations for other languages.  You can find the string in the ManageMembers language file under 'membergroups_online_color'.

[Lucien]

Thank you for this mod, i will try it out tonight! :)
I'm using SMF 2.0.2 and SimplePortal 2.3.4

Goss

I was looking for something just like this!  I've been wanting to make my membergroup colors theme-specific.  I installed it and it's working great.  :)

I just had a question, because I'm trying to add it to some areas of my installation of SimplePortal as well.  I tried to add it in with the following code:

<div class="middletext">', $news['time'], ' ', $txt['by'], ' <span class="group-member' . (empty($group['color']) ? '' : ' group-' . $group['color']) . '">' . $news['poster']['link'] . '</span><br />', $txt['sp-articlesViews'], ': ', $news['views'], ' | ', $txt['sp-articlesComments'], ': ', $news['replies'], '</div>';

The <span class="group-member"> portion shows up just fine, but the rest of the class declaration does not show up at all.  The html output is this:

<span class="group-member"><a href="http://markedrp.com/forum/profile/?u=768">Ben</a></span>

Any ideas?

danielwmoore

This is really a great idea.  I have 57 themes, however, both dark and light colored themes, which is why I needed to be able to customize online group colors.  53 of the themes are actually all one theme, with variant color schemes for that theme.  Yes, 53 color variants.  It's a lot.

I really didn't want to sit down and figure out what colors would work with each one, because I have other problems with it as well.  The name in the post is on one background, and the name in the who's online list is on another background, and finding foreground colors to work with both is nearly impossible in many of the color variations.

Therefore, I came up with an adaptation of this mod.  I'm using black as the foreground color for all users, no matter the group.  Then, I simply change the "background color" instead of the foreground color of the group.  Hover brightens the background by adding #404040 to it.  I put a 3px padding on the left and right of the group class, and added a 3px border-radius for standard CSS3, mozilla, web-kit, and opera.  The result is awesome. 

Regular members have a grey rounded corner box, while Admins have a brown box, Moderators a green box.  It doesn't matter what theme I use them on, because it shows up on all of them. 

Awesome mod.  I had to do some manual editing to get the results I was wanting, but the mod pointed me to where all I needed to do that editing, and kept me from having to find it on my own. 

Thanks for doing the leg work on this. 

Right now I'm using this all in the CSS, like this mod does, but I'm considering changing the mod up to use the actual color assigned in the membergroup management screen as the background color instead of a foreground color.  However, that would mean quite a bit of "style" data in the actual code, which is bad practice.  However, it would allow easier assignment by people if, like me, the same color across all themes so that membergroups are more easily identifiable. 


Sheda

Hm... i installed this mod, but i don't really understand how it works.
What do i have to write into the css to change a group's color?
And is it compatible with member color link? o_o

danielwmoore

#5
EDIT:
The CSS you need to do is given as an example where the mod adds to the end of SMF's default theme's CSS file.

Sheda

Are you certain it has nothing to do with css? *points to the name of the mod*
I thought it kind of works like this: instead of using the color you input in the admin panel, you can choose any color you like in the theme's css, thus overwriting the other color.

Anyway... i would do the edits to the files myself, to make the mods compatible, but i don't really get how both of them work. Guess i will have to choose either one or the other. :-\

danielwmoore

Oops!  Wrong topic.  Ignore my previous post.  I was talking about another mod entirely that does things a bit differently.

In this particular mod, you need to:

  • In the admin panel give the online color a "name" instead of a color, like "group-mod".
  • In the CSS, make the modification, giving the group-mod a class, like in the code example below.

.group-member.group-mod, a.group-member.group-mod
{
color: #00FF00;
}
.group-mod:hover
{
color: #40FF40;
}


If you examine the end of the CSS file in SMF's default theme after installing this mod, you will see examples of how to code the CSS.

As far as whether this particular mod is compatible with the member color link mod, I have no idea, as I didn't write this one.  I would do manual edits to be certain.

I'll edit my previous post to prevent confusion from future browsers of this topic.

Sheda

#8
I see, thank you. Gonna test it tomorrow. :D

Edit:
Tested it now and i understand why they won't work together. It's because this mod already does much the same as Member Color Link. It doesn't color the names everywhere and it doesn't ask you which names to color and which ones to leave alone, but it does color the name in the online list, in the threads and in the member list. Interesting, isn't it? XD
So i guess this mod alone should do for me. If i wanna color/uncolor the names in some spots i will just code this by hand.

odie2

Hi, I have question about Group Color to CSS Class.
Colors works perfect, but now Shoutbox use this too, but it doesn't have this function, resulting in a lack of color groups.
In Shoutbox.template.php, I can't find similar code, which was in other files.
Any ideas?

(you can look, how it looks on warthunder.pl/forum/index.php)

Greetings

VeXan

Sorry if anybody gets mad at me for bumping this, but I need some help.

The install was successful, and when I put the code in the box, it looks like this:

text-shadow: 0 0 10px #006FFF;

But when I save it, it looks like this:

text-shadow: 0 0 10p

Any help?

margarett

I never used that MOD (just installed it to have a look) but you don't add CSS to the box.

This is the description:
QuoteEach group will inherit the "group-member" class, however, they will also inherit the "group-X" class, where X is the contents of the online color field.
This means that ALL membergoups get the class "group-member". You can see that this class was added to your index.css:
/********************************/
/* Group Color to CSS Class Mod */
/********************************/

/* CSS for all member links (including those without CSS classes) */
.group-member, a.group-member
{
color: #334466;
text-decoration: none;
}
.group-member:hover
{
color: #B8B8B8;
cursor: pointer;
text-decoration: underline;
}

Following the description of the MOD:
Quotethey will also inherit the "group-X" class, where X is the contents of the online color field
That means that, if you write "admin" in that box, then the membergroup will have the class "group-admin". There is already an example class ;)
/* Example groups */
.group-member.group-admin, a.group-member.group-admin
{
color: #FF0000;
}
.group-admin:hover
{
color: #FF4040;
}

So what you need to do is edit index.css, configure the layout you want in a class called "group-XXXX" (where XXXX is the name you want to give it) and then go to that membergroup and write "XXXX" (without quotes of course) in the box
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Empire KickAss

Sorry for bumping this up, but This mod no longer works on my Forum. It will not installed as The package you are trying to download or install is either corrupt or not compatible with this version of SMF.

should update this mod, or is there any other mod that will work with 2.0.9
If I helped you out in anyway can u please click this up button arrow .Thank You!!!

Mortissimov

You can try "Emulate version" in package manager.

Empire KickAss

Quote from: navMartin on March 11, 2015, 04:11:37 AM
You can try "Emulate version" in package manager.
Yeah, would be cool that the author uploaded it
If I helped you out in anyway can u please click this up button arrow .Thank You!!!

margarett

Considering that the author has no account here anymore, I'd say that it should be difficult to happen :P
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

QuoteOver 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Empire KickAss

Quote from: margarett on March 11, 2015, 05:10:45 AM
Considering that the author has no account here anymore, I'd say that it should be difficult to happen :P
Indeed, going to take time looking for this person, then he has to reopen another account. Months of work and he's answer might be no way man!
If I helped you out in anyway can u please click this up button arrow .Thank You!!!

Advertisement: