Stylize The Forumactif Toolbar Dropdowns

[Ange TuteurAdministrator]

This tutorial will help you with stylizing the drop down menus for your forumactif toolbar. For a preview see the image below.

Adding The Style

The style above is what you will get from the code later on in this post, but don't worry you can edit it to what you desire. To apply this style navigate your way to..
Admin Panel > Display > Pictures and Colors > Colors > CSS stylesheet

Paste the following code in the stylesheet and submit:

Code:

li.see_all, li.see_all a{
color:#105289 !important;
background-color:transparent !important;
}
#fa_toolbar #fa_right #notif_list li.unread{
background-color:transparent !important;
}
ul#notif_list, ul#fa_menulist{
background-color:#ECF3F7 !important;
border:none !important;
border-radius:10px;
margin-top:5px !important;
box-shadow:0px 3px 6px rgba(26, 26, 26, 0.6);
}
ul#fa_menulist{
background-image:url('http://i72.servimg.com/u/f72/18/45/41/65/5dh11.png');
background-repeat:no-repeat;
background-position:right;
}
#fa_usermenu {
border-right:1px solid #CCC;
padding-right:5px !important;
max-height:90%;
height:auto;
min-height:0%;
}

Once you have submitted the code your forumactif toolbar drop downs should now look like the image at the beginning of this tutorial. For information on editing these codes please read over the properties used in explanation. I am to notify you that the border-right has a tendency to fall off the welcome drop down if a user has a large avatar, you can either remove it or increase the size of the welcome drop down.

Explanation

I will go over some of the properties used in the CSS codes above so you can get an idea on how to personalize it for your forum.

color: Sets the text color for different elements. Values can consist of HEX, RGB, or Names
background-color: Sets the background color for different elements. Values can consist of HEX, RGB, or Names
border: Sets the border for an element.
border-radius: Rounds the corners of an element.
margin: Adds spacing around or between elements.
box-shadow: Applies a shadow to a box element.
background-image: Adds a background image to an element. Edit url('IMG SRC') with a valid image url

Thanks for reading and have fun/good luck experimenting with styles for your toolbar drop downs! ^^

Tutorial written by Ange Tuteur

[SLGrayValued Member]

Is this tutorial already included with theme of this forum?

[Ange TuteurAdministrator]

@SLGray yes, this modification is already included on the current theme !

[SLGrayValued Member]

Thanks @Ange Tuteur .

[Sponsored content]