Latest topics
» FM Themes
by SLGray Today at 16:48

» User - Made Creations
by SLGray Today at 16:48

» The Football Forums
by Mati Today at 15:22

» [BUG] Avatar doesn't resize when reading the profile
by Samantha NL Today at 12:33

» Search Bar Options
by Samantha NL Today at 11:38

» Chit Chat Thread
by Jazeon Today at 05:42

» Christmas logo
by Teo! Today at 03:56

» SyncEditor
by keko_ferkeko Today at 00:31

» Private message bg color
by Mr.Alam Yesterday at 22:54

» Multi-step Login Form
by Samantha NL Yesterday at 12:54

» Member of the Month
by Samantha NL Yesterday at 12:38

» Forumactif Edge - Dutch Translation
by Samantha NL Yesterday at 10:49

» Widget : Staff Online
by Samantha NL Yesterday at 10:39

» Questions about styling the Main Search Box
by Samantha NL Yesterday at 10:24

» Found a typo in your default Edge CSS
by Samantha NL Yesterday at 03:07

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 caption to group members

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 12 Jan 2015, 08:20

This is a neat little trick with CSS that I've forgot about ages ago. I was originally gonna post it on the support back in 2013 but I don't know what happened. Shocked Anywho, it's basically a tooltip made purely with CSS, which can be applied to group members.


( Yeah, I found that old image floating somewhere, the nostalgia.. Razz )


The CSS

Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following code into your stylesheet.
Code:
a span[style="color:HEX_COLOR"] strong { position:relative; }
a span[style="color:HEX_COLOR"] strong:hover:after {
  background-color:rgba(0,0,0, 0.5);
  content:"Administrator";
  border-radius:5px;
  font-weight:bold;
  font-size:10px;
  padding:2px;
  color:#FFF;
  position:absolute;
  top:-15px;
  right:0px;
  display:inline-block;
  white-space:nowrap;
  z-index:1;
}

Where you see "Administrator", that is the texts which will display on hover. You can change Administrator to whatever you like. In some case you may need to adjust the positioning, if so, simply change the following values. top moves the caption up and down, and right moves it left and right, you can use positive and negative values.
Code:
  top:-15px;
  right:0px;

Now for the important part. So it works for the group you want it to, go to Administration Panel > Users & Groups > Groups > Group Administration

Edit the group you want to apply this to, look to 'Group Members Color' and copy or write down its hex color. Once you have the hex color of your group, replace both HEX_COLOR in the CSS above with the code.

If you want to have the effect on multiple groups, simply copy and paste the code, but make sure to change the hex color code ! The rest is up to you, you can change the style, apply the effect to other elements, and more.. Be creative !! Now I will end with one of those annoying hello world examples .. to show you the possibilities... Razz

If you have any questions or what not, you may leave them below.. Have fun !! I love you


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:22; edited 1 time in total
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 20
Posts : 274
Points : 1560
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 Wed 14 Jan 2015, 07:46

YAY MORE CUTE AVATARS XD

Nice little trick XD some forums would find it really useful.
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 14 Jan 2015, 16:04

I think I used it on the support way back, or maybe it was another one. I don't remember, but I know I used it here ! lol!

Thanks ! You can also apply it to a single member using the URL. Take the CSS below as an example. You'll see how I share the properties that don't change, this way you only need to add the selector rather than pasting the whole big code multiple times.

Code:
a[href="/u1"], a[href="/u2"], a[href="/u3"] { position:relative; }
a[href="/u1"]:hover:after, a[href="/u2"]:hover:after, a[href="/u3"]:hover:after {
  color:#FFF;
  font-weight:bold;
  font-size:10px;
  border-radius:5px;
  padding:2px;
  display:inline-block;
  white-space:nowrap;
  position:absolute;
  top:-15px;
  right:0px;
  z-index:1;
}

/* Ange */
a[href="/u1"]:hover:after {
  background-color:rgba(200,0,100, 0.5);
  content:"Miou";
}

/* Deux */
a[href="/u2"]:hover:after {
  background-color:rgba(0,50,75, 0.5);
  content:"Number 2";
}

/* Anlutaire */
a[href="/u3"]:hover:after {
  background-color:rgba(150,0,75, 0.5);
  content:"Formerly the tester";
}

Then all you need to do is create a rule with the unique properties such as the background color and content ! Smile
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 802
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://fishcrazyaquatics.4umotion.com/ https://www.facebook.com/https://www.facebook.com/pages/Fish-Crazy-Aquatics/4726729494127

PostFISH CRAZY on Wed 14 Jan 2015, 19:04

Hi Ange Tuteur
Did not get the group members one to work on my phpbb3 or my phpbb2 scratch
But this new code works in my phpbb3 still need to install it in my phpbb2 nice work Very Happy
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 14 Jan 2015, 19:42

