ElkArte Theme Color Editor

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

CSS Variables Reference

/* 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

BorderBorder TopBorder Left

Dropdown Indicator

Icon Button Hover (Touch) BackgroundBorder

CSS Variables Reference

--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:

Footer

Footer Area, below all areas BackgroundTop BorderText Color

CSS Variables Reference

/* Footer */
--footer_text: /* Text used in the footer */
--footer_background: /* Footer Background */
--footer_top_border: /* Border that separates footer from body */
RSS Feeds background is same as primary content background

Inputs, text, checkbox, radio, etc

Selects
Text

Checkbox

Disabled

Radio

Textbox

General Input Controls BackgroundDisabledBorderText Color

Hover/Focus Options BackgroundBorderFocusText Color

CSS Variables Reference

/* 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

CSS Variables Reference

/* 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 Text Color

Background TopMain BottomCategory BottomSecondary Bottom

Border Options BorderBorder TopBorder Bottom

BorderBorder TopBorder Bottom

CSS Variables Reference

/* 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

Page & Utility Backgrounds HTML BackgroundMid GreyDark BackgroundBox Shadow Color

CSS Variables Reference

/* 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 */
--news_background: /* Background of the news section */
--forum_posts: /* Post background */
--forum_posts_alternative: /* Alternate post background for stripping */

/* Page & Utility */
--html_background: /* html element background, visible on short pages and in footer */
--mid_grey_background: /* Used in topic list, drop areas, description_board, attachment details, etc */
--dark_background: /* Slightly darker, e.g. offline icon gradient */
--box_shadow: /* Color used in many box-shadow declarations */

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

Contrast TextContrast Compliment

Disabled TextDebug Text

CSS Variables Reference

--body_text: #585858; /* Body text, text areas, editor, inputs, more */
--emphasize_text: #444444; /* Darker text for hover states and emphasis */
--strong_text: #686868; /* Like a demi-bold, used in table headers etc */
--user_highlight: #D8FFDF; /* User text selection highlight */

--contrast_text: #FEFEFE; /* Used where contrast against a dark background is needed */
--contrast_text_compliment: #E4E4E4; /* Gradient partner to contrast_text */

--disabled_text: #888888; /* Disabled items, mainly in ACP */
--debug_text: #359D27; /* Debug info rendered on the footer background */

Links & Input Validation

Normal Links

Standard body link: Visit this page — visited: Already visited

BBC content link: A link inside a post

Search result: highlighted keyword found in a post.

Valid & Invalid Input Backgrounds

Valid Input
Invalid Input

Link Colors Normal LinksBBC LinksSearch Highlight

Input Validation Backgrounds Valid InputInvalid Input

CSS Variables Reference

--links: #435C38; /* Normal a, a:link, a:visited color */
--bbclinks: #435C38; /* Links inside BBC post content */
--search_highlight: #FF7200; /* Search results keyword highlight color */

--valid: #EBFFD8; /* Background applied to valid form inputs */
--invalid: #FFEEEE; /* Background applied to invalid form inputs */

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;

Semantic Colors

✓ Success — post saved, action completed.

✗ Alert — form error, access denied.

⚠ Warning — moderate action needed.

New Posts Requires Approval

Notice/approval background — used on rows awaiting moderation.

Moderation warning box.

Error — this field is required.

Status Colors SuccessAlertAttentionWarn

Action & Notice Action AvailableNotice Background

CSS Variables Reference

--success: #008000; /* Success text, borders, and backgrounds (progress, warn_watch) */
--alert: #E00000; /* Error/alert text and borders (.error, .alert, .warn_mute) */
--attention: #A80000; /* Stronger red — moderation notices, errorbox border */
--warn: #FFA500; /* Warning text/border/background (.warn_moderate, .softalert) */

--action_available: #21873C; /* "New Topic" button, approval links, .new_posts */
--notice: #FFF5CD; /* Pale background for approval/warning rows and sticky notes */

Borders & Shadows

Primary border — used around most content areas.

Secondary border — slightly darker, used for inset effects.

Contrast border — darkest, used on progress bars.

Low elevation

Medium elevation

High elevation

Primary Borders BorderBorder TopBorder LeftBorder Bottom

Secondary Borders BorderBorder TopBorder LeftBorder Bottom

HR & Contrast HR TopHR BottomHR FillContrast Border

Box Shadow Preset

