Latest topics
» IconSkouliki Graphics
by skouliki Yesterday at 05:08

» "Edit this page" feature
by skouliki Yesterday at 01:37

» Dark Mode + Another Question
by Haggis Thu 19 Oct 2017, 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

Recent Tutorials
Who is online?
In total there are 4 users online :: 0 Registered, 0 Hidden and 4 Guests :: 2 Bots

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 : 21
Posts : 4698
Points : 9538
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 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 : 2447
Points : 4732
Reputation : 286
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 : 21
Posts : 4698
Points : 9538
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 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 : 2447
Points : 4732
Reputation : 286
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