Advanced Customization

Layout and Styling

All of our themes use a number of different web programming languages to optimize the layout and incorporate a responsive design. 

NOTE: If you make changes to the HTML theme's layout your website will no longer get bug fixes or updates with any new features that the CMS is using. We strongly suggest if you do decide to go this route you find a good way to back up your HTML code and keep that somewhere for future reference in the instance you decide to manually update your website.

Coding Languages

  • HTML
    • Twig Framework
  • CSS
    • Bootstrap Framework
  • Less
  • Javascript
    • Jquery

Getting Started

To begin customizing a themes code you will want to click on Themes located on the black bar on the left hand side of the screen when logged into your website as an administrator.

You will see there are a number of themes to choose from or you can create your own from scratch.

Note: We suggest the best route to go to make sure you don't lose any inherent functionality with your theme to do the following. Choose a theme or two that you like or want to restructure and modify that theme to get the end result. Creating a custom theme from ground up may not allow you to incorporate the built in carousel or featured image buttons as well as some other theme options.

Install Theme

Once you have chosen a theme that you want to work with you will see a button that says Preview and Customize. If the theme you want to make changes to is under Installed Themes then simply click on that theme to select it and proceed onto the Custom CSS.

If you have not installed the theme before then you will need install it by hitting the Preview and Customize button thus installing and adding it to your list of available themes. 

Custom CSS

To begin making changes to your themes styling you will click on Edit Custom CSS in small text just below the Preview and Customize button. This will take you to a page where you can make changes to your websites styling.

Note: Making changes to your CSS will NOT prevent your website from receiving updates/bug fixes so long as you make those CSS changes in this area.

Warning: Changing the font style can result in some of the icons when editing to now show up even though they still work functionally.

Advanced HTML Editor

To begin editing your themes layout and HTML select the theme you want to make changes to then hit Edit Custom CSS followed by clicking Enable Advanced HTML Editing. This will allow you to restructure your website from here.

Here you will see the sections with files that allow you to edit and add your own HTML, CSS, and JavaScript.
  • theme.conf - this file contains basic information about the author, description of the theme, and updates to the theme modifier.
  • Partials - files in this section allow you to add customization to the theme.
  • Scripts - the JavaScript files are stored in this section.
  • Styles - Add or modify the CSS and global.less files stored in this section.
  • Templates - HTML, Twig, and Bootstrap are the languages used in the templates.

Warning: Our support for coding and how to make changes in the Advanced HTML Editor ends here. Should you make changes to the website we are willing to see what we can do to try and help get your site back to a working state should something break but can not do this level of custom coding for you.