[How to] Work with theme options of MagenMarket's themes

ThemeOptions is one of our themes' great features. It allows you to customize theme typography and styles from backend with intuitive configurabled options such as: choose default preset style, customize the background, logo and slogan, customize the typography( font family with google fonts, font color, font size, etc.), customize the site layout and grid block layout, customize CSS code.

 

This article introduces theme's configuration options - what it is? available values? what is it for? From backend, navigate to Ma2 → Theme Options (or navigate to System → Configuration → Theme Options) to open theme options page. There are sections which allow you to configure or customize some options of theme.

Sections

• General options
• Typography
• Background
• Layouts
• Blocks' layout
• Custom CSS

 

1. General options

1.1. Preset styles

• Description: This option allows you select a preset color style for theme's "look and feel" as default.
• Options: Depends on individual theme design.

 

1.2. Custom logo

When you choose "Custom logo?" is YES, you can upload your own logo image, set the width and height of logo.

1.3. Slogan

The default slogan will be replaced with new one which you type in. Leave it blank to use the default slogan.

1.4. Favicon

You can upload your own favicon here. The alternative way is upload favicon.ico via FTP.

 

2. Typography options

In this section, you can custom theme typography such as: font-family with google fonts, text color, font-size and line-height.

Font family options include common web safe fonts (Serif, Sans-Serif and Monospace) and Google webfonts. All font-family select options have font preview feature so you can see how these font looked.

2.1. Body typography

 

2.2. Custom font-family for elements via css selector

If you are going to apply the custom font-family for some html tags or for some HTML elements which you knew its' CSS selector (class, id), we provided two text-area inputs for you. You can type your CSS selectors in, then select the appropriate font-family.

Someone may want more than 2 lists for more than 2 custom fonts BUT we are noticed that loading too many fonts will slow down the site loading speed.

2.3. Custom typography via custom CSS code

You can also customize any typography via custom CSS code. See Custom CSS.

3. Background options

In this section, you can change background color, background image and background mode for some main parts of template. Notice that not all of our themes support changing background for all template parts listed here. This is depends on individual themes' graphic design.

Background options are listed in below table for reference.

Table 1: Background options

Option	Values	Default	Description
Body background change?	YES/NO	NO	Choose YES to active custom background options below.
Body backgound color change?	YES/NO	YES	Choose YES to apply custom background color
Body background color	(color hexa code with hash)		Please choose a color with color chooser
Body background image			Please upload the backgound image
Body Background repeat	Repeat - None | All | X | Y	Repeat All	Background image repeat mode.
Body background position	left top | center top | right top | left center | center center | right center | left bottom | center bottom |  right bottom	left top	Background image position

 

4. Layouts options

This section will help you customize the theme column layout width. By type in the "Site width", "Left column width", "Right column width", we have: Main content width = Site width - Left column width - Right column width (px).

 

5. Blocks layout options

This section allows you to configure some blocks' layout model. We add some structured blocks for having a more scalable themes' block model. These blocks can be found in below figure.

These extra structured blocks can be configured to contain children blocks (content blocks / widgets) and display children blocks as grid columns or display each child per row.

To understand the block layout options, please see below table.

Table 2: Block layout options

Option	Values	Default	Description
Create column for blocks in BLOCK X Area	YES/NO	(depends on individual theme)	Choose YES to display children blocks as gid columns
Use default block column layout for BLOCK X Area	YES/NO	YES	Choose NO to define your own column width model
Width definition for columns in BLOCK X Area	(your definition)	100; 50,50; 33,33,33; 25,25,25,25; 20,20,20,20,20;	Definition of columns' width.Example: 100; // 1 column, 100%. 50,50; // 2 cols, each 50%. 33,33,33; // 3 cols, each 33%. 25,25,25,25; // 4 cols 20,20,20,20,20; // 5 cols

 

6. Custom CSS code

 

./.