Setting

The general theme section allows you to control the behaviour and the overall appearance of your theme.

To configure this part go to Extensions->Template->refraction->Options->Styles

Styles

The style section contains the customizer.

ClickSetting button to create your own style for the whole site or individual pages. You can pick colors, modify sizes and much more with a real time theme preview. Choose the style to be loaded in the layout options.

Сlick Copy and enter a new name to duplicate the style. Then you choose your new style from the list and can make adjustments.

 

Customizer

 

To get more capabilities use “Advanced ModeІ”. After all the changes, click Save.

Development

development

Setting

Description

Compile LESS in the browser on every page load

Check the first option and the browser automatically compiles your LESS files via JavaScript every time you load a page. This provides an appropriate testing environment. I It's not recommended to enable developer mode on the live site as the constant process of compiling is highly inefficient.

Allow styles to be loaded by URL. This will override the style originally loaded by the theme.

The option enables the browser to load styles by URL. This is useful, if you want to test different styles for your website. Disable this option, when your website goes live.

To finish your LESS modifications, hit the Compile LESS button and all your changes will be compiled into the final CSS.

Make sure, you aren't developing in the /styles/STYLE-NAME/css folders, because these folders will be overridden as soon as you hit the Compile LESS button.

Compression

To optimize page load time, choose one of the following compression options.

compression new

Setting Description

None

All files will be loaded separately and fully sized.

Combination + Minify

This option will minimize and combine CSS and JavaScript files into one single file.

Combination + Minify + Data URIs

Data URI embeds image data directly into the document, thus reducing the HTTP requests for your image files. This applies only to images that have a maximum size of 10kB.

Combination + Minify + Data URIs + Gzip

Gzip allows a faster data transfer through compressed data packages, instead of dealing with large data volumes by sending them separately

Responsive

The viewport meta tag controls the layout on mobile browsers. If it's not set, the default width on mobile is 980px and the site will look the same like on desktops.

responsive

Bootstrap

Bootstrap

Content

Content

Social Button

Social button

Modules

Modules in positions can be displayed in different styles.

Modules

Additinal scripts

Additional scripts

Tags:

Comments

Add New Comment