Lagom WHMCS Client Theme Documentation
Docs v2.x
/ /website-builder/ /extensions/ /module-integration/ /order-form/

# Style Manager

Lagom WHMCS Client Theme Style Manager provides you with all essential tools used to manage Lagom WHMCS Client Theme colors and styles without having any technical know-how. You will also be empowered to apply various Styles and Color Schemes to tailor our theme to your brand style.

# Introduction

The Lagom WHMCS Client Theme is now fully based on CSS Variables that have been developed by our team and implemented in Lagom WHMCS Client Theme styles. Style Manager operates on files, so every change performed in Style Manager is saved directly in Lagom files, no CSS data will be stored in the WHMCS database.

# Defaults Folder

Every Lagom WHMCS Client Theme Style has its own variable files that are automatically copied during the theme activation from /templates/lagom2/core/styles/[style_name]/assets/css/vars/defaults to the /templates/lagom2/core/styles/[style_name]/assets/css/vars directory. It is essential to have the defaults folder as this allows us to:

  1. Restore Default Values - restore default values in Style Manager. You can find out more in the documentation section.
  2. Update Of Theme Styles - perform the update of customized styles along with the installation of the new Lagom WHMCS Client Theme version. Thanks to this, your customized style will be automatically updated to the latest Lagom WHMCS Client Theme changes.

# Operate on Files

Because Style Manager operates on files, it is important to set the correct privileges for theme folders on your server. Our addon needs to have the permission to create and overwrite files located in the /templates/lagom2/core/styles directory.

# Why CSS Variables?

CSS variables are now supported by all the latest browser versions, so we can start using them in our theme.

CSS variables open up new possibilities to simplify the modification and customization of Lagom WHMCS Client Theme styles. These variables can then be easily used in any other product that you are going to develop. For example, if you are using our Module Integration Extensions for specific modules, color and style changes implemented in Lagom Style Manager will be automatically applied to these extensions.

# Main Page

Lagom WHMCS Client Theme includes 4 Styles that can be found under the "Styles" tab in the "RS Themes" addon.

  1. "Color Scheme" - displays the currently activated Color Scheme for a specific Lagom Style.
  2. "Status" - shows if a particular Lagom Style is activated.
  3. "Manage" - navigates to the style management page where you can implement Lagom Style modifications.
  4. "Live Preview" - allows you to preview a certain Lagom Style in your WHMCS client area without activating it for all your customers. This change will be only visible for your current browser session.
  5. "Activate" - activates a selected Lagom Style.

# Style Variables

# Restore Default Values

All default CSS variables are stored in the defaults folder that is only needed during the theme activation as well as to restore original values.

The "Restore Defaults" feature can be found on the right at the bottom of the action bar. Once clicked, you will see the confirmation modal with the following options:

  1. "Restore Data For Active Tab" - select this option if you wish to overwrite changes made in the currently active Style Manager "tab". For example, if you are now in "Colors" tab, you will restore default variables ONLY for "Colors" settings.
  2. "Restore Data For All Tabs" - choose this option to overwrite ALL changes made in Style Manager. Please note that this change CANNOT be undone.

# Color Schemes

This section presents 5 predefined color schemes. You can freely select a scheme that you would like to activate or modify. You can enable the preferred scheme by following these steps:

  1. Go to the "Colors" tab in Lagom Style Manager.
  2. Choose "Color Scheme", which you wish to use, for example, "Orange".
  3. Click "Save Changes" at the bottom of the screen.

# Color Variables

In this section, you can easily customize every color variable used in Lagom CSS files. Please remember that you will be able to restore the default values at any time by clicking the Restore Defaults button.

# Gray

"Gray" colors are used for typography and UI elements, for example:

  • Text colors for headings, paragraphs, navigation, etc.
  • Border color for forms, default buttons, dividers, etc.
# Primary

"Primary" is a main Lagom WHMCS Client Theme color, used for primary elements and backgrounds, for example:

  • Background for primary sections.
  • Background, or border color for primary buttons, panels, boxes.
  • Font color for primary texts.
# Secondary

"Secondary" colors are applied to secondary background colors, for example:

  • Background for secondary sections.
  • Background for secondary panels, boxes.