Shadows use a three-stop elevation system. Choose a colour tone — the three elevation levels are generated automatically.

Shadow tone:

CSS Variables Reference

/* Primary borders — used on .content, fieldsets, news, breadcrumbs, tables */
--primary_border: #CCCCCC;
--primary_border_top: #DDDDDD;
--primary_border_left: #C7C7C7;
--primary_border_bottom: #CCCCCC;

/* Secondary borders — darker inset / shadow effects */
--secondary_border: #AFAFAF;
--secondary_border_top: #CFCFCF;
--secondary_border_left: #BFBFBF;
--secondary_border_bottom: #BBBBBB;

/* HR rule */
--hr_border_top: #BBBBBB;
--hr_border_bottom: #BBBBBB;
--hr_background: #E4E4E4;

/* Contrast / darkest border */
--contrast_border: #222222; /* Progress bars, lightbox */

/* Box shadows — generated from a single tone colour via the preset selector.
   The three elevation levels are used across the UI for depth. */
--shadow-elevation-low: ...
--shadow-elevation-medium: ...
--shadow-elevation-high: ...

Topic Rows & Posts

Pinned Topic — started by Admin
Locked Topic
Awaiting Approval — pending moderation
Normal Topic — by User Name

/me waves hello ¹ footnote reference

Online Offline

Topic & Poster Names Topic NamePoster Name/me & Footnotes

Row Backgrounds Sticky RowLocked RowNormal Row

Online Status Icons Online GradientOnline Gradient End

CSS Variables Reference

--topic_name: #3D6E32; /* Topic title link color in message index */
--poster_name: #3D6E32; /* Poster name color in post view */
--me: #5BA048; /* /me action text and footnote references */

--sticky_row: #FFFFE0; /* Background of sticky (pinned) topic rows */
--locked_row: #F4F4F4; /* Background of locked topic rows */
--basic_row: #FEFEFE; /* basic row background */

--icon_online: #B4E391; /* Online status icon gradient start */
--icon_online_grad: #21873C; /* Online status icon gradient end */

Progress Bars & Gradient Bars

Poll / Stats bar:

Progress bar (maintenance):

40%

Upload status bar:

Gradient Bars (Poll, Stats, Profile) Bar TopBar BottomBar Background

Progress & Status Bars Progress Bar

Status BorderStatus Background

CSS Variables Reference

/* Poll results, stats bars, profile activity, capacity bars */
--gradient_bar_top: #27A348; /* Foreground bar colour (top of gradient) */
--gradient_bar_bottom: #60BC78; /* Gradient partner (bottom) */
--gradient_bar_background: #CDDDBD; /* Lighter background colour (profile pie ring) */

/* Maintenance / installation progress bar */
--progress_bar_primary: #0000FF; /* Blue progress fill */

/* Attachment upload status bar */
--status_bar_border: #A9CCD1;
--status_bar_background: #F0F0F0;

Calendar

Sun	Mon	Tue	Wed	Thu	Fri	Sat
1	2	3 🎂 Birthday	4	5 🏮 Holiday	6	7 today
8	9 📅 Event	10	11	12	13	14

Calendar Item Colors BirthdayHolidayEventToday Background

CSS Variables Reference

--birthday: #920AC4; /* Birthday text color on calendar */
--holiday: #555080; /* Holiday text color on calendar */
--event: #008000; /* Event text color on calendar */
--currentday: #EBFFD8; /* Background highlight for today's cell */

Overview

Save override.css View override.css

Warning

A Warning to you!

Board Title

Board Description

Something
Started by User One
- 1
- 2
- All
September 13, 2019, 03:39:22 PM
by Its Me Its Me

12 Replies
5,989 Views
6 Likes
Another
Started by User Two
- 1
- 2
- All
September 19, 2021, 12:39:16 AM
by Someone Else

11 Replies
1,528 Views
0 Likes

Theme Areas

Page Background

Top section

My ElkArte Community

Main Menu

My ElkArte Community

Footer

Inputs, text, checkbox, radio, etc

Submit buttons for forms

Section Headers

Main Headers

Content Headers

Secondary/Category Header

Backgrounds

Text Colors

Highlight Text, select some to see

Links & Input Validation

Normal Links

Valid & Invalid Input Backgrounds

Special Containers

Semantic Colors

Borders & Shadows

Topic Rows & Posts

Progress Bars & Gradient Bars

Calendar

Overview

My ElkArte Community

Board Title

Something

Another