Styling

Every single element of configurator can be modified with your own css styles. This allows you to adjust final look exactly to your needs. Below you’ll find most common use cases.

Set accent color for the application

You can customize the accent color of your application by setting a CSS variable to any color you desire. This allows for easy theming and dynamic changes to the color scheme.You can define the accent color using the :root pseudo-class, which represents the highest-level element in the document. This ensures the variable is available globally across your application. We are using !important to ensure that your CSS variable takes precedence over other styles.

:root {
    --intiaro-accent-color: coral !important;
}

Loading...

Idle attribute groups tab

class: .variable-group-tab

Active attribute groups tab

class: .variable-group-tab.active

Attribute tab icons Each attribute tab has it’s unique id equal to tab slug. If you wish to change particular tab icon you will have to use combination of unique tab id and tab icon class name.

class: .variable-group-icon

example:

#lex_uph_overall_body_welt.variable-group-tab .variable-group-icon {
    background-image: url(_static/lex_icons/welt.png) !important;
}

#lex_uph_overall_body_welt.variable-group-tab:hover .variable-group-icon{
    background-image: url(_static/lex_icons/welt.png) !important;
}

Open customization panel in mobile layout

The button opening attributes group panel in mobile view is store in div with “expand-panel-button” class attached to it. Inside this div you’ll find two child DOM elements. Custom web element called “app-rotating-arrow-icon” and div with “panel-label” class attached to it. First of them is responsible for arrow icons indicating weather panel is opened or not. Second one holds button label.

class: .expand-panel-button
class: .expand-panel-button app-rotating-arrow-icon
class: .expand-panel-button .panel-label

example:

#css-modified .expand-panel-button app-rotating-arrow-icon {
    background-color: #2a2828;
    color: #9f9872;
}

#css-modified .expand-panel-button .panel-label {
    color: #9f9872;
}

Attribute name in menu header

class: .group-name

Search button opening group filters

class: .search-button

Filter options (when filter is opened)

There are couple of buttons and labels inside opened filters panel that you may whant to modify or color to better suit your website. They are all located inside of div with “select-options-container” class. Below you’ll find a list of usefull classes that are used to color panel elements. Also please note, that some buttons have svg icons attached to them. In order to change their color you will have to style path element inside button class. Please take a look at example below.

// filter close button located in upper right corner of the panel
class: .select-options-container .button-close-container

// done button located in lower left corner of the panel
class: .select-options-container .button-done-container

// sellect all button in the lower right corner
class: .select-options-container .button-select-all-container

// clear all button in the lower right corner
class: .select-options-container .button-clear-all-container

// selected filter option label
class: .select-options-container label.colored

// selected filter option checkbox (required :before selector)
.select-options-container label.colored:before

example:

#css-modified .select-options-container .button-close-container {
    background-color: #2a2828;
    color: #9f9872;
}

#css-modified .select-options-container .button-close-container path{
    fill: #9f9872;
}

#css-modified .select-options-container .button-done-container {
    background-color: #2a2828;
    color: #9f9872;
}

#css-modified .select-options-container .button-select-all-container {
    color: #9f9872;
}

#css-modified .select-options-container .button-select-all-container path {
    fill: #9f9872;
}

#css-modified .select-options-container .button-clear-all-container {
    color: #2a2828;
}

#css-modified .select-options-container .button-clear-all-container path{
    fill: #2a2828;
}

#css-modified .select-options-container label.colored{
    color: #9f9872;
}

#css-modified .select-options-container label.colored:before{
    background-image: none;
    background-color: #9f9872;
    border-radius: 100%
}

Search button filters icon

Search button icon is svg with couple of paths nested inside. To change icon color use overwrite path fill style inside .search-button class. Please take a look at example below:

class: .search-button path

Search button next to search input field inside group filters

class: .searchButton

Siloo shoot widget

class: .silo-shoot-widget // silo shoot widget container
class: .silo-shoot-widget > .intiaroWidget-icon // silo shoot icon

Siloo shoot widget loading state

class: .silo-shoot-widget-loading > .intiaroWidget-icon // silo shoot icon

Siloo shoot widget popup

Once silo shoot is ready. Popup window will appear to let user decide what action should be taken next. Popu window can me changed by styling “intiaroPopup” class. Div with “intiaroPopup” class attached to it contains few other DOM elements with witch other classes representing certain popup window components. They are listed below.

// main popup window
class: .intiaroPopup
// popup window title
class: .intiaroPopup .popup-title
// popup window text
class: .intiaroPopup .popup-header
// popup window download button
class: .intiaroPopup .download-silo-button
// popup window open button
class: .intiaroPopup .open-silo-button
// popup window close button
class .intiaroPopup .popup-close-button

example:

#css-modified .intiaroPopup {
    background-color: #2a2828;
    color: #9f9872;
}

#css-modified .intiaroPopup .popup-header {
    color: #9f9872;
}

// move download button to the right
#css-modified .intiaroPopup .download-silo-button {
    float: right;
}

Attribute choices