# Success, Info, Warning, Danger

"State" colors are needed in application UI states, for example:

  • alerts,
  • labels and badges,
  • text colors.
# UI Icon

Here you can define a default color of small UI icons displayed in the main navigation, buttons, and panels.

# SVG Illustrations

This section empowers you to manage the colors of every illustration used in our theme. The following example presents colors for the "Modern" style. Moreover, every other Lagom Style will display different variables in this section.

# Background

Under the "Background" section, you can define the theme body color.

# Typography

The "Typography" page grants you the possibility to manage variables used for fonts in the Lagom products. Colors and values set on this page can then be selected from a predefined list on further pages of Lagom Style Manager.

# Font Family

Allows you to change "Font Family" used in the Lagom products with a few simple clicks.

# Use Google Font Face

You can choose any font available in "Google Fonts" (opens new window).

# Use Custom Font

When this option is selected, our theme will no longer load fonts from "Google Fonts". You have to enter the "font-face" name in the input, and then you have to upload the font files to your server. You can learn how to do that in this documentation article.

# Font Colors

Here you will find colors configured in the Color Variables section. It is possible to assign a color by selecting it from a predefined list. Moreover, you can also set your own color using the color picker:

Font colors are split into 2 sections (Futuristic Style has only one section).

  • "Font Colors" - define colors for fonts displayed on the light background.
  • "Secondary Font Colors" - stand for colors for fonts displayed on dark background colors such as "Primary" and "Secondary" backgrounds, for example:

There are three groups of "links":

  • "Default Links" - specify colors for links placed in article descriptions, tickets, knowledgebase articles, etc.
  • "Main Navigation Links" - define colors for main menu links, by default, used for the top and left navigation.
  • "Sub Navigation Links" - are variables used for "top bar" navigation links, "footer" navigation links as well as "tabs" navigation links.

# Font Sizing

You have full freedom to configure such parameters as font size, line height, or font weight for both Desktop and Mobile screens.

# General

The "General" tab in Lagom Style Manager allows you to configure variables that are assigned to different Lagom UI elements.

# UI Border Radius

In this section, you can find various sizes for border radius. These variables are assigned to all UI elements that have rounded borders, for example, buttons, panels, inputs, etc.

# UI Shadow

Feel free to set a style of shadows for specific sizes. These variables are applicable to all UI elements which have shadows, for example, panels, dropdowns, modals, navigation elements, etc.

# UI Elements Height

Specify the height used for buttons, inputs, selectors, etc.

# UI States

Define colors used for alerts, messages, and other state elements.

# Labels

Set colors for labels and badges.

# UI Max Width

Determine the container's maximum width of specific elements in the Lagom WHMCS Client Theme. For example, these values are used to set the width of the "Login" and "Register" boxes.

The "Navigation" tab in Lagom Style Manager enables you to configure variables assigned to different layouts in the Lagom WHMCS Client Theme.

This section allows you to configure the height of logos or graphics used in theme navigation.

# Top Layout Navigation

Configure navigation variables for Condensed, Condensed Banner, and Default layouts.

  • Shadow - choose the size of the shadow displayed under the top navigation.
  • "Menu Link - Color" - set a color for main navigation links.
  • "Menu Link - Hover Color" - define a "hover" and "active" state color for main navigation links.
  • "Menu Link - Font Size" - specify the font size for main navigation links.
  • "Menu Link - Font Weight" - set the font weight for main navigation links.
  • "Menu Link - Line Height" - choose the line height for main navigation links.
  • "Menu Link - Icon Size" - determine the size for font icons used in main navigation links.
  • "Menu Link - SVG Icon Size" - set the size for SVG icons used in main navigation links.
  • "Menu Link - Icon Color" - select a color for font icons used in main navigation links.
  • "Menu Link - Icon Hover Color" - specify a "hover" and "active" state color for main navigation links.

# Left Layout Navigation

