Simple Machines Community Forum

SMF Support => SMF 2.0.x Support => Topic started by: PaxDax on May 14, 2018, 11:22:45 PM

Title: Custom CSS in membergroup
Post by: PaxDax on May 14, 2018, 11:22:45 PM
Hi guys, i want something like this:

(https://i.imgur.com/N5VqyEy.png)

I just want to add like that, custom CSS to my Admin Group and Mod Group, with different colors to look like that in posts.

This is the code they are using that i don't know where to put:

<li class="membergroup" style="color: #FFF; text-shadow: 0 1px 0 #000; border-radius: 4px;width: 136px;line-height: 19px;margin-bottom: 3px;background-color: #FF0000">Fundador</li>
Title: Re: Custom CSS in membergroup
Post by: Kindred on May 15, 2018, 12:55:05 AM
Those are images, not css
Title: Re: Custom CSS in membergroup
Post by: Sir Osis of Liver on May 15, 2018, 01:05:54 AM
Actually, it's not an image, it's html/css.

Display.template.php



echo '
<li class="stars">', $message['member']['group_stars'], '</li>';

echo '
<li class="membergroup" style="color: #FFF; text-shadow: 0 1px 0 #000; border-radius: 4px;width: 136px;line-height: 19px;margin-bottom: 3px;background-color: #FF0000; text-align: center;">Fundador</li>';


// Show avatars, images, etc.?



Something like that, you can play with the formatting.
Title: Re: Custom CSS in membergroup
Post by: PaxDax on May 15, 2018, 02:36:40 AM
Quote from: Sir Osis of Liver on May 15, 2018, 01:05:54 AM
Actually, it's not an image, it's html/css.

Display.template.php



echo '
<li class="stars">', $message['member']['group_stars'], '</li>';

echo '
<li class="membergroup" style="color: #FFF; text-shadow: 0 1px 0 #000; border-radius: 4px;width: 136px;line-height: 19px;margin-bottom: 3px;background-color: #FF0000; text-align: center;">Fundador</li>';


// Show avatars, images, etc.?



Something like that, you can play with the formatting.

Hey, thanks for the support, the problem is that depending on the user group they change color, title and design. If is Mods Group, design changes to green with other shadows, Admins Group it changes again, etc. With this code the design changes for all groups, not only Mods or Admins or only one.
Title: Re: Custom CSS in membergroup
Post by: Sir Osis of Liver on May 15, 2018, 05:06:05 PM
You'd have to use if statements that identify primary membergroup and display the appropriate badge.  Like this -



if ($user_info['groups']['0'] == 1)
echo '
<li class="membergroup" style="color: #FFF; text-shadow: 0 1px 0 #000; border-radius: 4px;width: 136px;line-height: 19px;margin-bottom: 3px;background-color: #FF0000; text-align: center;">Admin</li>';


if ($user_info['groups']['0'] == 3)
echo '
<li class="membergroup" style="color: #FFF; text-shadow: 0 1px 0 #000; border-radius: 4px;width: 136px;line-height: 19px;margin-bottom: 3px;background-color: #00FF00; text-align: center;">Moderator</li>';



You can clean it up by putting most of the formatting in 'membergroup' class in index.css, just leave the color and title in template code.

Title: Re: Custom CSS in membergroup
Post by: PaxDax on May 16, 2018, 06:54:36 AM
Quote from: Sir Osis of Liver on May 15, 2018, 05:06:05 PM
You'd have to use if statements that identify primary membergroup and display the appropriate badge.  Like this -



if ($user_info['groups']['0'] == 1)
echo '
<li class="membergroup" style="color: #FFF; text-shadow: 0 1px 0 #000; border-radius: 4px;width: 136px;line-height: 19px;margin-bottom: 3px;background-color: #FF0000; text-align: center;">Admin</li>';


if ($user_info['groups']['0'] == 3)
echo '
<li class="membergroup" style="color: #FFF; text-shadow: 0 1px 0 #000; border-radius: 4px;width: 136px;line-height: 19px;margin-bottom: 3px;background-color: #00FF00; text-align: center;">Moderator</li>';



You can clean it up by putting most of the formatting in 'membergroup' class in index.css, just leave the color and title in template code.

Working, thanks for helping me, appreciate it.