Building the layout of your site with AutoTheme

Chapter 2: Building the layout of your site with AutoTheme

After the initial installation of the MDPro system without errors and after you have configured the basic settings in the site's Preferences, you now need to customize your site's layout and view. This is best done on a local machine first for the basic architecture of the templates, then transferred on the production server and maintained and modified on line, where the blocks and modules configuration is found.

MDPro provides a very simple but powerful graphical engine called AutoTheme, based on different HTML templates in the /themes folder, that can be edited with your favorite web editor: then, from the admin panel, you need only to assign the home page or the different modules' index pages or a certain block to the different templates layout files and your site will be flexibly customized in each part you want... That means that you first have to build templates (general models or skins), then assign them from the Admin Menu to the different objects (main page, modules, blocks). Simple, no?

This guide provides a step by step description on how to customize the site's look starting from zero.

Once you learned with the practic exercise of this guide, you will be able to create your own theme how you want: but you will be also able to easily modify existing AT themes you see on the web or you download for free at the above links.

Some basic knowledges on HTML, CSS and web editing are welcome, but the description will be as simple as possible: I hope to meet this target :-)

• - Index and Notes on the chapter
  • a. The theme engine: AutoTheme
  • b. Theme objects
  • c. The new Theme directory
  • d. The different Theme Templates you need
  • e. Creating the Main Theme Template: theme.html
  • f. The Three Column structure:
  • g. AT commands
  • h. Applying AT commands to theme.html template
  • i. Left and right blocks template
  • l. CSS styles
  • m. Including other AT commands
  • n. Creating and including customized area blocks
    • - Step 1: Create General Area block templates:
    • - Step 2: Inserting area blocks into theme.html
    • - Step 3: Creating 3 new blocks in the Admin Pannel
    • - Step 4: Customizing area block templates