We are going to tell you about a powerful tool called Themler. You can use Themler to create themes for different websites, blogs and online stores.

With Themler you work with actual CMS data modifying pages, articles, blog post and products directly in Joomla, Wordpress, and other supported CMS. While designing you can use the predesigned sections, giving you results just in few clicks, or go with full customization of the smallest details.

let’s introduce you to the Themler, step by step.




Installing Themler

We’ll start with visiting themler.io website. Themler is available for desktop, and as a plugin for Joomla, Wordpress and some other supported CMS. We will demonstrate Themler features using an example of the Joomla plugin.

Download the Themler template for Joomla. The template is installed in a usual way for Joomla template, as a zipped package, from the Joomla Admin -> Extensions -> Extension Manager.

Themler plugin is installed in together with the template, and therefore it is easy for any Joomla user.

Make the Themler template default. Open the installed Themler template. After activation, the “Edit Template” button is available in the options. We begin with the Home template, which is used as the website’s front page.

If the Home template is not available in Themler, then please check that the current site menu includes the Joomla default menu item.



Adding the Initial Content

Let’s change the default Header section to an Intro section with the overlapping Header. Our Library has a large number of well-designed pages and sections of various themes, layout and structures.

We’ll add more sections by clicking the small green plus in the left panel, and this will add sections into the Content Area, and those sections will be shown only on the Home page. We will describe the area highlighting later.



User Interface

Themler’s user interface consists of several essentials.At the top there is the Ribbon toolbar. The File tab provides access to the main theme operations including Save, Export, Import and others. The Home tab allows editing of the most popular parameters for the selected element. Edit provides the quick access to the main properties of the selected element. Insert and Design Tabs will be described later

To the top right there are supported Responsive modes, also Save/Publish Theme options, Refresh Content to have CMS changes to be reflected in Themler.

“Apply Theme to CMS” applies changes made in Themler to your CMS. In the Left panel you see the following tabs:
- In Articles you can access and move website articles.
- Store is used in eCommerce templates. Store pages are available if Virtuemart plugin is installed and activated.

Also we see Outline containing the hierarchy of section elements, and Sections with the list of sections.

The left panel may be hidden, if unnecessary, by clicking the stripe with the arrow, and reopened again.



Content Highligting

Now it is time to get more in details on color highlighting in the Editor.

There are several areas for adding content highlighted with the color border. Orange shows areas that are shared among all templates, Blue is for areas of the active template, and Green is stored as the content of the current page.

The Property Window is opened automatically if you click the arrow in the right lower corner of the group in the Ribbon.

You can fix the panel.

The Property Window contains practically all properties that can be changed, allows the maximum customization of the selected element.

Also, you can open and hide the right panel by clicking the stripe with the arrow to the right of the screen. At the bottom of the screen there is a bar with the Layout View, Margins, and Path.

The Layout View if enabled shows the structure of the page. Margins show the control’s margins on mouse hovering, and are enabled by default, but may be disabled.

The Path shows the nesting of elements and containers. Clicking the Path’s links, we navigate the elements and containers fastly and easily.



Modifying the Content

Now, let’s proceed to the page contents. Change the image. In the open dialog, there are a large number of images from the Billion Photos library, available with the subscription. Let’s also change the Heading, click the Heading field and start typing the new text.

Move Subheading below the Heading. It is made very simple, as the position into which the element may be placed is highlighted with the color of the area, in this case, blue.

Now, we will change the position of the container with text in the section. To center the container select the Positioning in the Ribbon.



Creating Sections
Let’s create the section from scratch. Add a Blank section. Add a container. Add a Row with Columns. Add a text into the left column, and make it the Heading 2. Add another text and also modify it.Insert an Icon. Change the default icon, find and select one from the Billion Photos library. Move the icon above the Heading. Modify the Heading. Copy the contents of the left column into the right. Start with the icon. Copy and paste the icon into the second column. The placeholder for pasting in the right cell is shown in green as it is the content area. Copy the Heading and the text the same way.

Change the icon in the second cell. Change the Heading. We will now show how to change the column width, just grab and pull the border of the right cell. In the top Ribbon there is also the Width option, in which you can select the size of the columns in percents, and also set the widths for the Responsive modes. Add Padding for the Row. Add backgrounds for the cells. Add paddings for the cells. Center the content in the cells. Change sрacing between the cells.

Now in the Ribbon, we will change the width of the row to Fluid and back to the Wide again. Open additional properties clicking the arrow in the right lower corner of the group. We see the cell properties in the Right Panel. Let’s change the Top Margin. Switch to Margins and Paddings Tab. Unlock Margins. Enter the value only for the Top Margin. Unlock and hide the Right Panel.

