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 & Less
  • Bootstrap Framework
• 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.

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.

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 to not show up when editing even though they still functionally work.

Sample code you can try (advanced):

The following code will add a new text "Center" and "Justify" to the Editor style options of every page. If you are thinking of attempting this, you should have a good understanding of CSS AND TWIG.

To add the following code you will need to start by selecting “Themes” in the dark gray Admin menu on the left side of the screen. Then select the “Edit Custom CSS” directly under the “Preview & Customize” button. At the bottom left corner of the editor under the blue“Save” button. Now, locate and click the “Enable advanced theme editing” link. You will be asked to verify that you want to continue.

Now, find and click the “Global.less” file in the left column. Locate in the file the “.su_bootstrap_safe” container. it will be in different locations for each theme or may not exist in some themes. If the “.su_bootstrap_safe” container does not exist you will need to add it at the bottom of the file on a new blank line:

.su_bootstrap_safe {

}

Add the following inside of the “.su_bootstrap_safe” container:

.su_bootstrap_safe {
	.justify {
		text-align: justify;
		display: block;
	}
	.center {	
		text-align: center;	
		display: block;	
	}
}

Edit the “theme.conf” and find the “editor” section. Add in the following:

 	“editor”: {
		“styles”: [
			“button”,
			"justify",
			"center"
		]
	},

NOTE: notice above the commas are at the end of each item in a list except for the last item. It is important to ALWAYS follow this rule or the “theme.conf” file will not work!
Also, in some themes, the word “button” may be abbreviated “btn” or the entire section may not exist and need to be added.

Advanced Theme Editing

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.

Warning: Enable Advanced HTML Editing will orphan the current theme from receiving future automatic updates. 

• 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.
• theme.conf - this file contains basic information about the author, description of the theme, and updates to the theme modifier. The theme.conf file dictates what items are customizable in the Theme "Preview & Customize" editing interface.

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

We strongly urge that you back up your code (copy and paste) into a TXT file on you computer before each change. Also, test often!