Creating a Mango Blog Theme
2009 October 12
Having just created, or adapted rather, my first Mango Blog theme I thought it's worth noting down the process for creating a theme:
- First create a static HTML version of the theme you want to use, if you are adapting an existing theme then it's as easy as saving the theme locally through your browser by selecting "save page as..".
- Create a new directory for your skin in mangoblog/skins/
- Copy the saved index.html as index.cfm in your skin directory.
- Copy the images and styles for your theme into mangoblog/skins/your-new-theme/assets/images/ & mangoblog/skins/your-new-theme/assets/styles/.
- Now open the index.cfm of your new theme and the index.cfm of an existing Mango Blog theme; I used the cutline example from the mangoblog/skins/ directory as it uses the latest features.
- Identify the corresponding page sections between the existing cutline and your new index.cfm, e.g. typically you'll have the elements in the HTML head, the body head, the posts, the sidebar and the footer. Copy across the mangoblog custom tag calls and adapt the HTML to match the new theme.
- Create the skin.xml for your theme. Again, copying and adapting the cutline example is easiest. See this documentation for details on the meaning of each element. For now you'll probably want to keep the <pagetemplates> element empty as these define alternative templates.
- You can now enable the theme in the Mango Blog admin section and view your index page. If it errors just comment out sections until it works then gradually remove the comments to identify the area causing the error.
- Refine and perfect your index page. If you need to make more use of the custom tags than is in use in cutline, e.g. for conditional statements, just look at the source code in mangoblog/tags, it's all very easy to understand with the attributes at the top of each file.
- Once you are happy with the design, copy your index.cfm as post.cfm and open the cutline post.cfm and begin migrating the custom tags across. Repeat this for all the required templates.
Other resources:
- The Mango Blog documentation on using your own design.
- If you are migrating an existing blog to Mango Blog then this tutorial from Brian Rinaldi has lots of good advice.
- Here's a recording of an online meeting on Mango Blog skinning from start to finish by Sid Maestre where you can see him walking through the code changes step by step.