Back in the left panel, in the Outline, we not only see the control hierarchy, but can also move elements on the page with simple clicking and dragging. Let’s switch icons in the columns. We see that Headings are now wrong, we will fix that later. To apply changes made in the Editor click the “Apply Theme to CMS” icon in the top right corner of the top toolbar.



Working in the Admin

Switch to the Joomla Admin. Go to the Home page. Please note that the content added in the Themler editor is converted into the shortcodes. After Conversion, visually the content can be edited only in Themler. In Joomla the usual text formatting will be no longer seen. Going back to wrong headings under the icons. Locate the text in the code. Edit it. Click “Save and Close”.



Template Settings

Switch back to Themler. Refresh Content. We are now proceeding to Template Settings. The Design Tab contains the properties that set the style for the whole template. Let’s change the colors, choosing different color schemes. Now, we will choose a different Font Scheme. To set the Default Style that will be used for an element by default, let’s do the following. Click More Styles. Let’s change the color, the size, and the width of the Heading 2. This new Heading 2 style will be used throughout the whole website. To quit the Default Styles, switch to the Home Tab. We see that the Heading has been changed.



Shared Areas

To illustrate the use of the shared areas, let’s modify Header. This can be done in any template of your website, but the effect will be seen on all other pages, since the area is shared. We can also hide the shared Header for some templates. In this example, we will hide the header for the Home page, and will unhide it again. For the Responsive mode changes are applied to all smaller sizes starting with the modified. For example, if we change the background for the Tablet Mode, it will also affect the Phone View, at that the Desktop and the Laptop Modes will not have those changes. For example, If we hide the Logo for tablet, for higher modes it will stay unchanged. We see the same header on the Blog template.



Blog Template

Go to Joomla Admin. To enable the Blog template you need to have the menu item of the Featured Articles or the Category Blog types. Themler theme supports either Joomla or Template Blog Layout settings. The Default Joomla Blog layout is used if nothing else is selected for the Themler Blog Layout. Now we’ll show how to enable the Posts template in Themler. For that, add a new menu item into the menu. Enter the Post title. Select Articles -> Single Article. Select an Article.

Open the Options Tab. Enable metadata, for example, Author and Date Modified, in the Options tab. Page template is also used for the articles. But unlike Post template, these Articles do not use metadata, therefore those are disabled in the Article options. Switch to Themler. Refresh Content.

Let’s change the template choosing any from the gallery.



Post Template

Switching to the Post template we see the same style, as it has the same Posts control, used in the Blog. This looks incorrectly, let’ fix this. To customize only the Post template , click Customize Template Style, this means that other templates including the Blog will not be affected. Let’s choose a different layout for the Post in the Ribbon. Much better now! Right?!

For the Post Images, usually, you can see that the Lightbox option is enabled by default, this will enlarge images by click. On the Ribbon Post Content -> Lightbox. Switch the Lightbox off.



Working with the Sidebars

Proceeding to Sidebar. Like the Header and the Footer, the Sidebar is the shared area, meaning it is the same for all templates. By default, we see the left sidebar, which is not typical for blogs. So, we will disable the left sidebar and will enable the Right one. Let’s add modules, for that we need Module Positions, we have one by default, but we will add one more for example. Click “Apply Theme to CMS”.

Switch to the CMS Admin. Let’s add the Vertical Menu. Add a new module of the Menu type. Type the Module Title and also specify what menu to use as the source. In the Position, search for “right” to assign the module to it. Proceed to the Advanced tab and enter the Module Class Suffix. Type *space*vmenu. It is important to use the space before the suffix name. Save this module.

Let’s add one more. Choose the Search module and again, type the module Title and choose the another position from our template that we have previously added into the right sidebar.

Save and Close. Switch to Themler. Refresh Content. We see that now there are modules in the positions in the Sidebar. Let’s change the style of our Vertical Menu. Select the Vertical Menu Module. Change the Block Header Background to make the Menu Header visible. Choose the preset from the ribbon. Add Padding for the Block Header



Working with the Footer

Finally, we will change the Footer, that is also shared, and the common for all templates. Select a design from the library. We see that there are the Backlinks in the Footer that are added by default. Those links may be edited and may be turned off. For that select Home -> Settings. In the right panel scroll down to the Backlinks, turn the switches off. Apply Theme to CMS Switch to the Home template.

We have finished the introduction to the Themler’s basics and principles. We do hope you liked it. Visit Themler.io for more information.

All the best! Bye!


See Also

Video Tutorials

