Authors Note: Almost as if we had had a premonition about this theme… It proved absolutely incompatible to wordpress 2.6 – adding dynamic sidebars would not have been the problem… the problem was the php querys used in the themes templates to <wp_ “API”> are not compatible with the “runtime” of wordpress2.6.

more info and help on theme compatibility at codex.wordpress.org

for help and info on dynamic sidebar insertion into themes the widgets section at  Automattic is the authorative place to start.

For WordPress users Automattic is a must have bookmark…

The process documented here is still relevant to “clutterlovers – the making of..” and will be referred (linked) to in the days weeks to come… may it serve as a warning and prevent us and you from making similar assumptions in the future. countzeero

Theme chosen: neo-sapien-05 downloaded at wordpress.net

The Read Me tells us that the theme is relatively old (we could encounter problems with wp2.6)

a few snippets from the Read Me:

Neo-Sapien: A theme designed and built by Small Potato for WordPress 2.0.3 – http://www.wpdesigner.com [there is no reference to the theme at wp-designer) so it looks like no support...

This theme has been tested with:
Firefox 1.5
IE 5.5
Opera 9 Beta 2

:no:

Think Positive! Lets assume that the age will at least have restricted "tricky" php and css...

Once you have decided on your theme Create a new folder on your Hard Drive and name it "theme_name"_work or whatever you like.

Use this folder for the development work you will be doing on your theme, start by copying the downloaded themes Zip file here -leave this file zipped as a rollback option. you can create a folder structure to your own liking in the "work" folder as we will not be creating "relative" links to files in here but rather absolute URLs on our server.

first thing is check the theme at 1024 pixels width... you will need an "On-Screen Ruler" to do this - google it; download install and use it to measure the window width of the "browsers" - Screenshots will help you to record and analyse the results, save these to your work folder.

  • Here are the initial reference shots from my theme

As we can see Opera and Safari appear to be ok at this width, whereas firefox has a problem due to the sidebar grippy being activated (takes max4 pixels but makes all the difference), Flock and IE8 have problems probably due to the scroll bars width (this is still a common mistake in web design).

Although this is at the first glance a minor failure it has enormous impact on the quality of the design/user experience and should be solved before going on to other aspects of our customization.

to fix this first locate the themes “style.css” it should be in the top level of the themes containing folder, you can either FTP this to your “ThemeWork” folder and edit/upload and replace, or you can edit the files through wp-admin: theme-editor: I prefer to edit using my Default html editor because it offers me more power but you can edit css files using any text editor.

Familiarise yourself with the css file (there are many web-resources on css -maybe one day I will get a linklist up) and look for “Tags” which determine the overall width of the page, adjust and edit these tags until you achieve the desired result. Save the css file and upload to your “blogroot” theme (overwrite) Visit your blog and check the results: Rinse and Repeat as necessary…

  • The fixed pages can be seen below

the css fix was achieved with two “width” values within the “sidebar” tags – I will be adding code later to allow for viewing at smaller sizes (mini laptops!).

For the time being we have solved the most pressing problem and most users will experience our blog as it was meant to be viewed.

next post: getting down and dirty with css…

wanna know more about the author...  countzeero - the self proclaimed EvilGenius™ behind OWN INDUSTRIES. Pixel Penetration and Code Cruelty are but two of his deadly skills. In his free time he likes to run too many blogs and twitter incessantly...