A second tool of the Webmaster mode is Custom CSS. This tool is aimed at changing the design elements of the skin and adding a custom CSS code to the existing X-Cart pages so that a modified code is aggregated with the other software files automatically. Using Custom CSS you can change the skin colors, fonts, background, etc. The changes are applied storewide and are recorded in the Look and Feel > Custom CSS & JS section of your store admin back-end. You can use this section to change your store skin with a custom css.


If you need to see the changes while you are adding them, use the Webmaster mode -> Custom CSS tool in the store front-end. Please don’t forget to be logged in as an admin.


The custom css code that you see when opening the tool for the first time is a demo one that represents the basic page layout structure. You can edit the code or delete it completely both in the admin back-end or store front-end. The code deletion will not affect the skin anyhow.


Let’s check how the skin changes are applied based on the demo css code provided. The figures below show one and the same page with the custom css code enabled and disabled.


As you see the custom css code changes the background and positioning of the main blocks of the sidebar (Categories, Sale, New arrivals Recently viewed and so on).

The blue background and the font color is set by the following piece of code:

 * Specific styles for the Top categories block in the side bar
.sidebar .block.block-top-categories .head-h2 {
  background: #f7fcff;

.sidebar div.block.block-top-categories div.content {
  background: #f7fcff;

.sidebar div.block.block-top-categories div.content a {
  color: #6f9cd9;

If we change #f7fcff to #F5F5DC the background will look as follows:


You can use the demo css code to learn how to apply similar changes to your store skin.

It’s also possible to add javascrips to your site. For this purpose use the Custom JavaScript tab in the Look and feel -> Custom CSS & JS section of the admin back-end.


Javascripts are stored in one file and both custom CSS and JS are added to the <HEAD> tag after all style files applied.