Custom Layouts, look and feel, templates, skins

o build a new site I start with this default instalation. Then I delete the contents of the stock fragments directory (Birds and Documentation) and create my new content, images and all. Use descriptive directory names and file names. Use dashes to make directory and file names more descriptive. The fragments/Birds directory might become the fragments/Birds-Birding-Photographys directory. Robopages will strip out the dashes when making keywords and page descriptions. Toucan.jpg might become Toucan-in-avacodo-tree.jpg for SEO purposes.

Make a backup copy of css/robo.css and then edit robo.css, or make a new css file name and edit conf/globals appropriately. Now you can add css items and/or change existing ones.

The biggest changes will be in the layouts directory. Back up that entire directory and then edit layouts/robo.xml as needed. All other *.xml files as well.

Study robo.xml. If what you see is not mostly self-explanatory it's possible you shouldn't be doing this.

XML elements describe a hierararhy. XML Elements can contain other elements but at various points the XML filters down to leaf level elements that have an element type name an "id" attribute and a "src" attribute:
<div id="footer" src="file"/>


The element type name DIV above maps to a <DIV> element in the HTML whose css id is #footer {}. It could be an <NAV> element rather than div, or any other HTML5 block element name. The src="file" attribute means the contents of this HTML DIV element comes from the plugins/file.php plugin.

You can specifify css class attributes in the XML too. The string "class" in PHP is a reserved language keyword so the XML uses klass for class.

<div id="nav" klass="toc" src="dynamicNavigation"/>
In the hypothetical XML above an HTML DIV element maps to the css found in #nav {} and to the css found in div.toc {}

Finally, for now, note to that the src attribute in each leaf level XML can specify more than one plugin as its content generators. The src attribute can be a comma delimeted list.
<div id="main-content" src="arcade,flexyFileContent"/>


The XML line above means the HTML DIV element whose id is "main-content" will be filled by HTML generated by two different plugins. The plugins/arcade.php plugin will run first. The plugins/flexyFileContent.php plugin will run second. This is useful because it means the content generated by plubins/arcade.php will not be surrounded by any HTML block element like a paragraph or a division. The contents of these two plugins can (with css) be made to float: left in order to form a liquid layout that appears well on both phones and desktops.