|
|
|
|
|
|
|
|
|
 Posted: Thu Aug 07, 2014 6:47 am
[ Mini Guide ]The Avatar Drop-Down Menu
This is the menu which is found in your "Details" panel on Current layouts
This thing has wayyy too many selectors emotion_zombie
Kind of just meant as a reference for me, but here you go guys ~
Customizing the entire box and drop-down menu takes quite a bit of work
If you don't want to deal with it at all, just leave it as default or remove it:
.forum_userstatus{display: none;}
Or if you only want the Online/Offline part and no menu, use this to get rid of the menu:
.pushBox, #avatar_menu{display: none !important;}
And in order to get rid of the drop-down arrow:
.statuslinks{background: transparent !important;}
|
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Thu Aug 07, 2014 6:55 am
First off, the SelectorsLike I said, this thing has a ton of selectors: 
.forum_userstatus = The box containing the Online/Offline and the drop-down arrow
#id_details .forum_userstatus .pushBox = The area you hover over in order for #avatar_menu to appear
#id_details .forum_userstatus .online = The "Online" text and emote
#id_details .forum_userstatus .offline = The "Offline" text and emote
#id_details .statuslinks =I'm not entirely sure what this is, but its background is the arrow for the drop-down menu
#avatar_menu = The actual menu that drops down (View Posts, Achievements, etc.)
#avatar_menu a = Each of the links inside of the drop-down menu
#avatar_menu li.menu_seperator = The lines which occasionally separate links in the drop-down menu
All that, just to code a little box!!
(not to mention the :hover commands for some of them)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Posted: Thu Aug 07, 2014 7:03 am
Now then, Time to CustomizeYou should be able to figure out things from here if you know the basics of CSS by reading other guides.
I'm just going to mention some of the things you might want to customize, and how to change some default parts.
.forum_userstatus
Not much you can do here besides change the border, background, and font family
#id_details .forum_userstatus .pushBox
In order to change the color of the pushbox, you will need to target its background.
#id_details .statuslinks
If you want to get rid of the arrow or change it, set this background to transparent
#id_details .forum_userstatus .online & #id_details .forum_userstatus .offline
The emote is the background image for this. You can apply a ton of font properties to this as well.
#avatar_menu
This has a default background of white, and a border around it
#avatar_menu a
Text alignment, font color, background color, transition, etc...
Make sure to target the :hover psuedo for this as well! That has a default background color!
#avatar_menu .menu_seperator
These are default gray lines. Not much to do with them besides change their color or get rid of them.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
