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.
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.
The default slogan will be replaced with new one which you type in. Leave it blank to use the default slogan.
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.
|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.
|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;
Definition of columns' width.Example:
100; // 1 column, 100%.
6. Custom CSS code