Semantic UI theming

Semantic UI logo

Instead of having to create components from a blank canvas, developers using Semantic UI only need to specify how their components should differ from the default theme using LESS variables.

Chap version 1.0.8 added support for manually overriding LESS variables by changing files in the child theme folder. Keeping the files separate in child theme folder ensures no changes are lost with theme updates.

Chap version 1.12 added a Semantic UI component editor to the WordPress admin dashboard.
No longer is it necessary to manually edit files.
Learn more
Semantic UI components

A Semantic UI component consist of up to 3 base files:

Variables file
Variables the component will use.
Definitions file
The LESS/CSS for the component.
Overrides file
The LESS/CSS overrides for the component.

These 3 files are constant and shouldn’t be changed.
Changes are made by adding our own .variables and .overrides files to the mix:

Variables file
Custom variables
Definitions file
Overrides file
Custom overrides

For Chap these files are located in the child theme folder:

chap-child/semantic-ui
collections
elements
globals
modules
views

Each of the folders contains .variables and .overrides empty “stub” files for all possible theme overrides. Keeping your site theme separate makes sure you don’t lose any changes when updating Semantic UI or Chap theme to new versions.

Variable files

A .variables file specifies variables which should be adjusted.

Due to inheritance, it only needs to include variables which are different.

Override files

An .overrides file specifies additional CSS rules to be added to a definition for a theme. This file also has access to all inherited variables for a component.

globals/site.variables

Site variables file can be used to override or add new global variables, accessible in all the components .overrides files.

Examples
Overriding global variables

Let’s override some global site variables. First we must have a look at what variables are already there. We can do that by looking at the source code of the site component definition file at chap/semantic-ui/themes/default/site.variables or we can just use GitHub to browse the source code.

Many of the variables, such as font name, size, emsize, primary color, border radius and more are already customizable from Chap settings in the WordPress dashboard, so there is no reason to override these. But we can override variables that are not significant enough to deem their own theme option, such as colors. Let’s change the color “red” from #DB2828 to #FF0000. And while we’re at it, let’s add our own custom variable, @chapRed.

chap-child/semantic-ui/globals/site.variables
LESS
@red: #FF0000;
@chapRed: #A22600;

After making changes, save the file and recompile Semantic UI in the WordPress admin dashboard at Chap Theme -> Chap Compiler. You will be able to see the color change take effect, for example, when outputting a negative button (since we can read from the source code that @negativeColor is equal to @red).

<button negative>Button</button>
Overriding CSS

Now let’s make use of the custom variable we declared earlier. Let’s change the text color to use our previously defined new variable.

chap-child/semantic-ui/globals/site.overrides
LESS
body {
  color: @chapRed;
}
Changing menus

Let’s customize the menu component to look a bit different than default.

chap-child/semantic-ui/collections/menu.variables
LESS
/* Change the background color */
@background: @darkWhite;
/* Add a box shadow */
@boxShadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
/* Remove dividers */
@dividerSize: 0px;
/* Increase padding */
@itemVerticalPadding: @relativeLarge;
@itemHorizontalPadding: @relativeLarge;
More resources
Read more about Semantic UI theming: semantic-ui.com/usage/theming.html.
Read more about Semantic UI theming: learnsemantic.com/themes/overview.html.
Read more about Semantic UI customization: learnsemantic.com/developing/customizing.html.

Leave a comment

Your email address will not be published. Required fields are marked *