Style Editor

The Style Editor is where you set the style definitions for the current theme that is applied across the entire website to determine its look and feel. You can set the font and colors of elements within the header, body, and footer sections of your website. You can set the default font and colors for each of the levels of HTML headings (H1, H2, H3, H4, H5) used on your website. You can also configure the button styles and the style of input fields used on your website.

The STYLE EDITOR is accessed through a menu on the website Design tab.

The settings in the Style Editor will vary depending on the theme currently applied.

Things you can do in the STYLE EDITOR tab include:

• Edit the font style of an element for the current theme
• Edit the color of an element for the current theme
• Edit the style of a button for the current theme
• Edit the style of an input field for the current theme

(Click on a link to see the instructions)

Settings

Header

• Logo (when text): lets you configure the font and color of the site name, displayed in the static header, when you have not uploaded any logos for your store.
• Logo (when image): lets you configure the settings of the logo displayed in the static header.
• Navigation: lets you configure the font and color of the text in the navigation menu in the static header.
• Navigation Background: lets you configure the background color of the navigation menu in the static header.
• Top Bar: lets you configure the font and color of the text in the top bar in the static header on your website and also the header in the customer account area.
• Top Bar Background: lets you configure the background color of the top bar in the static header on your website and also the header in the customer account area.

Floating Header

• Logo (when text): lets you configure the font and color of the site name, displayed in the floating header, when you have not uploaded any logos for your store.
• Logo (when image): lets you configure the style settings of the logo displayed in the floating header.
• Navigation: lets you configure the font and color of the text in the navigation menu in the floating header.
• Top Bar: lets you configure the font and color of the text in the top bar in the floating header on your website.

Floating Header Alternate Colors

• Logo (when text): lets you configure alternate font and color for the site name, displayed in the floating header, when you have not uploaded any logos for your store.
• Logo (when image): lets you configure alternate style settings of the logo displayed in the floating header.
• Navigation: lets you configure alternate font and color for the text in the navigation menu in the floating header.
• Top Bar: lets you configure alternate font and color for the text in the top bar in the floating header on your website.

Dropdown menu

• Background: lets you configure the background color of the dropdown menus on your website.
• Border: lets you configure the border color of the dropdown menus on your website.
• Text: lets you configure the font and color of the text in the dropdown menus on your website.

Mobile Menu

• Background: lets you configure the background color of the mobile menus on your website.
• Border: lets you configure the border color of the mobile menus on your website.
• Text: lets you configure the font and color of the text in the mobile menus on your website.

Body

• Background: lets you configure the background of the body section of your website.
• Text/Link: lets you configure the font and color of both the text and the links within the body section of your website.
• Text: lets you configure the font and color of the text within the body section of your website.
• Links: lets you configure the font and color of any links within the body section of your website.
• Breadcrumbs: lets you configure the font and color of the breadcrumb navigation within the body section of your website.
• Product Image Background: lets you configure the background color of any images in the body section of your website.
• Widget Container Line Height: lets you configure the line height of text within a widget container by adding space above and below the text. The height is specified as a factor of the current font size. Use the slider or specify a value between 0 and 25.

Headings

Lets you configure the font and color of headings 1 to 5 on your website.

Footer

• Footer Title: lets you configure the color of the title of the footer section of your website.
• Text/Link: lets you configure the font and color of the text and the links within the footer section of your website.

Buttons

• Standard: lets you configure the style settings of a standard button.
• Minor Action: lets you configure the style settings of a minor action button.
• IMPORTANT ACTION: lets you configure the style settings of an important action button.
• Hero Action: lets you configure the style settings of a hero action button.
• ADD TO CART: lets you configure the style settings of the Add To Cart button.

Inputs

Lets you configure the style settings of input fields.

Designer

• Heading Text Color: lets you configure the color of the Online Designer's heading text.
• Heading Background Color: lets you configure the background color of the Online Designer's heading text.
• Panel Text Color: lets you configure the color of the text within the panels of the Online Designer.
• Panel Background Color: lets you configure the background color of the panels within the Online Designer.
• Border Color: lets you configure the color of the border of the Online Designer.
• Button Text: lets you configure the color of the text on the buttons within the Online Designer.
• Button Background: lets you configure the background color of the buttons within the Online Designer.

