Personalising the roller Sotto theme

A principal engineer colleague, John Stanford has just kickstarted his blog and is using the "Sotto" theme. With respect to themes, one of the most requested theme amendments I've seen has been How to amend the pictures in the Sotto theme? I and some colleagues looked at this some time ago and I posted most of this article internally. On review, there is nothing requiring secrecy in it, so I thought I'd re-post it here.

I think Sotto is a pretty and relaxed theme, but I suspect that most people will want to change the pictures to develop a uniqueness and personality. There are some other problems with Sotto, which I may return to at another time, but for now, here's how I amended Sotto. I originally demonstrated the effect by converting my private blog to Sotto, but I shan't be doing this here, so I have instead posted a picture of John's blog.

 

John's Blog

 

Firstly select the pictures you want and upload them to your ../resource directory by logging into roller and selecting the "File Uploads" sub-tab from the "Create & Edit" tab

In my case the pictures had been chosen and munged to have the same height, which was different from the theme's default pictures. This change of height needs to be managed. (See below).

I'd never selected Sotto as my first theme, but I had an empty _css file in my page templates file list. Select Sotto as your theme and then press the customize button. This copies Sotto into your local file folders. Sotto's global theme styles are held in /roller/themes/sotto/styles/default.css. Sotto declares style alias for the three pictures, which it calls gutter images. These are located within a div tag which also has a style. This style is called #gutter. Using the hyperlink above, (and checking that it remains accurate by reading the page source ), you can obtain the CSS code source for #gutter & #gutterimage[1-3]. Cut and paste these into your local _css file. Now amend the file names!

Each of the css rules has a height attribute, set them as appropriate i.e. the images with their height set to the height of the picture and the gutter set to two greater. The image aliases have a width parameter, set these as appropriate. I set #gutter's height to be two greater than the images as this is how the original author sized it. Obviously the background attribute needs to be set appropriately and we use the url() descriptor to do this. The new pictures are held in /roller/${yourloginname}/resource. The simplest way to get these is to open them in a browser and cut and paste the URL into the _css file. If you want more pictures, then create more #gutterimagen alaises; one for each picture. This is all that is required of the CSS file.

We now need to amend the weblog page template to ensure that our new CSS file is interpretated at the correct time in the cascade. The changes required are as follows:

     <style type="text/css">#includePage("_css" )
    </style>

must be inserted after the

    #showThemeStyle("sotto" "default.css" false)

line. This forces the new _css file to be included and interpreted after the default file. The default file sets the gutter and gutterimages to have a default height and use the default pictures, and our new _css file overwrites these settings. This is enough if you require three pictures. If you require some more pictures then,

    <span id="gutterimagen">&nbsp;</span>

needs to be added as appropriate. Look at Sotto's weblog file, you'll see what I mean.

tags:

Comments:

Post a Comment:
Comments are closed for this entry.
About

DaveLevy

Search

Archives
« April 2014
MonTueWedThuFriSatSun
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today