Latest topics
» Dark Theme Help
by Haggis Today at 01:01

» Forumactif Edge - Greek Translation
by Bigtuber Yesterday at 21:02

» [GAME] Count to One Million!
by Van-Helsing Yesterday at 19:53

» Forumactif Edge Web Page - Translations
by Ange Tuteur Yesterday at 18:06

» Quick Reply Bug
by Ange Tuteur Yesterday at 17:44

» Forumactif Edge - Portuguese Translation (Brazilian)
by Ange Tuteur Yesterday at 17:40

» Happy Birthday Thread
by Ange Tuteur Yesterday at 17:34

» Adding text to reputation counter
by Ange Tuteur Thu 23 Mar 2017, 17:19

» Forumactif Edge - Spanish Translation
by Ange Tuteur Thu 23 Mar 2017, 16:24

» How do I add hover examine feature?
by dr.kran Thu 23 Mar 2017, 06:18

» [THEME] Cosmic Sleek RED v1.1 - Phpbb3
by King Tue 21 Mar 2017, 12:39

» Forumactif Edge - Translations
by Ange Tuteur Mon 20 Mar 2017, 20:03

» [GAME] Post a random picture
by Ange Tuteur Mon 20 Mar 2017, 19:18

» IconSkouliki
by skouliki Mon 20 Mar 2017, 15:47

» Personal Rank Titles
by Harleen Mon 20 Mar 2017, 12:38

Recent Tutorials
Who is online?
In total there are 3 users online :: 1 Registered, 0 Hidden and 2 Guests :: 1 Bot

Haggis

[ 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 : 4387
Points : 9037
Reputation : 2186
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 : 2277
Points : 4326
Reputation : 271
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 : 4387
Points : 9037
Reputation : 2186
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 : 2277
Points : 4326
Reputation : 271
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