Customize theme


Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">

Getting started

Right-to-Left (RTL)

This article provides detailed instructions on enabling and using RTL support in the Cartzilla template, as well as steps to customize and compile RTL-specific styles.

Enable / use RTL

Right-to-Left (RTL) support is essential for languages that flow from right to left, such as Arabic, Hebrew, and Persian. Cartzilla facilitates RTL support with a few simple steps:

  1. Set the HTML direction: Add dir="rtl" to the <html> element to set the text direction to right-to-left.
    <html dir="rtl" lang="ar">
  2. Include language attribute: Add an appropriate language attribute, like lang="ar", to the <html> element. This helps with SEO and screen reader accessibility.
  3. Include RTL stylesheet: To apply RTL styles, include an RTL version of the CSS instead of default theme.min.css. Ensure to preload styles for better performance.
  4. Modify dir in manifest.json: Change the dir property from "ltr" to "rtl" in the manifest.json file to ensure metadata is consistent with the text direction of the site.

Using RTL-specific utility classes

Cartzilla includes utility classes to manage the layout and appearance in an RTL context:

  • Flipping objects: Use the .rtl-flip class to horizontally flip elements.
    <img src="..." class="rtl-flip" alt="...">
  • Visibility classes: Control the display properties with RTL-specific classes.
    <!-- Hide element in RTL -->
    <div class="d-none-rtl">...</div>
    <!-- Hide element in LTR, but show in RTL -->
    <div class="d-none d-block-rtl">...</div>

Customize / compile RTL CSS

For those who need to customize or generate their own RTL stylesheets from SCSS, Cartzilla provides a robust set of npm scripts to facilitate this process.

Compiling RTL CSS

Cartzilla includes several npm scripts that help compile and minify RTL-specific CSS:

  • styles-rtl: Compiles, processes, and minifies RTL CSS.
    "styles-rtl": "npm-run-all -s styles:compile styles:rtl styles:minify-rtl"
  • styles:rtl: Generates RTL stylesheet and associated .map file.
    "styles:rtl": "node build/styles.js rtl"
  • styles:minify-rtl: Minifies the RTL CSS and generates associated .map file.
    "styles:minify-rtl": "node build/styles.js minify-rtl"

Modifying build scripts

To integrate RTL styles into your development and build process, modify the dev and build scripts inside package.json file to include RTL compilation:

  • dev:
    "dev": "npm-run-all --silent -p styles-rtl scripts icon-font vendor && npm run watch --silent"
  • build:
    "build": "npm-run-all --silent -p styles-rtl scripts icon-font vendor && npm run validate --silent && npm run dist --silent"
Top Customize