@FISH CRAZY, I forgot to mention, did you make sure the group members are colored ?
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 802
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://fishcrazyaquatics.4umotion.com/ https://www.facebook.com/https://www.facebook.com/pages/Fish-Crazy-Aquatics/4726729494127

PostFISH CRAZY on Wed 14 Jan 2015, 19:50

Yes I did like this
Code:
a span[style="color:#2E89FF"] strong { position:relative; }
a span[style="color:#2E89FF"] strong:hover:after {
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 14 Jan 2015, 19:51

I meant, are the members colored on the forum, like how my name is colored in posts ?
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 802
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://fishcrazyaquatics.4umotion.com/ https://www.facebook.com/https://www.facebook.com/pages/Fish-Crazy-Aquatics/4726729494127

PostFISH CRAZY on Wed 14 Jan 2015, 19:59

Same like your set-up
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 14 Jan 2015, 20:04

Could you provide the URL of the forum ?

thanks Smile
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 802
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://fishcrazyaquatics.4umotion.com/ https://www.facebook.com/https://www.facebook.com/pages/Fish-Crazy-Aquatics/4726729494127

PostFISH CRAZY on Wed 14 Jan 2015, 20:08

I did remove the code
my URL http://ghostshauntings.forumotion.com/
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 14 Jan 2015, 20:41

Actually I think there might be an error in your sheet there. Try placing the code at the VERY top.

and replace this :
Code:
css = '.loginForm,.loginOverlay{position:fixed;display:none}.loginForm{background:#FBFBFB;border:1px solid #CCC;border-radius:3px;padding:5%;top:20%;left:20%;right:20%;z-index: 999;}@media(max-width:500px){.loginForm{background-image:none}}@media(min-width:1000px){.loginForm{left:25%;right:25%}}.loginForm .loginTitle{font-size:12px;margin:5px 0;}.loginOverlay{background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);left:0;top:0;right:0;bottom:0;z-index: 999;cursor:pointer}.loginForm div { text-align:center; }.loginForm .inputbox {font-size:14px;height:25px;width:50% !important;border-radius:3px;padding-left:30px;}.loginForm input{margin:5px 0 !important}.loginForm .button1 {font-size:14px;padding:10px 15px !important;width:54% !important}#fa_username {background:url(http://i59.servimg.com/u/f59/18/21/60/73/un10.png) no-repeat 8px center #FFF}#fa_password {background:url(http://i59.servimg.com/u/f59/18/45/41/65/pw10.png) no-repeat 10px center #FFF}'

With this :
Code:
.loginForm,.loginOverlay{position:fixed;display:none}.loginForm{background:#FBFBFB;border:1px solid #CCC;border-radius:3px;padding:5%;top:20%;left:20%;right:20%;z-index: 999;}@media(max-width:500px){.loginForm{background-image:none}}@media(min-width:1000px){.loginForm{left:25%;right:25%}}.loginForm .loginTitle{font-size:12px;margin:5px 0;}.loginOverlay{background:url(http://i39.servimg.com/u/f39/18/21/41/30/overla10.png);left:0;top:0;right:0;bottom:0;z-index: 999;cursor:pointer}.loginForm div { text-align:center; }.loginForm .inputbox {font-size:14px;height:25px;width:50% !important;border-radius:3px;padding-left:30px;}.loginForm input{margin:5px 0 !important}.loginForm .button1 {font-size:14px;padding:10px 15px !important;width:54% !important}#fa_username {background:url(http://i59.servimg.com/u/f59/18/21/60/73/un10.png) no-repeat 8px center #FFF}#fa_password {background:url(http://i59.servimg.com/u/f59/18/45/41/65/pw10.png) no-repeat 10px center #FFF}
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 802
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://fishcrazyaquatics.4umotion.com/ https://www.facebook.com/https://www.facebook.com/pages/Fish-Crazy-Aquatics/4726729494127

PostFISH CRAZY on Wed 14 Jan 2015, 21:56

I have replace the code with the new one Smile  Thanks for the help with the code
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 14 Jan 2015, 22:22

You're welcome Very Happy
brandon_g

Title :
Gender : Unspecified
Age : 19
Posts : 431
Points : 1329
Reputation : 62
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Thu 15 Jan 2015, 21:58

Ange is this for placing it over the avatar?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 Thu 15 Jan 2015, 22:05

@brandon_g

This type of selector checking the style attribute for the group color, only works on usernames.
Code:
a span[style="color:HEX_COLOR"] strong

This type of selector checks the URL of a link, it works on both usernames and avatars if you use it as is.
Code:
a[href="/u1"]

/u1 = founder account = ME ! Razz
brandon_g

Title :
Gender : Unspecified
Age : 19
Posts : 431
Points : 1329
Reputation : 62
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Thu 15 Jan 2015, 22:27

So what exactly does it do, everyone who is important already has a fancy rank Very Happy .
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8395
Reputation : 2010
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 Thu 15 Jan 2015, 22:54

When you hover over a group member's username anywhere on the forum, you can make it display the group rank. For example :

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