We are going to tell you about a powerful tool called Themler. You can use Themler to create themes for different websites, blogs and online stores. With Themler you work with actual CMS data modifying pages, articles, blog post and products directly in Joomla, Wordpress, and other supported CMS. While designing you can use the predesigned sections, giving you results just in few clicks, or go with full customization of the smallest details. let’s introduce you to the Themler, step by step. <br> <iframe width="850" height="480" src="//www.youtube.com/embed/Q4ZZlILZJ_A?rel=0" frameborder="0" allowfullscreen></iframe> <br> **Installing Themler** We’ll start with visiting themler.io website. Themler is available for desktop, and as a plugin for Joomla, Wordpress and some other supported CMS. We will demonstrate Themler features using an example of the Joomla plugin. Download the Themler template for Joomla. The template is installed in a usual way for Joomla template, as a zipped package, from the Joomla Admin -> Extensions -> Extension Manager. Themler plugin is installed in together with the template, and therefore it is easy for any Joomla user. Make the Themler template default. Open the installed Themler template. After activation, the “Edit Template” button is available in the options. We begin with the Home template, which is used as the website’s front page. If the Home template is not available in Themler, then please check that the current site menu includes the Joomla default menu item. <br> **Adding the Initial Content** Let’s change the default Header section to an Intro section with the overlapping Header. Our Library has a large number of well-designed pages and sections of various themes, layout and structures. We’ll add more sections by clicking the small green plus in the left panel, and this will add sections into the Content Area, and those sections will be shown only on the Home page. We will describe the area highlighting later. <br> **User Interface** Themler’s user interface consists of several essentials.At the top there is the Ribbon toolbar. The File tab provides access to the main theme operations including Save, Export, Import and others. The Home tab allows editing of the most popular parameters for the selected element. Edit provides the quick access to the main properties of the selected element. Insert and Design Tabs will be described later To the top right there are supported Responsive modes, also Save/Publish Theme options, Refresh Content to have CMS changes to be reflected in Themler. “Apply Theme to CMS” applies changes made in Themler to your CMS. In the Left panel you see the following tabs: - In Articles you can access and move website articles. - Store is used in eCommerce templates. Store pages are available if Virtuemart plugin is installed and activated. Also we see Outline containing the hierarchy of section elements, and Sections with the list of sections. The left panel may be hidden, if unnecessary, by clicking the stripe with the arrow, and reopened again. <br> **Content Highligting** Now it is time to get more in details on color highlighting in the Editor. There are several areas for adding content highlighted with the color border. Orange shows areas that are shared among all templates, Blue is for areas of the active template, and Green is stored as the content of the current page. The Property Window is opened automatically if you click the arrow in the right lower corner of the group in the Ribbon. You can fix the panel. The Property Window contains practically all properties that can be changed, allows the maximum customization of the selected element. Also, you can open and hide the right panel by clicking the stripe with the arrow to the right of the screen. At the bottom of the screen there is a bar with the Layout View, Margins, and Path. The Layout View if enabled shows the structure of the page. Margins show the control’s margins on mouse hovering, and are enabled by default, but may be disabled. The Path shows the nesting of elements and containers. Clicking the Path’s links, we navigate the elements and containers fastly and easily. <br> **Modifying the Content** Now, let’s proceed to the page contents. Change the image. In the open dialog, there are a large number of images from the Billion Photos library, available with the subscription. Let’s also change the Heading, click the Heading field and start typing the new text. Move Subheading below the Heading. It is made very simple, as the position into which the element may be placed is highlighted with the color of the area, in this case, blue. Now, we will change the position of the container with text in the section. To center the container select the Positioning in the Ribbon. <br> **Creating Sections** Let’s create the section from scratch. Add a Blank section. Add a container. Add a Row with Columns. Add a text into the left column, and make it the Heading 2. Add another text and also modify it.Insert an Icon. Change the default icon, find and select one from the Billion Photos library. Move the icon above the Heading. Modify the Heading. Copy the contents of the left column into the right. Start with the icon. Copy and paste the icon into the second column. The placeholder for pasting in the right cell is shown in green as it is the content area. Copy the Heading and the text the same way. Change the icon in the second cell. Change the Heading. We will now show how to change the column width, just grab and pull the border of the right cell. In the top Ribbon there is also the Width option, in which you can select the size of the columns in percents, and also set the widths for the Responsive modes. Add Padding for the Row. Add backgrounds for the cells. Add paddings for the cells. Center the content in the cells. Change sрacing between the cells. Now in the Ribbon, we will change the width of the row to Fluid and back to the Wide again. Open additional properties clicking the arrow in the right lower corner of the group. We see the cell properties in the Right Panel. Let’s change the Top Margin. Switch to Margins and Paddings Tab. Unlock Margins. Enter the value only for the Top Margin. Unlock and hide the Right Panel. Back in the left panel, in the Outline, we not only see the control hierarchy, but can also move elements on the page with simple clicking and dragging. Let’s switch icons in the columns. We see that Headings are now wrong, we will fix that later. To apply changes made in the Editor click the “Apply Theme to CMS” icon in the top right corner of the top toolbar. <br> **Working in the Admin** Switch to the Joomla Admin. Go to the Home page. Please note that the content added in the Themler editor is converted into the shortcodes. After Conversion, visually the content can be edited only in Themler. In Joomla the usual text formatting will be no longer seen. Going back to wrong headings under the icons. Locate the text in the code. Edit it. Click “Save and Close”. <br> **Template Settings** Switch back to Themler. Refresh Content. We are now proceeding to Template Settings. The Design Tab contains the properties that set the style for the whole template. Let’s change the colors, choosing different color schemes. Now, we will choose a different Font Scheme. To set the Default Style that will be used for an element by default, let’s do the following. Click More Styles. Let’s change the color, the size, and the width of the Heading 2. This new Heading 2 style will be used throughout the whole website. To quit the Default Styles, switch to the Home Tab. We see that the Heading has been changed. <br> **Shared Areas** To illustrate the use of the shared areas, let’s modify Header. This can be done in any template of your website, but the effect will be seen on all other pages, since the area is shared. We can also hide the shared Header for some templates. In this example, we will hide the header for the Home page, and will unhide it again. For the Responsive mode changes are applied to all smaller sizes starting with the modified. For example, if we change the background for the Tablet Mode, it will also affect the Phone View, at that the Desktop and the Laptop Modes will not have those changes. For example, If we hide the Logo for tablet, for higher modes it will stay unchanged. We see the same header on the Blog template. <br> **Blog Template** Go to Joomla Admin. To enable the Blog template you need to have the menu item of the Featured Articles or the Category Blog types. Themler theme supports either Joomla or Template Blog Layout settings. The Default Joomla Blog layout is used if nothing else is selected for the Themler Blog Layout. Now we’ll show how to enable the Posts template in Themler. For that, add a new menu item into the menu. Enter the Post title. Select Articles -> Single Article. Select an Article. Open the Options Tab. Enable metadata, for example, Author and Date Modified, in the Options tab. Page template is also used for the articles. But unlike Post template, these Articles do not use metadata, therefore those are disabled in the Article options. Switch to Themler. Refresh Content. Let’s change the template choosing any from the gallery. <br> **Post Template** Switching to the Post template we see the same style, as it has the same Posts control, used in the Blog. This looks incorrectly, let’ fix this. To customize only the Post template , click Customize Template Style, this means that other templates including the Blog will not be affected. Let’s choose a different layout for the Post in the Ribbon. Much better now! Right?! For the Post Images, usually, you can see that the Lightbox option is enabled by default, this will enlarge images by click. On the Ribbon Post Content -> Lightbox. Switch the Lightbox off. <br> **Working with the Sidebars** Proceeding to Sidebar. Like the Header and the Footer, the Sidebar is the shared area, meaning it is the same for all templates. By default, we see the left sidebar, which is not typical for blogs. So, we will disable the left sidebar and will enable the Right one. Let’s add modules, for that we need Module Positions, we have one by default, but we will add one more for example. Click “Apply Theme to CMS”. Switch to the CMS Admin. Let’s add the Vertical Menu. Add a new module of the Menu type. Type the Module Title and also specify what menu to use as the source. In the Position, search for “right” to assign the module to it. Proceed to the Advanced tab and enter the Module Class Suffix. Type *space*vmenu. It is important to use the space before the suffix name. Save this module. Let’s add one more. Choose the Search module and again, type the module Title and choose the another position from our template that we have previously added into the right sidebar. Save and Close. Switch to Themler. Refresh Content. We see that now there are modules in the positions in the Sidebar. Let’s change the style of our Vertical Menu. Select the Vertical Menu Module. Change the Block Header Background to make the Menu Header visible. Choose the preset from the ribbon. Add Padding for the Block Header <br> **Working with the Footer** Finally, we will change the Footer, that is also shared, and the common for all templates. Select a design from the library. We see that there are the Backlinks in the Footer that are added by default. Those links may be edited and may be turned off. For that select Home -> Settings. In the right panel scroll down to the Backlinks, turn the switches off. Apply Theme to CMS Switch to the Home template. We have finished the introduction to the Themler’s basics and principles. We do hope you liked it. Visit Themler.io for more information. All the best! Bye! <br> ### See Also [Video Tutorials](page:4695) <br>