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?