Theme Style

Theme Style provides a comprehensive way to define default styling options for various elements across your online store. These global settings allow you to customize the typography, buttons, icons, images, form fields, background, layout, breadcrumb, page title, and lightbox, taking precedence over the default theme styling settings. With the Theme Style feature, you can create Style Guides that ensure consistent typography, colors, and design elements throughout your entire site.

Benefits of Theme Style Settings

For New Projects: Creating a Style Guide in Theme Style allows you to pre-define the styles of various building blocks, such as headings, body text, buttons, images, and input fields. This approach facilitates rapid page building with fewer CSS rules, resulting in faster loading speeds. Any changes to fonts or buttons can be easily applied across the entire store, ensuring a cohesive design. Creating the style guide before building pages will later streamline the process, enabling faster page building.
For Existing Shops: For existing online stores, the Theme Style feature offers significant advantages. You can create a Style Guide and apply it to new pages while optimizing older pages by disabling individual style definitions applied to widgets. This step-by-step process enhances page loading speeds. Additionally, if your Bootstrap-based theme includes elements that were previously unchangeable, such as default button colors, you can now customize them easily with Creative Elements. This feature helps create a consistent look and feel across your store, simplifying navigation for visitors and potentially increasing conversions.

Note: In order for Theme Style to affect all relevant elements, please disable Default Colors and Fonts from the Settings Page.

Upon installing the module, a default Theme Style is automatically created. You can edit this default Theme Style by navigating to Creative Elements > Theme Builder > Theme Style.

Tip: After entering the editor, it is recommended to import the Default Style Guide (the first one) from the Template Library. This action provides a predefined template with all editable elements, allowing you to see the applied style settings automatically on these widgets.

How to Set Theme Styles

Creating a new template

From your PrestaShop admin, navigate to Creative Elements > Theme Builder.
Go to the Theme Style tab.
Click on the Add new button in the top right corner.
Provide a title for easy identification (this will only be visible to you).
Remember to Save your changes to ensure they are applied.

Creating a new Theme Style template

Now you can edit your Theme Style by clicking on Edit with Creative Elements.

Opening from the editor

While editing any content, click the hamburger menu in the upper left corner.
Click on the Theme Style button.

Define and customize the design elements.

Body

Text Color: Set the primary text color for the body.
Typography: Customize the font family, weight, style, and size for the body text.
Paragraph Spacing: Adjust the spacing between paragraphs.

Link (Normal & Hover)

Color: Set the color for the link in normal and hover states.
Typography: Customize the font style, size, and weight for the link text.

Heading (H1-H6)

Color: Define the color for all heading elements.
Typography: Adjust the font, weight, size, and style for the headings.

Display (S-XXL)

Color: Set the color for the display text, available in sizes from S to XXL.
Typography: Customize the font family, size, weight, and style for display text.

Creative Elements buttons

Default, Primary and Secondary

Typography: Customize the font style, size, and weight for button text.
Text Shadow: Apply a shadow effect to enhance button text visibility.
Background Color (Normal & Hover): Define the button's background color in both states.
Box Shadow (Normal & Hover): Add a shadow effect to create depth and highlight interactions.
Border Type (Normal & Hover): Set the border style, such as solid, dashed, or none.
Border Width (Normal & Hover): Adjust the thickness of the button's border.
Border Color (Normal & Hover): Define the border color for normal and hover states.

Size (From XS-XL)

Font Size: Adjust the text size based on the selected button size.
Padding: Set the internal spacing for a balanced button layout.
Border Radius: Control the corner roundness for different button styles.

Theme buttons

Default, Primary and Secondary

Typography: Customize the font style, size, and weight for button text.
Text Shadow: Apply a shadow effect to enhance button text visibility.
Background Color (Normal & Hover): Define the button's background color in both states.
Box Shadow (Normal & Hover): Add a shadow effect to create depth and highlight interactions.
Border Type (Normal & Hover): Set the border style, such as solid, dashed, or none.
Border Width (Normal & Hover): Adjust the thickness of the button's border.
Border Color (Normal & Hover): Define the border color for normal and hover states.
Padding: Set the internal spacing for a balanced button layout.
Border Radius: Control the corner roundness for different button styles.

Primary Color (Normal & Hover)

Set the main color of the icon for both states.

Secondary Color (Normal & Hover)

Define the secondary color, typically used for dual-tone or background elements.

Size

Adjust the overall dimensions of the icon.

Padding

Control the spacing around the icon for proper alignment.

Border Width

Set the thickness of the icon's border.

Border Radius

Define the roundness of the icon's edges for different styles.

Border Type (Normal & Hover)

Choose the border style for the image.

Border Width (Normal & Hover)

Set the thickness of the image border.

Border Color (Normal & Hover)

Define the color of the border.

Border Radius (Normal & Hover)

Adjust the roundness of the image corners.

Opacity (Normal & Hover)

Control the transparency level of the image.

Box Shadow (Normal & Hover)

Add shadow effects for depth and emphasis.

CSS Filters (Normal & Hover)

Apply visual effects like blur, brightness, or contrast.

Transition Duration (Only on Hover)

Set the time for hover effects to take place smoothly.

Label

Color: Set the text color of the form labels.
Typography: Customize the font, size, and style of the labels.

Field

Typography: Define the font, size, and style of the input text.
Text Color: Choose the color of the text inside the field.
Background Color: Set the background color of the input field.
Box Shadow (On Normal and Focus): Add shadow effects for depth and emphasis.
Outline (Only on Focus): Apply an outline effect when the field is active.
Border Type: Select the style of the border.
Border Width: Adjust the thickness of the border.
Border Color: Choose the border color for normal and focus states.
Border Radius (On Normal and Focus): Set the roundness of the field’s corners.
Transition Duration (Only on Focus): Control the animation speed when focusing on the field.
Padding: Adjust the spacing inside the field for better readability.

Background Type

Select the background type for the body, wrapper and content sections.

Classic

Color: Set a solid background color.
Image: Upload an image to use as the background. Additional settings include:

Gradient

Color: Select the primary color for the gradient background.
Location: Define the starting position of the primary color in the gradient effect.
Second Color: Select the secondary color to blend into the gradient.
Location: Set the starting point of the secondary color within the gradient.
Angle: Adjust the angle at which the gradient flows (e.g., horizontal, vertical, diagonal).

Override Theme Container

Set this so your theme also inherits the same container widths as the Creative Elements content.

Content Width

Sets the default width of the content area (Default: 1140)

Widgets Space (px)

Sets the default space between widgets (Default: 20)

Text Color

Set the color of the page title text.

Typography

Choose the font, style, and size for the page title.

Text Align

Align the page title text to the left, center, or right.

Custom CSS

Apply custom CSS globally beyond the default settings.

Note: This requires CSS knowledge—use carefully, as incorrect syntax can impact other areas of the site.

/* For main element */
selector { 
  color: red; 
}

/* For child element */
selector .child-element { 
  margin: 10px; 
}

/* Or use any custom selector */
.my-class { 
  text-align: center; 
}

If you want to learn the basics of CSS, W3Schools is a great resource for that.