To edit the font style used for an element in the current theme:

1. Click on the STYLE EDITOR menu item.
2. Click on the font name at the right of an element.
   

   The Font Settings popup will be displayed.

   

   The settings in the popup will vary slightly depending on the text type - title text, navigation text, link text, or paragraph text.

3. Select the font family from the dropdown list.
4. Configure the settings for the selected font.
   • Size: sets the size of the font in pixels.
   • Line Height: sets the line height of the text as a factor of the current font size.
   • Weight: sets the thickness of the characters of the text.
   • Italics: displays the font in italics if the checkbox is ticked.
   • Small Caps: sets all letters to lowercase if the checkbox is ticked.
   • Spacing: sets the letter spacing of the font as a factor of the current font size.
   • Letter Spacing: sets the letter spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 0.4.
   • Word Spacing: sets the word spacing of the font as a factor of the current font size. Use the slider or specify a value between -0.1 and 1.
   • Padding (available for paragraph text only): sets the padding on each side of the text container (top, right, bottom, left). Click on the brush icon to access the padding settings.
     
   • Decoration: sets the appearance of the decorative line, if any, added to the text.
     • none: no line is added.
     • underline: adds a 1-pixel line across the baseline of the text.
     • overline: adds a 1-pixel line across the top of the text.
     • line-through: adds a 1-pixel line across the middle of the text.
   • Transform: sets the capitalization style of the text.
     • none: leaves the text exactly as it was entered.
     • capitalize: capitalizes the first letter of each word.
     • uppercase: makes all letters uppercase.
     • lowercase: makes all letters lowercase.
   • Align (available for heading text only): lets you configure the alignment of the title text.
     • Left: aligns the title to the left of the widget container.
     • Center: aligns the title to the center of the widget container.
     • Right: aligns the title to the right of the widget container.
   • Edit Hover (available for navigation and link text only): lets you configure the appearance of the navigation or link text when you move the mouse over it. Tick the checkbox to enable the hover settings.
     
     • Hover Transition Duration: sets the length of time, in milliseconds, over which the hover properties will occur. Enter a value between 0 and 2000.
     • Hover Color: sets the color of the text on hover.
     • Hover Size: sets the size of the text on hover, in pixels.
     • Hover Weight: sets how thin or thick the characters of the text are when hovering over them.
       • 400: Standard weight
       • 700: Bold weight
     • Hover Italics: displays the font in italics on hover, if the checkbox is ticked.
     • Hover Decoration: sets the appearance of the decorative line, if any, added to the text on hover.
       • None: no line is added.
       • Underline: adds a 1-pixel line across the baseline of the text.
       • Overline: adds a 1-pixel line across the top of the text.
       • Line-Through: adds a 1-pixel line across the middle of the text.
     • Hover Transform: sets the capitalization style of the text on hover.
       • None: leaves the text exactly as it was entered.
       • Capitalize: capitalizes the first letter of each word.
       • Uppercase: makes all letters uppercase.
       • Lowercase: makes all letters lowercase.
   • Edit Active (available for navigation text only): lets you configure the appearance of the navigation text when it is active. Tick the checkbox to enable the active settings.
     
     • Active Color: sets the color of the text when it is active.
     • Active Size: sets the size of the text in pixels when it is active.
     • Active Weight: sets how thin or thick the characters of the text are when the text it is active.
       • 400: Standard weight
       • 700: Bold weight
     • Active Italics: displays the font in italics when it is active if the checkbox is ticked.
     • Active Decoration: sets the appearance of the decorative line, if any, added to the text when it is active.
       • None: no line is added.
       • Underline: adds a 1-pixel line across the baseline of the text.
       • Overline: adds a 1-pixel line across the top of the text.
       • Line-Through: adds a 1-pixel line across the middle of the text.
     • Active Transform: sets the capitalization style of the text when it is active.
       • None: leaves the text exactly as it was entered.
       • Capitalize: capitalizes the first letter of each word.
       • Uppercase: makes all letters uppercase.
       • Lowercase: makes all letters lowercase.

   For the Size, Line Height, and Spacing properties, you can use the slider to configure the setting.

   

   The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.

