Styling

This section covers information about the main theme sections.

3.1 Header and Navigation

3.2 Footer

3.3 Colors

3.4 Text and Content

3.5 Blog Layout

3.1 Header and Navigation

The styling options for header and navigation are:

Image logo/text logo and favicon

You can choose to use a image logo or just text with the theme’s default font. You can also upload a custom favicon, the recommended size is 64x64px. If an image logo is chosen, the option for the logo size and padding will be visible.
 
Powerstore Theme: Logo imager or logo text
 

Header

The header can be set as floating, which will scroll with the content, and fixed, which will always stay at the top of the site as an overlay. If a fixed header is chosen options for overlay color, overlay transparency and overlay outline color and style will be visible.

Floating Header

 
Powerstore Theme: Floating Header
 

Fixed Header

 
Powerstore Theme: Fixed Header
 
The PowerStore theme includes five different header layouts and allows you to control the header’s height and padding.

Depending on the chosen layout, the header will include a main menu, secondary menu, search form, shopping cart and headline.

 
Powerstore Theme: Header Layouts
 

Header cart items

When the WooCoomerce plugin is active, the header will include an icon and number of items in the cart, the background color and text colour for this item can be controled through Header section in the Theme Options.

 
Powerstore Theme: Header cart items
 

3.3 Colors

Colour palettes

PowerStore theme comes with 4 pre-built colour palettes but also allows you to build your own custom color combination, in order to do this choose “Custom palette” in Theme Options->Colors->Color palette.

 
Powerstore Theme: Color palettes
 

The palette colors can be also used in content with the following css classes:

A color for text: “color_a_text”
A color for background: “color_a_bg”
B color for text: “color_b_text”
B color for background: “color_b_bg”
C color for text: “color_c_text”
C color for background: “color_c_bg”
D color for text: “color_d_text”
D color for background: “color_d_bg”
E color for text: “color_e_text”
E color for background: “color_e_bg”

 

Background

Through Theme Options->Colors->Background you can choose to use a plain color for background or a pattern (image).

 
Powerstore Theme: Background color
 

Site, accent and button colors

The main site color, accent colors and buttons colors are as follows:

Main site color: color A of the palette
Main site accent color: color B of the palette
Main button background color: color B of the palette
Main button text color: color A of the palette

These colors can be overridden using the specific color control for the main site color, main site accent color, and button colors in Theme Options->Colors

 
Powerstore Theme: Main site color and main button color
 

The button style can be also used in content through css classes as follow:
Main button: “ctm_main_buttons”
Secondary button: “ctm_secondary_buttons”

3.4 Text and Content

Headings

PowerStore theme allows you to control the style for heading (H1-H6) and p (paragraph) elements. In Theme Options->Text you will be able to choose color, font-family and font-size for each element.

Powerstore Theme: Headings style
 

Visual Composer

PowerStore theme also comes with Visual Composer which allows you to build pro responsive page layout with a drag and drop interface and built in shortcodes.

 
Powerstore Theme: Visual Composer
 

3.5 Blog Layout

“Read More” button

You can change the “Read more” button text in Theme Options->Blog.

 
Powerstore Theme: Read More button
 

Number of posts per page

You can change the number of post per page that is displayed in the blog archive through Theme Options->Blog.

 
Powerstore Theme: Number of posts
 

Sidebars

You can control what sidebars are displayed in blog archive and in single entry view in the Blog options under Theme Options.

 
Powerstore Theme: Blog sidebars
 

Post metadata

You can choose to display or hide metadata for blog entries in the blog options under Theme Options.

 
Powerstore Theme: Display Metadata
 

Related posts

If you wish to display related posts after the post content in the single entry view you can enable this in Blog options, under Theme Options.

 
Powerstore Theme: DIsplay related posts
 

Post featured imageYou can control the position for the featured image in Blog options under Theme Options choosing to display it left, centre, right or as hero image.

 
Powerstore Theme: post featured image