Each choice in configurator is represented by an icon. Each icon is made by div with “choiceIconContainer” class attached to it. Every choiceIconContainer contains two child elements representing choice image nad choice label. These containt adequatly “choiceIcon” nad “choiceIconText” classes attached to them. It is also worth mentioning, that selected choice icons containers have “selected” class dynamically attached to them.

// default choice
class: .choiceIconContainer
class: .choiceIconContainer .choiceIcon
class: .choiceIconContainer .choiceIconText

// selected choice
class: .choiceIconContainer.selected
class: .choiceIconContainer.selected .choiceIcon
class: .choiceIconContainer.selected .choiceIconText

Below example configurator with custom styles attached:

<style>
   #css-modified .variable-group-tab{
       background-color: #494949 !important;
       color: white;
   }

   #css-modified .variable-group-tab:hover{
       background-color: #2a2828 !important;
       color: #9f9872;
   }

   #css-modified .variable-group-tab.active{
       background-color: #2a2828 !important;
       color: #9f9872;
   }

   #css-modified .group-name{
       color: #9f9872;
   }

   #css-modified .search-button {
       color: #9f9872;
   }

   #css-modified .search-button path {
       fill: #9f9872;
   }

   #css-modified .searchButton {
       background-color: #9f9872;
   }

   #css-modified .silo-shoot-widget {
       background: none;
   }

   #css-modified .silo-shoot-widget  > .intiaroWidget-icon {
       background-image: url(_static/lex_icons/download_img.png);
       transform: scale(1.5);
   }

   #css-modified .silo-shoot-widget-loading > .intiaroWidget-icon{
       background-image: url(_static/lex_icons/arrows.png);
   }

   #css-modified #Body_Fabric.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/body_fabric.png) !important;
   }

   #css-modified #Body_Fabric.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/body_fabric.png) !important;
   }

   #css-modified #lex_uph_overall_body_welt.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/welt.png) !important;
   }

   #css-modified #lex_uph_overall_body_welt.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/welt.png) !important;
   }

   #css-modified #lex_uph_overall_body_welt_fabric.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/welt.png) !important;
   }

   #css-modified #lex_uph_overall_body_welt_fabric.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/welt.png) !important;
   }

   #css-modified #Seat_Cushion_Quantity.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/seat.png) !important;
   }

   #css-modified #Seat_Cushion_Quantity.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/seat.png) !important;
   }

   #css-modified #lex_uph_finish.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/legs.png) !important;
   }

   #css-modified #lex_uph_finish.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/legs.png) !important;
   }

   #css-modified #Select_your_Body_Welt.variable-group-tab .variable-group-icon {
       background-image: url(_static/lex_icons/nail.png) !important;
   }

   #css-modified #Select_your_Body_Welt.variable-group-tab:hover .variable-group-icon{
       background-image: url(_static/lex_icons/nail.png) !important;
   }

   #css-modified .choiceIconContainer {
       border-radius: 100%;
       border: none;
   }

   #css-modified .choiceIconContainer .choiceIcon {
       border-radius: 100%;
       border: none;
   }

   #css-modified .choiceIconContainer .choiceIconText {
       background-color: transparent;
       color: #2a2828;
   }

   #css-modified .choiceIconContainer.selected {
       border-radius: 6px;
       border: 1px solid #9f9872;
   }

   #css-modified .choiceIconContainer.selected .choiceIconText {
       background-color: #2a2828;
       color: #9f9872;
       border-radius: 6px;
   }

   #css-modified .expand-panel-button app-rotating-arrow-icon {
       background-color: #2a2828;
       color: #9f9872;
   }

   #css-modified .expand-panel-button .panel-label {
       color: #9f9872;
   }

   #css-modified .select-options-container .button-close-container {
       background-color: #2a2828;
       color: #9f9872;
   }

   #css-modified .select-options-container .button-close-container path{
       fill: #9f9872;
   }

   #css-modified .select-options-container .button-done-container {
       background-color: #2a2828;
       color: #9f9872;
   }

   #css-modified .select-options-container .button-select-all-container {
       color: #9f9872;
   }

   #css-modified .select-options-container .button-select-all-container path {
       fill: #9f9872;
   }

   #css-modified .select-options-container .button-clear-all-container {
       color: #2a2828;
   }

   #css-modified .select-options-container .button-clear-all-container path{
       fill: #2a2828;
   }

   #css-modified .select-options-container label.colored{
       color: #9f9872;
   }

   #css-modified .select-options-container label.colored:before{
       background-image: none;
       background-color: #9f9872;
       border-radius: 100%
   }

   #css-modified .intiaroPopup {
       background-color: #2a2828;
       color: #9f9872;
   }

   #css-modified .intiaroPopup .popup-header {
       color: #9f9872;
   }

   #css-modified .intiaroPopup .download-silo-button {
       float: right;
   }

   #css-modified.intiaroConfigurator ::-webkit-scrollbar-thumb {
       background-color: #9f9872 !important;
   }

</style>

<div id="css-modified" class="intiaroConfigurator"
       data-customer-id="IntiaroWLShowcase"
       data-product-id="13934"
       > Loading...
</div>

Loading...