IMPORTANT

FM Design will be closing soon, please click here for more information.

Latest topics
» Forum Closure
by brandon_g Yesterday at 17:00

» [GAME] Countdown from 200,000
by SLGray Sat 09 Dec 2017, 17:49

» [GAME] Count to One Million!
by SLGray Sat 09 Dec 2017, 17:49

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Asking about some plugin for Forumotion
by SarkZKalie Wed 06 Dec 2017, 09:14

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

» Support Forums and Social Networks
by SLGray Mon 04 Dec 2017, 22:38

» Browsers & Updates
by Wolfuryo Mon 04 Dec 2017, 15:20

» Logo/Favicon
by Mr_Grande Mon 04 Dec 2017, 09:55

» Broadcasting Duo
by brandon_g Sun 03 Dec 2017, 11:01

» IconSkouliki Graphics
by skouliki Thu 30 Nov 2017, 07:59

» [HELP] About Profile Cover Code
by omarpop23 Thu 30 Nov 2017, 04:17

Recent Tutorials
Who is online?
In total there are 10 users online :: 0 Registered, 0 Hidden and 10 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

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4715
Points : 9615
Reputation : 2344
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 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
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2465
Points : 4805
Reputation : 288
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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?
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4715
Points : 9615
Reputation : 2344
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 Fri 11 Mar 2016, 09:40

@SLGray yes, this modification is already included on the current theme ! Smile
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2465
Points : 4805
Reputation : 288
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
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