MagenMarket [How to] Work with theme options of MagenMarket's themes / MagenMarket.com News, Tutorials and Blog

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

MagenMarket Theme OptionsThemeOptions 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 Ma2Theme 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

 

1. General options

MagenMarket Theme Options - General options MagenMarket Theme Options - 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

MagenMarket Theme Options - General options - Custom logo MagenMarket Theme Options - General options - 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

MagenMarket Theme Options - typography options MagenMarket Theme Options - 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.

MagenMarket Theme Options - Font family options with Preview MagenMarket Theme Options - Font family options with Preview

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.

MagenMarket Theme Options - Custom font-family for selectors list MagenMarket Theme Options - Custom font-family for selectors list - examples

2.3. Custom typography via custom CSS code

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

3. Background options

MagenMarket Theme Options - background options MagenMarket Theme Options - 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.

MagenMarket Theme Options - An example for Body background MagenMarket Theme Options - An example for Body background

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

MagenMarket Theme Options - layouts options MagenMarket Theme Options - 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.

Ma2 Theme structured blocks diagram Ma2 Theme structured blocks diagram

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.

MagenMarket Theme Options - Blocks layout models MagenMarket Theme Options - Blocks layout models
MagenMarket Theme Options - Blocks layouts options MagenMarket Theme Options - Blocks layouts options

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

Ma2 ThemeOptions - Custom CSS code Ma2 ThemeOptions - Custom CSS code

 

./.

  Leave a Reply

Sorry, you must be logged in to post a comment.