Set up navigation variables for Left and Left Wide layouts.

  • "Width" - set the width of the left navigation menu.
  • "Shadow" - choose the size of the shadow displayed under the left navigation.
  • "Menu Link - Color" - configure a color for main navigation links.
  • "Menu Link - Hover Color" - define a "hover" state color for main navigation links.
  • "Menu Link - Active Color" - specify an "active" state color for main navigation links.
  • "Menu Link - Font Size" - choose the font size for main navigation links.
  • "Menu Link - Font Weight "- define the font weight for main navigation links.
  • "Menu Link - Icon Size" - select the size for font icons used in main navigation links.
  • "Menu Link - SVG Icon Size" - specify the size for SVG icons used in main navigation links.
  • "Menu Link - Icon Color" - choose a color for font icons used in main navigation links.
  • "Menu Link - Icon Hover Color" - set a "hover" state color for main navigation links.
  • "Menu Link - Icon Active Color" - define an "active" state color for main navigation links.

# Left Wide Navigation

Define navigation variables for Left Wide layouts.

  • "Width" - set the width of the left wide navigation menu.
  • "Menu Link - SVG Icon Size" - set the size for SVG icon for main navigation links.

# Layouts

The "Layout" tab gives you the possibility to configure variables used for the main containers of Lagom WHMCS Client Theme pages.

This page enables you to set up font style settings for the page title and page breadcrumb.

These values are assigned to elements inside "Main Header" of the Lagom WHMCS Client Theme:

# Header for Banner Layout

You can assign different font style settings for the page title and page breadcrumb of the "Condensed Banner" layout.

The following values are assigned to elements inside "Main Header" for the "Condensed Banner" layout.

Under this page, you can set up the width of sidebars.

  • "Base Width" is used mainly for left sidebars:
  • "Large Width" is used for right summary sidebars:

# Client Area Section

Configure variables used for the "sections" content in the Lagom client area and in the ordering process.

These sections are used on different Lagom WHMCS Client Theme pages, for example, they can be used in the ordering process:

# Buttons

The "Buttons" tab in Lagom Style Manager allows you to configure variables assigned to all buttons used on Lagom WHMCS Client Theme pages.

# Button Sizes

We can distinguish 4 different sizes for buttons:

  • "Extra Small" - used in list groups, for example, the "Edit" button located on the list of such articles as knowledgebase or announcement.
  • "Small" - used in left sidebars.
  • "Default" - generally used by default on Lagom WHMCS Client Theme client area pages.
  • "Large" - mainly used on "Site" pages, like Homepage, MarketConnect promo pages as well as for summary sidebars during the ordering process. In those sections, you can modify font style settings for each button size. You can freely choose from predefined values that have been configured in the Typography tab in Lagom Style Manager.

If you would like to configure the height of each button, please navigate to the General tab in Lagom Style Manager and set up values for UI Element Height.

# Button Colors

We have prepared 8 different styles for buttons. The Lagom WHMCS Client Theme mainly uses only 4 of them:

  • "Primary"
  • "Primary Faded" - faded shade of the primary button.
  • "Default"
  • "Light" - used for the "Secondary" and "Primary" backgrounds.

The Lagom WHMCS Client Theme does not apply any other button styles, however, they can be used by WHMCS modules, so we delivered the possibility to manage these buttons as well.

# Forms

The "Forms" page in Lagom Style Manager enables you to configure variables assigned to form fields used on Lagom WHMCS Client Theme pages.

# Label

Set up variables used for font styles of form labels.

# Field

Define variables used for the style of "input", "textarea" and "select" fields.

# Radio and Checkbox

Specify variables used to design "radio" and "checkbox" form elements.

# Elements

The "Elements" page in Lagom Style Manager provides the possibility to set up variables assigned to various elements used in the Lagom client area and in the ordering process.

# Promotion Slider, Promotion Slider Small

As a part of the customization of Promotion Sliders, you can freely configure the title font style as well as the illustration size.

  • "Default Promotion Slider" is displayed on Dashboard:
  • "Small Promotion Slider" is shown on sidebars:

# Login/Register Box

Set up variables needed for the "Login" and "Register" boxes.

# Package, Package Small

Specify variables essential for "Product" boxes.

# Price, Price Small, Price Extra Small

Configure variables used to display the different sizes of prices as well as needed for "packages", "summary panels", "domain search" fields.

