Theme Areas

Page Background

Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Background behind all areas Gradient 1Gradient 2

Top section

Top Section Background Background TopBackground Bottom
Top Section Borders BorderTop BorderBottom Border
Main Menu background, transparent by default Menu TopMenu Bottom
Forum Title TitleTitle Fade 
/* Top section above the navigation menu */
--top_section_border: Header
--top_section_top_border: Top border
--top_section_bottom_border: Top section lower border
--top_section: Background
--top_section_compliment: Used with above for gradient

/* Menu nav background if a different background from top_section is wanted, transparent by default */
--menu_nav_grad_1: Top Menu nav bar background
--menu_nav_grad_2: Top Menu nav bar background

Main Menu

Menu Text Color Text ColorActive Color
Active Button Background BottomBackground TopBorderBorder Top
Active Button Hover Background TopBackground Bottom
BorderBorder LeftBorder Top
Regular Button Background TopBackground Bottom
BorderBorder TopBorder Left
Regular Button Hover Background TopBackground Bottom
BorderBorder TopBorder Left
Icon Button Hover (Touch) BackgroundBorder 
--menu_text: #585858; /* used for text in menus, breadcrumbs, buttons *
--contrast_text: #FEFEFE; /* Used in shadows, backgrounds or text, where contrast is needed to background */

/* Main Menu Active Button */
--menu_button_active:  Link, list, breadcrumb active/hover colors (gradient and color)
--menu_button_active_2: Compliment gradient color for above
--menu_button_border_active: Active border color
--menu_button_border_active_top: Active top border

--menu_button_active_hover: Hover Link, list, breadcrumb active/hover colors
--menu_button_active_hover_2: Hover Compliment gradient color for above
--menu_border_active_hover_top: Hover Active menu border color top
--menu_border_active_hover_left: Hover Active menu border color left
--menu_border_active_hover: Hover / active border

/* Main Menu Regular Buttons */
--menu_border: linklevel 1 border
--menu_border_top:
--menu_border_left:
--menu_background: linklevel 1 background
--menu_background_compliment: for above color

--menu_border_hover_top: #CFCFCF; /*  menu border color top */
--menu_border_hover_left: #BFBFBF; /* menu border color left */
--menu_border_hover: #CCCCCC; /* Hover border */
--menu_button_hover_background: #F0F0F0; /* A background used on non active menu hovers */
--menu_dropdown_indicator: #CFCFCF; /* dropdown menu indicator */

/* Icon menu (small screen) hover/touch background */
--icon_menu_hover:
--icon_menu_hover_border:

Inputs, text, checkbox, radio, etc

General Input Controls BackgroundDisabledBorderText Color
Hover/Focus Options BackgroundBorderFocusText Color 
/* Input controls, input, button, select, textarea */
--input_background: /* Generic inputs background */
--input_disabled_background: /* Disabled button background */
--input_border: /* Generic inputs border */
--input_text: #585858; /* input text */

--input_border_hover: #3D6E32; /* Hover for inputs */
--input_border_focus: #3D6E32; /* Focus for inputs */
--input_background_hover: #FEFEFE; /* Hover background */
--input_hover_text: #444444; /* When you need a darker text color on hover or elsewhere */

Submit buttons for forms

Submit Links
Form Submits Background TopBackground BottomShadow
BorderBorder TopBorder Left
Hover/Focus Options BackgroundShadow
BorderBorder TopBorder Left 
/* Submit controls */
--input_submit_background: /* background */
--input_submit_background_compliment: /* Used as gradient */
--input_submit_border: /* Overall border */
--input_submit_border_top: /* complimentary for inset effects */
--input_submit_border_left: /* complimentary for inset effects */
--input_submit_shadow: /* box shadow */

/* Submit hover effects */
--input_submit_background_hover: /* background */
--input_submit_border_hover: /* border on hover */
--input_submit_border_top_hover: /* complimentary for inset effects */
--input_submit_border_left_hover: /* complimentary for inset effects */
--input_submit_shadow_hover: /* box shadow */

Section Headers

Main Headers

Content Headers

Secondary/Category Header

Backgrounds Background TopMain BottomCategory BottomSecondary Bottom
Border Options BorderBorder TopBorder Bottom
BorderBorder TopBorder Bottom 
/* Category Headers */
--category_header_grad_1: #FAFAFA; /* 1-2 main header */
--category_header_grad_2: #EAEAEA; /* 1-3 category */
--category_header_grad_3: #E4E4E4; /* 1-4 secondary */
--category_header_grad_4: #EBEBEB; /* end of */

--category_header_text: #566450; /* Text in the category bars */

--category_border: /* Main border color used around most everything that has a border */
--category_border_top:
--category_border_bottom:;
--secondary_category_border: /* darker border */
--secondary_category_border_top:
--secondary_category_bottom:

Backgrounds

Primary Content Background. Used in most places, .content class
Content background, used on some table rows, code blocks, well, etc
The news section when enabled
The forum post background
If forum post stripping is wanted
Backgrounds ContentForum CategoryPrimary ContentNews Section
Forum Post SectionForum Post Alternative 
/* Backgrounds */
--content_background: /* Background for many divs, input controls, etc */
--forum_category: /* Category background, seen as line separators */
--primary_content_background: /* Used in many backgrounds */

Text Colors

Body Text
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Emphasize Text
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Strong Text (table headers etc)
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Highlight Text, select some to see


Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Text Colors Body TextEmphasize TextStrong TextHighlight Text 
--emphasize_text: #444444; /* When you need a darker text color on hover or elsewhere */
--body_text: #585858; /* Body text, text areas, editor, inputs, more */
--strong_text: #686868; /* like a demi bold */
--user_highlight: #D8FFDF; /* User highlighted text */

Special Containers

Description
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Information
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Success
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis
Info
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis
Warning
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis
Error
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis
Special Container Colors DescriptionInformation
Notice Boxes Success BoxSuccess BorderInfo BoxInfo Border
Warn BoxWarn BorderError BoxError Border 
--information: #F0F6F0; /* information box background */
--description: #E8F4F8; /* description div background */
--successbox: #EEFFEE; /* success box background */
--successbox_border: #008000;
--infobox: #D9EDF7; /* Infobox div background */
--infobox_border: #3A87AD; /* Infobox border */
--errorbox: #FFEEEE;
--errorbox_border: #A80000;
--warningbox: #FFF5CD;
--warningbox_border: #FFA500;

Overview

Save custom.css View custom.css
Warning
  • A Warning to you!

Board Title

Board Description
 

Topic you have posted in
Poll

Locked Topic
Pinned Topic