Self-Styling

Styla Frontend offers styling capabilities and caters to both non-technical and highly technical users.

In the Styla Editor you have the option to set your style using our easy-to-use interface or coding JSS (CSS in JS) directly.

• Styling Levels
  • Styla fallback styling
  • Global styling settings
  • Style Presets
  • Module-specific Styling
• The global self-styling sidebar
  • How to access
  • Content of the self-styling sidebar
    • Colors
    • Typography
    • Buttons
    • Elements & Settings
    • Custom Styling

Styling Levels

Overall, there are 4 levels of styling that are applied to elements:

1. Styla fallback styling

Styla has fallback defaults for all aspects of styling. These can't be edited. If nothing else is defined on another level, these fallbacks take effect.

2. Global styling settings

 

This is useful to ensure consistency across the storefront and adherence to your brand guidelines.

There are global styles that apply throughout your storefront, if none of the below levels is applied to a specific element. By editing these global, you can change how ALL elements of a certain type are styled, existing ones or new ones.

Access them by clicking on “Global Styling” when editing any page or base layout.

3. Style Presets

 

This is useful, for example, if you have a number of different styles of banners in your brand guidelines and want to select which one of those is the right one for each situation. A developer can create each of these styles once and then they can be applied selectively by marketing users.

Using Styla’s Style Preset Manager, you can create complex Style Presets that you can apply to one or more elements when you see fit with a simple click. If a Style Preset is selected for a specific element, it overrides the global and module-specific styling for that element. You can create many style presets for all of Stylas native content Elements.

Access them by clicking on the cog-wheel icon and selecting “Presets”:

There, click "Create New" and select the element you want to create it for:

Once you have created a preset, go to the element you would like to apply it to, and select the Presets name under the Settings tab in the “Style Presets” area.

Find out more about this in the Presets documentation (coming soon).

4. Module-specific Styling

 

This is used for when you would like to make one-off design changes to a single element of a page.

While editing a specific element on a page, you may set some specific styles in the Settings or Advanced tab for this element only.

Access them by going to the element you want to apply it to, and selecting the Custom Styling tab. Edit the JSS code there to achieve the design you envision.

Find out more about this in the advanced self-styling documentation.

The global self-styling sidebar

The self-styling sidebar is used to define and change the basic theme and styling values used by Elements such as colors, Typography (fonts), buttons and some default settings for specific elements. It’s also possible to add custom CSS using the JSS (CSS in JS) format in the Custom Styling tab.

How to access

The self-styling sidebar can be accessed while editing a page or a layout standard by pressing the following button at the top bar:

Content of the self-styling sidebar

The self-styling sidebar contains 5 tabs:

1. Colors
2. Typography
3. Buttons
4. Elements & Settings
5. Custom Styling

Each tab contains a set of related theme values and settings. The style adjustments can be immediately previewed on your page on the right side. After changing any value in any tab you can choose to either discard these settings or apply them globally. Choosing the latter applies the settings and triggers a full re-render of your storefront.

Colors

All the default colors you see in elements are listed in this tab. These colors can also be referenced in the JSS code in the Custom Styling tab.

Setting the colors is as easy as clicking the color box and either choosing a color from the color picker or directly entering a HEX or RGBA value.

Typography

All the font formats you can see and set in Elements are listed in this tab. The font formats can be selected in certain Elements in the Advanced tab (Banner, Text, Text on Video, Accordion and Navigation). These font formats can also be referenced in the JSS code in the Custom Styling tab.

To adjust a font format, click on its title to reveal the following fields:

1. Font family
   You can search for and use any font that is available on Google fonts.
2. We can also add your custom fonts on request. Contact us for more information.
3. Size
   You can choose to set the font size as Small, Normal, Large and Extra Large. These sizes are relative and calculated based on the overall density you choose in Settings & Elements.
4. Weight
   You can choose to set the font weight from the available option. Each font might have different options depending on what font weights are available on Google fonts.
5. Style
   You can choose to set the font size as Normal, Underlined, Italic or Italic Underlined.
6. Default Color
   You can choose to set the default color for a specific font format from the list of the available colors that were previously defined in the Colors tab. The default color can be overwritten in element specific settings.

Buttons

CTA Buttons can be added to Banner, Text and Text on Video elements and can be use one of four Style Presets: Primary, Secondary, Tertiary and Quaternary.

Our product and cart elements (Slider & Grid, Product listing, Product details, Cart & Minicart) also feature buttons that will soon be style-able within the Buttons tab.

All 4 CTA style presets can be adjusted in the Buttons tab. In each preset the following button styles can be defined:

1. Typography
   You can choose the font format defined in the Typography tab.
2. Margin & Padding
   You can set the inner and outer spacing of the button. These sizes are relative and calculated based on the overall density you choose in Settings & Elements.
3. Corner Radius
   You can define how rounded the corners of a button should be. This can be set as either pixel or percentage (of the buttons width) values.
4. Fill in
   This is the fill/background color of the button. You can either set a custom color or choose one from the previously defined colors for both the default and hover state of the button.
5. Border
   You can set the border settings of the button. These settings consist of the color (custom or pre-defined) for both the default and hover state, border width (in px) and border style (e.g. solid, dashed, etc.)
6. Text Color
   You can either set a custom color or choose one from the previously defined colors for both the default and hover state of the button.

Elements & Settings

This tab contains general settings for the page layout as well as default settings for re-usable elements.

These default settings will be applied to the respective newly added elements on a page until they’re manually changed in the settings and advanced tabs while editing.

You can define the page layout and default settings by expanding the following sections:

1. General settings
   Lets you define the general layout of the page
   1. Desktop page max width (in pixels)
      This is the width of a group/row when the width is set to default on desktop
   2. Breakpoint mobile (AKA mobile page max width, in pixels)
      This is the width of a group/row when the width is set to default on mobile
   3. Desktop smallest group width (in pixels)
      This is the width of a group/row when the width is set to Smaller on desktop
   4. Mobile smallest group width (in pixels)
      This is the width of a group/row when the width is set to Smaller on mobile
   5. Page margin (left & right, in pixels)
      This is the left and right margin of a row, when the row width is set to default
2. Accordion
   Lets you define the defaults for all options in the settings and advanced tab of the Accordion element.
3. Module slider
   The module slider is a layout option that can be chosen while editing a Group’s settings.
   In this section, you can define the defaults for all options of the module slider.
4. Slider & grid
   Lets you define the defaults for all options in the settings and advanced tab of the Slider & Grid element.
5. Text on video
   Lets you define the defaults for all options in the settings and advanced tab of the Text On Video element.
6. Video
   Lets you define the defaults for all options in the settings and advanced tab of the Video element.

Custom Styling

Here you can edit code directly to achieve advanced custom styling. Careful - for advanced users only. Read the documentation here for more information and get in touch with any questions.