# Site

The "Site" tab in Lagom Style Manager allows you to set up variables used for "Site" pages:

  • Homepage
  • MarketConnect product pages

Define variable used for banners on "Site" pages.

  1. "Title" variables enable you to configure the font style for the "Banner" title.
  2. "Desc" variables allow you to define the font style for the "Banner" description.
  3. "Illustration Width" stands for the size for the "Banner" illustration.
  4. "Minimum Height" allows you to set up the minimum height for "Banner".
  5. "Content Width" enables you to configure the maximum width of the "Banner" content.

As an example, take a closer look at how these variables are applied on the "Weebly" product page:

# Section

Here you can specify font style variables used in "Site" sections for titles and subtitles.

The following variables can be found on the "MarketConnect" product pages:

  1. This is the "title" section.
  2. This is the "subtitle" section.

# Feature, Feature Large, Feature Small

You can find the "Small Size" features on the "MarketConnect" product pages:

The "Default Size" features are used on the "MarketConnect" product pages:

The picture presents what the "Large Size" features look like for the "Modern" homepage template:

# Style Settings

"Style Settings" will let you assign different styles to specific template elements.

Using a few simple clicks you can choose from 3 different styles available for particular Lagom elements. For example, you can select the style of the "My Account" sidebar box which is displayed on the Dashboard page to logged in customers:

# Available Styles

# Default Style

By selecting this option, you will assign the "Default" style to the selected element. The "Default" style uses:

  • The background color assigned to "body".
  • The base font colors assigned to the "Font Color" section.

# Primary Style

By selecting this option, you will assign the "Primary" style to the selected element. The "Primary" style uses:

  • The background color assigned to the "Gradient" variable in "Primary Color".
  • The "Secondary" font colors assigned to the "Font Color" section.

# Secondary Style

By selecting this option, you will assign the "Secondary" style to the selected element. The "Secondary" style uses:

# Available Settings

  1. Sidebar Summary Style - choose what style you would like to use for "Summary Box". This element is visible in sidebars during the ordering process.
  1. Sidebar Boxed Style - choose what style you would like to use for "Sidebar Box". This element is displayed to logged in customers on client area pages. For example, a box with the total amount for unpaid invoices on the View Invoice pages.
  1. Sidebar Account Style - choose what style you would like to use for "Account Box". This element is displayed to logged in customers in the sidebar on the Dashboard page.

# Site Settings

  1. Site Banner Style - choose what style you would like to use for "Site Banner". Those banners are displayed on the Homepage and MarketConnect product pages.
  1. Site Secondary Section Style - choose what style you would like to use for "Secondary Section". Those sections are displayed on the Homepage and MarketConnect product pages.

# Layout Settings

  1. Left Navigation Style - choose what style you would like to use for "Left Navigation" for both logged in and logged out customers.
  1. Login Page Background - choose what style you would like to use for "Login Background". This also sets the background for the login sidebar in the Sidebar templates.

# Elements Settings

  1. Promotion Banner Style - choose what style you would like to use for "Promotion Banners". Those are MarketConnect product banners that are displayed for example on Dashboard to logged in customers.
  1. Search Box Style - choose what style you would like to use for "Search Box". Those are boxes with the search input displayed on Knowledgebase, Downloads, Domain Search pages.

# Custom CSS

The "Custom CSS" section gives you the possibility to create your own "CSS rules" in Lagom WHMCS Client Theme. All changes made here will be automatically saved in a new CSS file and uploaded to all theme pages.

# Advanced Modification

Style Manager does not contain possibility to customize every Lagom WHMCS Client Theme variable, so we could keep it as simple as possible. If you would like to perform more advanced modification, it is necessary to use browser development tool, and track variable which you need to modify.

Below example shows how to customize background color, of the product boxes:

# Common Problems

To find out more about common problems and errors, navigate to the Common Problems article.

# Color schemes do not load

When you see "black" blocks in "style" list, and your colors does not load when you enter to the management page of specific Lagom Style, as example below:

Please make sure that all "variable" files and folders has been copied from "defaults" folder, as in below example:

← Layout Manager →