MODx themes for MODx Revo CMS
  • Welcome to MDxThemes - MODx themes website !
  • Premium high quality Website Modx themes
  • Bootstrap enabled MODx themes
  • HTML5, CSS3, responsive & SEO enabled themes
  • Modx theme Documentation and Support
  • MODx theme tutorials on building a website with MODx CMS.
  • Fast, super easy & powerful theme management system.

Theme Documentation

QuickStart Package Installer
Template Package Installer
Configuring Theme
Configuring Logo, Favicon & Tracking Code
Adding/ Editing Pages
Adding/Modifying Chunks
Editing Template
Multiple Child Templates
 

 

QuickStart Package Installer

Video:

 

1) Unzip the file (Filename.zip)

2) Upload the transport package file to your core packages folder.

3) Using package manager, look for packages locally.

4) Install the template package and wait for it to complete.

5) Login to the manager

6) One last step: Go to Extras >> Installer and reinstall the ColorPicker Package

7) Clear the cache. Open MDxConfig setting resource and save it.

Top

 

Template Package Installer

Video:

 

Installation Instruction:

1) Upload the template transport package to your core >> packages directory.

2) From backend manager >> System >> Package Management Search for packages locally.

3) You will see the new template package, Install it.

4) Create a new resource in your left resource tree. Name it default theme or anything you like. Select template mdx_config. In settings tab select "Content Type" CSS. Publish and check Hide from menus.

5)

a) Create/edit any resource, select template you installed(MDx Aaron / MDx Apostle etc ).
b) In templates variables, in template variables search for "Select the Config Resource" and select the default theme you created.
c) Save and view it.

By default the template variables are not categorized when you install the template only package. Create some appropriate categories and save the tv's in respective categories as below image. You can organize them in any category you like.

Organizing the categories will help in viewing and managing the template variables when you create the pages/resources for your website.

 

The only issue you might run into is the path. If you have installed modx in a subfolder, you need to edit 2 chunks( mdx_BaseHead & mdx_jsFiles )

Edit the sub folder path as below

In mdx_BaseHead replace the bold text

<link type="text/css" rel="stylesheet" href="http://www.mdxthemes.com/assets/templates/mdx_aaron/min/?b=YOURSUBFOLDER/assets/templates/mdx_aaron/css&amp;f=" />

In mdx_jsFiles replace the bold text

<script type="text/javascript" src="http://www.mdxthemes.com/assets/templates/mdx_aaron/min/?b=YOURSUBFOLDER/assets/templates/mdx_aaron/js&amp;f="></script>

Top

 

Configuring Theme

The theme configuration resources can be used to configure the layouts, width, color & general site parameters like logo favicons but not limited to it. You can add more parameters as needed. All theme's are stored under Themes container in the document tree.

Mix match the config options to create as many themes you like.

To create themes, create new resource under Themes Container in document tree and select template mdx_config. Fill in appropriate parameters as needed to create your themes.

Select CSS as content type and save it.

Configure Logo, Favicon & Tracking code

Edit the template you are using for your website. Under "Template Variable tab" Select MDx_Global_Info.

Favicon: To add/replace the favicon select the favicon from the file browser window. Select the uplaod button if you want to upload your favicon as shown in the image below.

Tracking code: Simply insert your custom tracking code or Google Analytics code.

Logo: You can add/update your logo image here. The logo can be an image or text.

Top

 

Adding/ Editing Pages

A single template is all you need to create all kinds of pages/layouts. Create a new resource or edit any resource, use template MDx Apostle.

 

MDx Apostle layout consists of 10 mobule positions. See image below.

To dynamically add chunks to your pages, select Template variable tab. In category MDx Apostle you have all chunks listed in appropriate positions as in above displayed layout image.

Similarly blog related images and videos go in MDx Blog Category.

The Layout Config

Select The Config Resource: This dropdown lists all themes. Select any theme you would like to use for your page. Keep this blank if you want to inherit the same theme for child pages.

External URL:If you would like to display an external page like a CRM form or any html, enter the url here and select External URL from "Select Type of Content" see below image. The url will be wrapped in an iframe. You can add more content types and extend this system as per your requirement.

Three Column Layout: The template content is three column collapsible layout. Select any layout you like. To collapse right or left column, just deselect the chunks in concerning positions.

Meta Data: The template is SEO optimized and custom meta keywords & Meta tags for every page can be used to display the same.

Slider: The slider is a migx template variable. It stores the image, description, title and the url of the slide. The slider data will be used by Flexislider or bxslider to display the slideshow. You need to display flexslider or bx slider in any position you like.

 
Top

 

Adding/Modifying Chunks

The above image displays the chunk categories which are attached to the 10 module positions. The chunks inside these categories get listed as selectable checkbox for you to display them on any particular page. You can add any number of chunks inside these marked categories. This feature also extends limitless possibilities for your website. You can also move chunks in other positions you like.

 
Top

 

Editing Template

You can edit/add template positions to suit your needs. To add more positions you can either copy/paste a position and make appropriate changes as needed.

 

Sample code:

Explanation:

The above code is an example of "Extra" position in template layout. The below code generates the list of the chunks to be listed as checkboxes when you edit or add a resource. The code is wrapped in a conditional statement which checks if the position is empty. If not empty it grabs all chunks and displays it. Hence does not display any extra divs or code if empty.

Breaking up further the &wrapper has section parameter. You can replace it with aside or a simple div. &wrapperid is the "id" and &wrappergrid is the "class" for the section or div for that position.

The position can be wrapped in any html code as needed.

 

 
Top

 

Multiple Child Templates

"Select Type Of content" is The template variable which stores the list of all child template. Child template are nothing but Chunks. You can create any number of chunks for different content layouts like we did for blog, External URL etc.

 

The layout chunks you create need to be added in the template variable mdx_Layout_Content for eg: layoutone==LayoutOne||layout2==LayoutTwo and so on.

 
Top

 

For Queries & Comments

Feel free to contact us:

Email: support@mdxthemes.com

Twitter: https://twitter.com/trussframework

 
Top