Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

10.4: Create custom Blojsom themes in Server OS X Server
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:
  • Library -> Tomcat -> blojsom_root -> webapps -> ROOT -> WEB-INF -> templates -> html_macnode.vm: This is the file that contains the HTML code for your theme.
  • Library -> Tomcat -> blojsom_root -> webapps -> ROOT -> blojsom_resources -> stylesheets -> macnode_layout.css: This is the file that is the stylesheet for your HTML code.
  • macnode_background_main.jpg, macnode_background_side_bottom.jpg, macnode_background_side_top.jpg, macnode_background_side.jpg, macnode_background_top.jpg: These are the graphics files you created in step seven.
  • That's it; enjoy your new theme!
    •    
  • Currently 2.40 / 5
  You rated: 5 / 5 (10 votes cast)
 
[47,512 views]  

10.4: Create custom Blojsom themes in Server | 6 comments | Create New Account
Click here to return to the '10.4: Create custom Blojsom themes in Server' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
10.4: Create custom Blojsom themes in Server
Authored by: FireBreathingDog on Dec 07, '05 02:20:27PM

"Blojsom"? Nice f*ing name. Whoever came up with that deserves a slow, excruciating death or to be consigned to a lifetime of running Windows.



[ Reply to This | # ]
10.4: Create custom Blojsom themes in Server
Authored by: zeusr on Dec 07, '05 03:30:57PM
Blojsom is based on Blosxom, a perl blogging system. The change of the name to have the 'j' is for the fact it's Java based, running through Tomcat (by default in Mac OS X Tiger Server). The FAQ (including the explanation of the name) is here. And no, no flame...

[ Reply to This | # ]
10.4: Create custom Blojsom themes in Server
Authored by: danieleran on Dec 07, '05 10:08:29PM

Thanks for publishing your findings - I searched high and low to find ANYTHING about how to customize Apple's implementation, and finally found similar information elsewhere.

Unfortunately, while its fairly easy to tweak the CSS and change out the jpg, I still haven't found how to add simple html into the dynamic pages - I want to add google tracking and adwords, but both rely on javascripts that you can't just copy into the story, and I have exhausted my efforts in trying to find out how to make significant changes to actual pages.

Anyone have any ideas?



[ Reply to This | # ]
10.4: Create custom Blojsom themes in Server
Authored by: mns on Dec 08, '05 08:15:14PM

I emailed David Czarnecki, the author of Blojsom, about just that, and he sent a response explaining how to do it. To wit:

you just have to either add the stuff you want in the place you want it in the Velocity template (/Library/Tomcat/blojsom_root/webapps/ROOT/templates/html.vm), or use the Velocity Template Language to add #parse("links.vm") in the appropriate spot in same said file, then create the to-be-included file links.vm in the templates directory, and PRESTO, it's done.

Details provided here.



[ Reply to This | # ]
10.4: Create custom Blojsom themes in Server
Authored by: sharumpe on Dec 22, '05 03:12:39PM

I could not make this load my html_foo.vm file unless I changed the "flavor.properties" file for my blog to use html_foo.vm for the html flavor. Did I miss something?



[ Reply to This | # ]
10.4: Create custom Blojsom themes in Server
Authored by: longterm on Feb 07, '06 10:18:23AM

Unfortunately, I can't get this to work; I am now trying to get blojsom back to its original state, and haven't been able to replace the folder with a fresh one from another web server. How do I replace the folder so that I can get my blog working again?

Thanks,

bob



[ Reply to This | # ]