n. Creating and including customized area blocks

n. Creating and including customized area blocks

When you create a new block or modify an existing block in the Admin Pannel >> Settings >> Block, you have to choose also the Position of the block from a drop down list: left, right, center, area1, area2, etc. These positions define not only the location of the block in the site's layout, but also the related template layout that will build the block as defined in the related templates files in the /ThemeName folder: leftblock.html, rightblock.html, centerblock.html. So if you create a new block and place it to the left, it will look like all the other left blocks as defined in the leftblock.html file.

You have just seen how to modify these templates in step i. Left and right blocks template. Remember only this few things if you want to edit them:

• leave the WIDTH fixed: 165 pixel is a good size

• to insert images to the block layout, read on the relative step of this chapters

• to format content of the block (title or text content), use CSS styles as

<­TD CLASS="blocktitle2"><­!-- [block-title] --><­/TD> just adding the blocktitle2 style into your /styles/style.css file.

Let's see now how to add customized block locations, called AreaBlocks:

If you want to place a block in a different position or want the block to have a different size or look, you have to create a specific block template, that you call area1block.html, area2block.html, etc. (Note: you can call thiese templates how you want, but then you have to make several changes in other files, as theme.cfg, and the template name isn't shown in any place, so leave area1block.html, etc.). You can create up to 9 area blocks in the default AutoTheme Lite version included into the MDPro installation.

As an exercice for this guide, you will create 3 areablock templates, then you will insert their desidered location into the theme.html, create 3 new example blocks in the Admin Pannel and assign each new block to one areablock template, finally preview in browser. If anything works, you will modify the areablock templates to customize them at your need.

• - 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