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">

Cartzilla component

Input text formatter

Format input text content when you are typing.

Input text formatting feature is enabled through the Cleave.js plugin. To use this component, make sure to include the required reference to the plugin's .js file before the closing </body> tag and above theme.min.js reference in your document:

<script src="assets/vendor/cleave.js/dist/cleave.min.js"></script>

Payment card number

<!-- Input text formatted as a card number with updating card icon -->
<label for="card" class="form-label">Card number</label>
<div class="position-relative" data-input-format='{"creditCard": true}'>
  <input type="text" class="form-control form-icon-end" id="card" placeholder="Enter card number">
  <span class="position-absolute d-flex top-50 end-0 translate-middle-y fs-5 text-body-tertiary me-3" data-card-icon></span>

Phone number

<!-- Input text formatted as a phone number -->
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone" data-input-format='{"numericOnly": true, "delimiters": ["+1 ", " ", " "], "blocks": [0, 3, 3, 2]}' placeholder="+1 ___ ___ __">


<!-- Input text formatted as a full date  -->
<div class="mb-3">
  <label for="date" class="form-label">Date</label>
  <input type="text" class="form-control" id="date" data-input-format='{"date": true, "delimiter": "-", "datePattern": ["Y", "m", "d"]}' placeholder="yyyy-mm-dd">

<!-- Input text formatted as a short date  -->
<div class="mb-3">
  <label for="date-short" class="form-label">Date short</label>
  <input type="text" class="form-control" id="date-short" data-input-format='{"date": true, "datePattern": ["m", "y"]}' placeholder="mm/yy">


<!-- Input text formatted as a time -->
<label for="time" class="form-label">Time</label>
<input type="text" class="form-control" id="time" data-input-format='{"time": true, "timePattern": ["h", "m"]}' placeholder="hh:mm">

Custom blocks

<!-- Custom input text format -->
<label for="custom" class="form-label">Custom blocks</label>
<input type="text" class="form-control" id="custom" data-input-format='{"blocks": [4, 3, 3, 4, 2], "delimiters": [".", " ", "/", "-"]}' placeholder="blocks:[4, 3, 3, 4, 2], delimiters: ['.', ' ', '/', '-']">

Prefix and uppercase

<!--  Input text formatted as uppercase with default prefix -->
<label for="prefix" class="form-label">Prefix + uppercase</label>
<input type="text" class="form-control" id="prefix" data-input-format='{"prefix": "PREFIX", "delimiter": "-", "blocks": [6, 4, 5, 3], "uppercase": true}'>
Top Customize