Customize Your Design With CSS

CS-Cart provides a great deal of flexibility when it comes to customizing the visual presentation of your online store. One of the key tools for achieving this customization is the Custom CSS (Cascading Style Sheets) feature in the Theme editor tool. It comes in handy when default settings of the Theme editor for fonts, colors, and backgrounds are not enough.

If you are new to CSS, you can check out the following tutorials:

  • CSS Beginner Tutorial gives you enough information to get familiar with CSS and start working with it;
  • CSS Tutorial is a more detailed guide for experienced users.

In this article, we will look at the Custom CSS capabilities in CS-Cart using the Bright theme, the default CS-Cart theme, as an example. The CSS rules you will encounter in this article may not work in your store if you use a different theme.

What Can Be Changed via Custom CSS?

Custom CSS allows store owners to modify the appearance of various elements within the storefront of their site.

Here are some examples of what you can change:

  • Change color of specific elements, for example, cart or profile icons

    /* Change cart icon color to red */
.ty-icon.ty-icon-moon-commerce.ty-minicart__icon {
    color: #ff0000;
}

/* Change profile icon color to red */
.ty-icon.ty-icon-moon-user {
    color: red;
}

  • Change font size and weight of specific elements

    /* Change font and color for the table titles in cart */
th.ty-cart-content__title {
    font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
    font-weight: normal;
    color: #4e4ebb;
}

  • Increase or decrease gaps between elements

    /* Remove gaps before and after homepage banners */
.homepage-banners .owl-theme {
    margin: 0;
}

  • Increase or decrease the size of the elements

    /* Change width of the logo */
.ty-logo-container {
    width: 150px;
}

  • Add borders to the elements

    /* Change borders of the product thumbnails in the list */
.ty-grid-list__image {
    border: 2px dashed #cb7da4;
}

  • Customize the look of the elements according to the viewport size. The elements of your site may look different if you set specific styles for them using the @media rule.

    /* Change the number of columns in the Vendors block for mobile devices */
@media screen and (max-width: 480px) {
    .ty-mainbox-simple-body .ty-grid-vendors .ty-column5 {
    width: 50%;
}
}

It is important to mention that Custom CSS does not apply to the CS-Cart admin panel, as it is isolated from the storefront. Changes in the admin panel require specific modifications.

How Custom CSS Works in CS-Cart

Any styles you write in the Custom CSS section take precedence over default styles, allowing for convenient modifications without altering core files. When the page loads, CSS rules are applied sequentially; hence, rules defined in the Theme editor tool overwrite default ones.

How to Define the Right Selector for Your CSS Rule

You can define a CSS selector using DevTools, for example, in Google Chrome as well as in other browsers. It is an essential tool for web developers, here is how you can use it effectively:

  1. Open DevTools: Right-click on the element you wish to style and click on Inspect. This opens the DevTools panel, where you will see the HTML structure of the chosen element and the associated CSS styles.
Inspect button will open DevTools of your browser.
  1. Locate the Right CSS Class: Hover over CSS elements in the Styles pane to check what HTML elements they affect. As you do this, the associated elements will be highlighted on your site.
Find the CSS elements you need.
  1. Experiment: You can modify the CSS properties directly in the Styles pane. This will allow you to see how potential changes will look in real-time. Once satisfied, copy the final CSS to your Custom CSS section in CS-Cart.
Try modifying CSS properties.

Why You Should Avoid Overusing !important

Sometimes your CSS rule may not work because it conflicts with other rules. The !important declaration can force a style to apply. However, overusing it can lead to messy and hard-to-maintain code. It makes it difficult to troubleshoot or extend your styles later, as you may find yourself needing additional !important tags to override existing styles.

As an alternative you can enhance the specificity of your CSS rules by using more targeted selectors, which can often resolve conflicts without needing the !important rule.

For example, you want to change the color of the block headings in footer:

.ty-footer-general__header {
    color: blue;
}

But your rule does not work because the color of the text was set in a more specific rule. You can specify the selector for your rule by adding a class from a parent element:

.ty-footer-menu .ty-footer-general__header {
    color: blue;
}

What is User-Defined CSS Class

In CS-Cart, elements of the layout page often use the same classes which makes it difficult to define a selector for your custom CSS rule that should work only for a specific element.

The User-defined CSS class field is the feature that allows you to assign unique classes to specific elements within your store and helps to create targeted styles that do not affect other components. For instance, if you want to change the appearance of just one product block or menu item while keeping the default styles for the rest, adding a unique class makes it possible.

You can find the User-defined CSS class field on the editing page of a block, grid, section, menu item, and profile field.

Click on the gear icon on the grid panel. User-defined CSS class is in the General tab of the grod settings.

Here is an example of how you can use this field. Imagine that you want to add a border to your Hot deals product block. You need to do the following:

  1. Navigate to the Website → Themes → Layouts → Homepage page;
  2. Open the editing page of the grid that contains the needed block;
  3. Enter a custom class name in the User-defined CSS class field, such as hot-deals-grid, and save changes;
Fill in the User-defined CSS class field.
  1. Navigate to the Website → Themes page and open the Theme editor;
  2. Open the Custom CSS section in the CUSTOMIZE field;
  3. Enter your CSS rule for the new class, for example:
/* Adds a red border to the grid */
.hot-deals-grid {
    border: 5px solid #e73c18;
    padding: 0 20px;
    margin-bottom: 10px;
}
  1. Click on the Save button to apply changes.
Enter the CSS rule in the Theme editor. The border will apper around the Hot deals block.

How to Undo Applied CSS Rules

If you find that your website is displaying without any styles after adding a CSS rule, it is likely due to a mistake in your code.

To fix this issue, navigate to the Website → Themes → Templates page of your admin panel and open the [theme_name] → styles → data → [theme_stye_name].css file.

Find the file that contains the code you entered.

You can also access this file in your installation files, it is located at design/themes/[theme_name]/styles/data/[theme_style_name].css.

Once you have opened the file, carefully review the CSS code to identify the error. You can either correct the mistake or remove the problematic rule entirely. After making the necessary changes, save the file and refresh your website to see if the styles are applied correctly.

You may also need to clear the cache of your site by clicking on the Clear cache button on the Website → Themes page of your admin panel.

Microformats in CS-Cart

CS-Cart has its own microformats. They are used as specific CSS classes to determine which JavaScrip code should be executed for a specific HTML element.

You can read about microformats in the separate article.

Big CS-Cart Update is Here Experience the New Admin Panel with Dark Theme

Reactivate Updates Learn More