5. Close the font dialog box.
6. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To edit the color used for an element in the current theme:

1. Click on the STYLE EDITOR menu item.
2. Click on the color spot at the right of an element.
   

   The Color popup will be displayed

   
3. Change the element color.

   Click here for detailed instructions on how to use the Color popup.

4. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To edit the style of a button used in the current theme:

1. Click on the Design button in the Website Editor Toolbar.
2. Click on the STYLE EDITOR menu item.
3. Click on the button type you want to edit.
   

   The Button Style Settings popup will be displayed

   

   

   Additional settings will be available when an icon is selected

4. Configure the settings for the selected button type.
   • Text: lets you edit the font style and the color of text used in the button.
     • Click on the font name to edit the font style using the Font Popup. Click here for instructions.
     • Click on the color spot to edit the text color using the Color popup. Click here for instructions.
   • Background Color: sets the fill color of the button. Click on the color spot to edit the button background color using the Color popup. Click here for instructions.
   • Horizontal Padding: sets the distance from the content (the text and/or icon) to the left and right borders of the button, specified in pixels. Enter a value between 0 and 500.
   • Vertical Padding: sets the height of the button, using the em unit of measurement. An em is a value relative to the size of the current font. Enter a value between 0.6 and 6. For example, 2em means 2 times the size of the current font.
   • Border Width: the line thickness of the button's border, specified in pixels. Enter a value between 0 and 20.
   • Border Color: the color of the button's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
   • Rounded Corners: this lets you specify a radius value in pixels to determine how round the border corners are. Enter a value between 0 and 50.
   • Icon: lets you add an icon to your button.
     • Icon Color: lets you set the color of the icon. Click on the color spot to select a color using the Color popup. Click here for instructions.
     • Icon Size: lets you specify the size of the icon.
     • Icon Margin: let you specify the right margin of the icon as a factor of the line height. Use the slider or specify a value between 0.3 and 4.
   • Shadow: sets the appearance of the shadow, if any, added to the button.
     • None: No shadow is displayed.
     • On: Adds a consistent shadow around the entire border of the button.
     • Custom: Lets you configure a custom shadow. Click here for instructions on how to configure a custom shadow.
   • Edit Hover: lets you configure the appearance of the button when you move the mouse over it. Click here for instructions on how to configure the hover appearance.

   For the Horizontal Padding, Vertical Padding, Border Width, Rounded Corners, and Hover Transition Duration properties, you can use the slider to configure the setting.

   

   The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.

5. Click the cross in the top-right of the button style popup dialog box to close it.
6. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To edit the style of an input field used in the current theme:

1. Click on the STYLE EDITOR menu item.
2. Click on the input field.
   

   The Input Field Settings popup will be displayed

   
3. Configure the settings for the input field.
   • Text: lets you edit the font style and the color of text used in the input field.
     • Click on the font name to edit the font style using the Font Popup. Click here for instructions.
     • Click on the color spot to edit the text color using the Color popup. Click here for instructions.
   • Background Color: sets the fill color of the input field. Click on the color spot to edit the input field background color using the Color popup. Click here for instructions.
   • Line Spacing: sets the height of the input box, using the em unit of measurement. An em is a value relative to the size of the current font. Enter a value between 1 and 10. For example, 2em means 2 times the size of the current font.
   • Vertical Padding: sets the distance from the content (the text) to the top and bottom borders of the input box, specified in pixels. Enter a value between 0 and 25.
   • Horizontal Padding: sets the distance from the content (the text) to the left and right borders of the input box, specified in pixels. Enter a value between 0 and 25.
   • Border Width: the line thickness of the input field's border, specified in pixels. Enter a value between 0 and 20.
   • Border Color: the color of the input field's border. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
   • Rounded Corners: this lets you specify a radius value in pixels to determine how round the border corners are. Enter a value between 0 and 50.
   • Shadow: sets the appearance of the shadow, if any, added to the input field.
     • None: no shadow is displayed.
     • On: adds a consistent shadow around the entire border of the input field.
     • Custom: lets you configure a custom shadow. Click here for instructions on how to configure a custom shadow.
   • Text Color (disabled input): lets you configure the text color of a disabled input field. Click on the color spot to edit the disabled text color using the Color popup. Click here for instructions.
   • Background Color (disabled input): lets you configure the fill color of a disabled input field. Click on the color spot to edit the disabled background color using the Color popup. Click here for instructions.
   • Edit Hover: lets you configure the appearance of the input field when you move the mouse over it. Click here for instructions on how to configure the hover appearance.
   • Edit Focus: lets you configure the appearance of the input field when it is in focus. Click here for instructions on how to configure the focus appearance.

   For the Vertical Padding, Border Width, Border Color, and Rounded Corners properties, you can use the slider to configure the setting.

   

   The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.

