Lagom WHMCS Client Theme Style Manager provides you with all essential tools used to manage Lagom 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.
The Lagom theme is now fully based on CSS Variables that have been developed by our team and implemented in Lagom 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.
Every Lagom theme Style has its own variable files that are automatically copied during the theme activation from
/templates/lagom2/core/styles/[style_name]/css/vars/defaults to the
/templates/lagom2/core/styles/[style_name]/css/vars directory. It is essential to have the
defaults folder as this allows us to:
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
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 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.
Lagom WHMCS Client Theme includes 4 Styles that can be found under the "Styles" tab in the "RS Themes" addon.
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:
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:
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" colors are used for typography and UI elements, for example:
"Primary" is a main Lagom theme color, used for primary elements and backgrounds, for example:
"Secondary" colors are applied to secondary background colors, for example:
"State" colors are needed in application UI states, for example:
Here you can define a default color of small UI icons displayed in the main navigation, buttons, and panels.
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.
Under the "Background" section, you can define the theme body color.
The "Typography" page grants you the possibility to manage variables used for fonts in the Lagom theme. Colors and values set on this page can then be selected from a predefined list on further pages of Lagom Style Manager.
Allows you to change "Font Family" used in the Lagom theme with a few simple clicks. You can choose any font available in "Google Fonts" (opens new window).
Need to load custom or local font? Learn how to do that.
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).
There are three groups of "links":
You have full freedom to configure such parameters as font size, line height, or font weight for both Desktop and Mobile screens.
The "General" tab in Lagom Style Manager allows you to configure variables that are assigned to different Lagom UI elements.
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.
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.
Specify the height used for buttons, inputs, selectors, etc.
Define colors used for alerts, messages, and other state elements.
Set colors for labels and badges.
Determine the container's maximum width of specific elements in the Lagom 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 theme.
This section allows you to configure the height of logos or graphics used in theme navigations.
Configure navigation variables for Condensed, Condensed Banner, and Default layouts.
Set up navigation variables for Left and Left Wide layouts.
Define navigation variables for Left Wide layouts.
The "Layout" tab gives you the possibility to configure variables used for the main containers of Lagom 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 theme:
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.
Configure variables used for the "sections" content in the Lagom client area and in the ordering process.
These sections are used on different Lagom theme pages, for example, they can be used in the ordering process:
The "Buttons" tab in Lagom Style Manager allows you to configure variables assigned to all buttons used on Lagom theme pages.
We can distinguish 4 different sizes for buttons:
We have prepared 8 different styles for buttons. The Lagom theme mainly uses only 4 of them:
The Lagom 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.
The "Forms" page in Lagom Style Manager enables you to configure variables assigned to form fields used on Lagom theme pages.
Set up variables used for font styles of form labels.
Define variables used for the style of "input", "textarea" and "select" fields.
Specify variables used to design "radio" and "checkbox" form 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.
As a part of the customization of Promotion Sliders, you can freely configure the title font style as well as the illustration size.
Set up variables needed for the "Login" and "Register" boxes.
Specify variables essential for "Product" boxes.
Configure variables used to display the different sizes of prices as well as needed for "packages", "summary panels", "domain search" fields.
The "Site" tab in Lagom Style Manager allows you to set up variables used for "Site" pages:
Define variable used for banners on "Site" pages.
As an example, take a closer look at how these variables are applied on the "Weebly" product page:
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:
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" 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:
By selecting this option, you will assign the "Default" style to the selected element. The "Default" style uses:
By selecting this option, you will assign the "Primary" style to the selected element. The "Primary" style uses:
By selecting this option, you will assign the "Secondary" style to the selected element. The "Secondary" style uses:
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.
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 backgorund color, of the product boxes:
To find out more about common problems and errors, nagivate to the Common Problems article.
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: