Latest topics
» "Edit this page" feature
by skouliki Today at 01:37

» Dark Mode + Another Question
by Haggis Yesterday at 10:36

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Tue 17 Oct 2017, 15:07

» [GAME] What are you thinking right now?
by Ace 1 Tue 17 Oct 2017, 08:09

» [GAME] Count to One Million!
by Ace 1 Tue 17 Oct 2017, 08:07

» [GAME] Last Letter Game
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] World Snake
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Never have I ever..
by Ace 1 Tue 17 Oct 2017, 08:06

» [GAME] Animal Game
by universecat Mon 16 Oct 2017, 21:43

» [GAME] Post a random picture
by SLGray Mon 16 Oct 2017, 16:28

» Hi everyone!
by skouliki Mon 16 Oct 2017, 02:01

» Hai Guys~
by skouliki Mon 16 Oct 2017, 01:59

» Add a login popup for the toolbar
by Ape Sun 15 Oct 2017, 13:51

» Mobile Usability Test
by Ange Tuteur Sat 14 Oct 2017, 11:20

» Chit Chat Thread
by Ange Tuteur Sat 14 Oct 2017, 11:20

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

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9537
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
Rhino.Freak

Title :
Lord of the 7 kingdoms and protector of the realm
Gender : Male
Age : 21
Posts : 275
Points : 1877
Reputation : 86
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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9537
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 1117
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile https://fishcrazyaquatics.4umotion.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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9537
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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 ?
avatar
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 1117
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile https://fishcrazyaquatics.4umotion.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 {
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9537
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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 ?
avatar
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 1117
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile https://fishcrazyaquatics.4umotion.com/ https://www.facebook.com/pages/Fish-Crazy-Aquatics/4726729494127

PostFISH CRAZY on Wed 14 Jan 2015, 19:59

Same like your set-up
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9537
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 1117
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile https://fishcrazyaquatics.4umotion.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/
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9537
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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}
avatar
FISH CRAZY

Title :
Gender : Male
Posts : 30
Points : 1117
Reputation : 12
Location : USA
Language : English / German
Browser : Browser : Internet Explorer Forum Version : Forum Version : Other
Awards :
View all awards
View user profile https://fishcrazyaquatics.4umotion.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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9537
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
brandon_g

Title :
Gender : Unspecified
Age : 20
Posts : 447
Points : 1661
Reputation : 63
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?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9537
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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
avatar
brandon_g

Title :
Gender : Unspecified
Age : 20
Posts : 447
Points : 1661
Reputation : 63
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 .
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4698
Points : 9537
Reputation : 2337
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave 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