10.4: Create custom Blojsom themes in Server

Dec 07, '05 06:13:00AM

Contributed by: Anonymous

Tiger only hintI have seen many questions on various sites on 'how do I make my own theme in the Apple install of Blojsom in 10.4 Server?' Well, I dug around in the files for a day or two and here it is. BTW, as you can see, I'm still tweeking my own site.

Disclamer: If you destroy your Macintosh or anything else, don't blame me! Always consult a professional before attempting these modifications.

Here are the steps required...

  1. Create a weblog via the Apple provided method, i.e. www.yourdomain.com/weblog/. Visit your weblog and use the Settings option to decide what theme you want to modify -- www.yourdomain.com/weblog/macnode -- and remember to replace "macnode" with your username. Be sure to log out and close your browser after this step

  2. Back up the following folder (in case you break your blog completely): Library/Tomcat/blojsom_root/

  3. Choose a blog template you want to modify (Grey, White, Graphite, or Blue). Look at the code at the end of this file:

    Library/Tomcat/blojsom_root/webapps/ROOT/strings/en.properties

    You will see:
    template.apple_layout=Grey
    template.v2_layout=White
    template.v4_layout=Graphite
    template.v5_layout=Blue
    Now add another line for your custom theme (we will create this theme in the next step):
    template.macnode_layout=Macnode
  4. Create your template files. Go to Library -> Tomcat -> blojsom_root -> webapps -> ROOT -> WEB-INF -> templates. Duplicate the following four files and rename them carefully:
    html-comments.vm
    html-referers.vm
    html-trackback.vm
    html.vm
    The new names might look something like:
    html_macnode-comments.vm
    html_macnode-referers.vm
    html_macnode-trackback.vm
    html_macnode.vm
    html_macnode.vm will be the core file that generates how your blog looks (your new theme).

  5. Create your style sheets. Go to Library -> Tomcat -> blojsom_root -> webapps -> ROOT -> blojsom_resources -> stylesheets. You will duplicate the two style sheets that match the theme you want to modify. For example, if you want to modify from the theme Graphite, duplicate these files:
    v4_layout.css
    v4_layout.js
    and rename them to:
    macnode_layout.css
    macnode_layout.js
  6. Change your blog properties file to use the new stylesheet. Replace "macnode" with your user name in the following, as in step one. Library -> Tomcat -> blojsom_root -> webapps -> ROOT -> WEB-INF -> macnode/blog.properties. In the blog.properties files, change this line...
    blog-stylesheet=v4_layout
    ...to reflect the stylesheet you created in step five, so it should be something like:
    blog-stylesheet=macnode_layout
  7. Create the graphics for your new theme. Go to Library -> Tomcat -> blojsom_root -> webapps -> ROOT -> WEB-INF -> images. Duplicate the files for the theme you choose to modify:
    v4_background_linkhover.gif
    v4_background_main.gif
    v4_background_side_bottom.gif
    v4_background_side_top.gif
    v4_background_side.gif
    v4_background_top.gif
    Rename the duplicated files to something like:
    macnode_background_linkhover.gif
    macnode_background_main.jpg
    macnode_background_side_bottom.jpg
    macnode_background_side_top.jpg
    macnode_background_side.jpg
    macnode_background_top.jpg
    Go back to the stylesheet you created in step five (ie macnode_layout.css). Carefully change the lines in the stylesheet to your new graphics, for example...
    background: url(/blojsom_resources/macnode/images/v4_background_top.jpg) 
     no-repeat top center;
    would become...
    background: url(/blojsom_resources/macnode/images/macnode_background_top.jpg) 
     no-repeat top center;
    (The line break was added for a narrower display; type it all on one line).

  8. Select the new theme you created. Return to you browser and login to your weblog at www.mydomain.com/weblog/macnode. Go to the Settings and you will see the new theme you created. Select it.
At this point, as log as you did everything correctly, your blog should look exactly as it did in step one. To edit your theme, modify the following files you created: