All Collections
Look and Feel
Theme Tweaker (X-Cart 5.4.x and earlier)
Adding Custom CSS Code in the Storefront (X-Cart 5.4.x and earlier)
Adding Custom CSS Code in the Storefront (X-Cart 5.4.x and earlier)

Learn how to customize your store using the Custom CSS tool directly from the storefront.

Olga Tereshina avatar
Written by Olga Tereshina
Updated over a week ago

If you need to see the changes while adding them use the Custom CSS tool in the storefront.

For this purpose:

  1. When logged in as an administrator, open the storefront to see the Theme Tweaker add-on panel.

  2. Click on the Custom CSS tab on any page of your site storefront and turn ON the Use Custom CSS toggle.

    541-custom-css-on.png

  3. Enter your custom CSS code to the text area.

  4. Save the changes.

Below we will provide a demo CSS code to illustrate, e.g., how the skin changes apply.

The figures below show the same page with a custom CSS code applied and without it.

  • Default page layout

    541-custom-css-default-background.png

  • Customized page layout

    541-custom-css-blue-background.png

As you see, the custom CSS code changes the background of the "Categories" block.

The following piece of code sets the blue background and the font color:

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

541-custom-css-fade-background.png

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

Related pages:


Did this answer your question?