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 6 users online :: 0 Registered, 0 Hidden and 6 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Stylize The Forumactif Toolbar Dropdowns

View previous topic View next topic Go down

Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
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 Tue 20 Aug 2013, 05:50

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
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2174
Points : 4073
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Thu 10 Mar 2016, 21:26

Is this tutorial already included with theme of this forum?
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4091
Points : 8396
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 Fri 11 Mar 2016, 09:40

@SLGray yes, this modification is already included on the current theme ! Smile
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 43
Posts : 2174
Points : 4073
Reputation : 246
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on Fri 11 Mar 2016, 14:30

Thanks @Ange Tuteur .

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