The custom theme design process Get a big picture view of the process for designing a custom website theme from scratch for Monkey Business Websites. Step by step documentation for creating amazing custom website design themes for Monkey Business Management System

The custom theme design process

Published on Thu, Feb 18 2016 by Adebola Ajiboye
To complete design of a new theme, you will need to ... 
  1. Create HTML layout code in your Website Templates
  2. Apply Theme Design classes to your HTML layout codes
  3. Launch the Style Wizard to style and create CSS code for the design.
Additionally for Theme Marketplace Designers
  1. Use appropriate Content Managers so users can publish content easily.
  2. Create placeholder content for required preview pages ( home, about ).
  3. Style major user interface elements as needed.
Create HTML layout code in your Website Templates
Open the website template in the editor and either create the HTML layout you want or copy / paste ( in CODE view ) the HTML layout code you already prepared.
Embed all relevant Content Managers in the layout code as needed. The only required Content Manager is the Pageview Object. 
Monkey Business Editor Content Managers
You must embed the Pageview Object  in your HTML code so Monkey Business can know exactly where to embed contents of the Page
To embed anything in your HTML code, in the editor, simply right-click and select Publish. For example to embed the Pageview object:
Embedding the Monkey Business Pageview Content Manager Object
Apply Theme Design classes to your HTML layout codes
Monkey Business Theme Design classes allow users to use the Style Wizard to quickly and easily customize the look, feel and design of the theme. To support this, you need to apply these classes to the relevant content containers in your design.
With the editor in WYSIWYG view, launch the editor's Style Wizard, select Presets, and then select Theme Design. For example...
Apply Theme Design Classes to your Monkey Business Theme Design Layout code
Monkey Business currently supports 6 main theme content blocks for theming. These are ( brand, menu, page, sidebar, sitemap and copyright ). Simply select these content blocks in your layout and apply the classes to them.
There are 2 sets of class names; you must apply 1 class from each set for each container. For example, as shown in picture above, for brand, you must apply both the background-color-brand and xc-appui-theme-brand-container names to the brand content container in your HTML layout.


Comment Type
Share this Page
$ 7.95 domain name registration.
Build your complete web solution: Brand, Website, Business.
Monkey Business Agency Inc. - Our business is building your business with software and services for smart, modern businesses.