PixyBlog Tip #1: setting default style to dark

By Jacques Bron on Friday, October 03 2008

This is my first tip about PixyBlog.

What's PixyBlog ? PixyBlog is a great photoblogging platform and community. I already talked about PixyBlog in previous posts.

PixyBlog's platform is well designed and very powerful. One of the nice particularities of PixyBlog is that it integrates a scripting language, NVelocity, which gives users a very powerful tool for customizing their photoblogs.

Out-of-the box templates already use this scripting language so it is quite easy to get familiarized with it and start playing with the different possibilities.

Before diving into more complex customizations using this scripting language, let's see a very simple modification that some photoblog owners might want to make. I am talking about changing the default page style from light to dark. Let me explain: many of the included templates in PixyBlog have a nice CSS option that lets users change the page's style on-the-fly. To see an example of that, check my photoblog and have a look at the small black and white squares at the top-right part of any page. A single click on one of these squares will instantly change the page's style from dark to white and vice-versa. Very cool, and already provided by PixyBlog. Some templates don't have the little dark and light boxes, but only a couple of text links that do the same job of switching styles.

Fortunately, when a user changes the style and then closes his browser, a cookie is set and whenever he opens up the photoblog page again, the latest style he used is loaded by default. But all the provided templates have the light style loaded by default. What if you want your photoblog to open BY DEFAULT (i.e. for a new visitor) with the dark style instead of the light one ? Well, you have to tweak the template, and it is very easy. In fact, the technique described here is pure css/html tweaking. It is not specific to PixyBlog and can be applied to other web sites that use the style switching technique.

Here is the procedure:

1. Log into your PixyBlog photoblog's account page
2. Got to Setting -> Templates and open the _header template
3. Locate the following html code:

   <link rel="stylesheet" type="text/css" href="$url.resource("light.css")" />
   <link rel="alternate stylesheet" type="text/css" href="$url.resource("dark.css")" title="dark"/>

   These lines of code set the default style as light.css and the alternate style as dark.css. The light.css style is loaded by default and when you click on the light link on the page. The dark.css style is loaded when you click on the dark link on the page.
4. Simply invert the names of the style files, save the file and you'll be set:

   <link rel="stylesheet" type="text/css" href="$url.resource("dark.css")" />
   <link rel="alternate stylesheet" type="text/css" href="$url.resource("light.css")" title="light"/> 

5. If your template has a popup comment form (not all of the supplied templates have such a form), you need to load the _popupcomment template and make the same modification as above. Doing so, the popup comment form will also reflect the style option of your main page.

Now you have set your default style to dark and your alternate style to light. Whenever a new visitor goes to your site, he will visualize it with the dark style by default. 

Of course, you can add other styles to your photoblog and name the style files differently. Just don't forget to update the previous code with the file names you have chosen.

PixyBlog's wiki is a great source of documentation for those who want to customize their photoblog. If you take the time to explore it, you will find many interesting technique for customizing your photoblog.

P.S.: You can get a 10% discount on your PixyBlog subscription by entering the following referral code: ZGXCEP0Y7LSK.