4. Click the cross in the top right of the input field settings popup dialog box to close it.
5. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure a custom shadow:

1. Select Custom from the Shadow dropdown list.
   
2. Click on the brush icon that appears at the left of the Shadow drop-down box.

   The Shadow Settings popup is displayed.

   
3. Configure the settings for the shadow.
   • Color: sets the color of the shadow. Click on the color spot to change the shadow color using the Color Popup. Click here for instructions.
   • Opacity: sets the transparency level of the shadow. Enter a value between 0.00 and 1, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
   • Size: sets the size of the shadow width in pixels. Enter a value between 0 and 20.
   • Angle: sets the angle of the shadow in reference to the button. Enter a value between -180 and 180 degrees.
   • Distance: sets the distance in pixels of the shadow from the button both in the horizontal and vertical direction. Enter a value between 1 and 10.
   • Blur: sets the spread distance of the shadow in pixels. Enter a value between 0 and 20. The shadow will be sharp if set to 0. The higher the number, the more blurred it will be, and the further out the shadow will extend.
   • Effect: sets the location of the shadow.
     • Outset: displays the shadow outside of the button border.
     • Inset: displays the shadow inside of the button border.

   For the Opacity, Size, Angle, Distance, and Blur properties, you can use the slider to configure the setting.

   

   The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.

4. Click the cross in the top-right of the shadow style popup dialog box to close it.
5. Click the cross in the top-right of the settings popup dialog box to close it.
6. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure an element's hover appearance:

1. Tick the Edit Hover checkbox.

   The hover settings are displayed.

   
2. Configure the settings for the hover appearance.
   • Hover Transition Duration: sets the length of time, in milliseconds, over which the hover properties will occur. Enter a value between 0 and 2000.
   • Hover Text Color: sets the color of the element's text on hover.
   • Hover Background Color: set the element's background color on hover.
   • Hover Border Color: set the element's border color on hover.
   • Hover Shadow: sets the appearance of the shadow on hover added to the button, if any.
     • None: No shadow is displayed.
     • On: Adds a consistent shadow around the entire border of the element.
     • Custom: Lets you configure a custom shadow. Click here for instructions on how to configure a custom shadow.

     For the Hover Transition Duration property, you can use the slider to configure the setting.

     

     The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.

3. Click the cross in the top-right of the settings popup dialog box to close it.
4. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure an element's focus appearance:

1. Tick the Edit Focus checkbox.

   The focus settings are displayed.

   
2. Configure the settings for the focus appearance.
   • Focus Transition Duration: sets the length of time, in milliseconds, over which the focus properties will occur. Enter a value between 0 and 2000.
   • Focus Text Color: sets the color of the element's text, on focus.
   • Focus Background Color: set the element's background color, when it is in focus.
   • Focus Border Color: set the element's border color on focus.
   • Focus Shadow: sets the appearance of the shadow on focus added to the button, if any.
     • None: No shadow is displayed.
     • On: Adds a consistent shadow around the entire border of the element.
     • Custom: Lets you configure a custom shadow. Click here for instructions on how to configure a custom shadow.

   For the Focus Transition Duration property, you can use the slider to configure the setting.

   

   The slider will appear when you hover your mouse anywhere along the line between the label and the input field of the property.

3. Click the cross in the top-right of the settings popup dialog box to close it.
4. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.