Use your own design

The easiest way is to copy a skin, change the directory name and start making changes (be sure to edit the skin.xml file to avoid conflicts)

Required templates

Your theme must implement the following cfm templates:

  • index.cfm: corresponds to the blog's main page
  • post.cfm: where a single post is shown
  • page.cfm: the default template for pages
  • generic.cfm: a generic template that can be used to show errors and by plugins to show their information when they need a page by themselves
  • archives.cfm: where the archives by date, category, and searches are shown
  • author.cfm: shows author information
  • error.cfm: it shows errors. It should contain minimal tags because you don't know what the error is, so it is possible that tags are failing too.

Recommended templates

  • archives_index.cfm: a page that lists all the archives (ie: by month, by category, etc).

You'll need to add it as a custom page template in the skin.xml file as follows:

<pageTemplates><template file="archives_index.cfm" name="Archives Listing Page" /></pageTemplates>

  • login.cfm: a custom login page

You'll need to add it as an admin custom page template:

<adminPageTemplates>
        <template id="login" file="login.cfm" />
</adminPageTemplates>

 

Theme registration

It must also contain an xml file:

If this file is not found, then the theme cannot be used.

Tags

Tags you can use in your template

Template events

Events a skin template should broadcast:

  • beforeHtmlHeadEnd: right before closing tag
  • beforeCommentFormEnd: only when there is a comment form (post.cfm, page.cfm)
  • afterHtmlBodyStart
  • beforeHtmlBodyEnd
  • afterFooterStart
  • beforeFooterEnd

14 Comments

  1. Allen
    How do we get the admin tool to recognize a design that we've created?
  2. Laura
    You need to place your theme folder in the skins directory. The folder must contain the skin.xml
  3. Allen
    Thank you. It was there as I had just copied and pasted another themes' file to use as a base to work off of. I needed to update the skin.xml. Viola! Very easy.
  4. Ananada
    Ananada
    Is there more documentation. I get stock with some tags not output any data, like the sidebar pods?
  5. Laura
    Ananada,
    Regarding the side bar pods, you may want to read this section:
    http://www.mangoblog.org/docs/documentation/use-your-own-design/pod-enabling-a-theme
  6. Unibands
    I have created a theme I think I now want to release for the community - where can I submit this skin? Thanks for a great blog engine!
  7. Laura
    Hi,
    I've setup a repository for contributed themes (http://code.google.com/p/mangoblog-extensions/ ). I'd give you access to it and you can commit it there. I can then add it to the administration downloadable themes.

    Thanks!
  8. simone
    THIS IS ALL SO COMPLICATED!!!
  9. Eric B
    @Simone: It can be overwhelming at first. I've relied on the ColdFusion Web Application Construction Kit books by Ben Forta. I have also found it useful to work on small, focused tasks, while reading up on the general principles of ColdFusion. Hang in there. - Eric
  10. Eric Miller
    I have been working (hacking) my way in to this juicy Mango for a while now. But what I need is a list of mango:tags / API. Dose any one have this? I have eaten my way through some of the skins but just can not find what I'm looking for or how to do what I want. Also I have tried to sign up on the forums but never got an email to finish the sign up. Laura thanks for this tasty fruit.
  11. Laura
    Hi Eric,
    I've slowly started to update and complete the documentation, but it is really lacking at this moment. I know! :)
    I've confirmed your user NImon in the forums, so you should be able to login.
  12. Eric Miller
    Eric Miller
    Thanks, Is their any thing I can do to help? I would like to. Just let me know drop me an email.
  13. Elliott
    I have a header.cfm and footer that I just want to apply. Why so difficult? Is there anyone out there who can do this for me?
  14. Eric Bourland
    Elliot,

    You will need to modify index.cfm, page.cfm, post.cfm, and generic.cfm to incorporate your header and footer design.

    Probably the easiest way to do this is to first build your own template -- including your header and footer design. Get it looking and working perfectly using W3C standard markup. Then incorporate your template with each of these pages -- index.cfm, page.cfm, post.cfm, and generic.cfm. This is, in effect, the process to "skin" the mango templates to incorporate your own design. I think you will find the ColdFusion parts are easy -- they are already done for you. Building the CSS and the HTML, and incorporating the CF elements with your CSS and HTML, will require patience, research, and trial and error. Give it a try and let us know how it works for you. I hope this is helpful.

    Eric B

Leave a Reply