The Time Siren Diaries

WordPress Theme - Sliding Door

Sliding Door by Wayne Connor, a Mac Host blogger whose theme has over 1,100 fans and supporters on his WordPress and Joomla Support Site forum. His explanation of how the theme works and how it can be customized is fairly straightforward if you have a basic knowledge of css. You don’t even need a full comprehension of .php to get it to work; you just have to follow the instructions, do a little digging on the forum when you get into trouble and you can customize it to your tastes. I fell in love with the potentiality of the design and used it for a local, Los Angeles business networking client, Referrals Unlimited, in Westlake Village, CA.

WARNING – TECHNICAL STUFF -

I customized the images at the top of the page by:

* Going into the header.php file and adding another line to the “links you go to when you click on a sliding door image section” in the header underneath the other categories. This starts around line 51 if you are using the 1.7.1 version of Sliding Doors…there is a new version, 1.8.7. It is easy to remember – add lines if you are adding additional image panes to the 7 default ones, subtract panes if you are wanting fewer.

* Also going in the imageMenu.css file in the imagemenu directory, add another (or subtract) a line(s) below where they start, also around line 51.

* In the same file, change line 40′s width dimension to accomodate additional or removed panes.

* To remove the default titles and change the default links to the windows to where you want them to point, go into the functions.php and add or remove a line to add or remove a pane.

The important part to remember is something not covered in as much detail in the forum’s FAQs, but in a question answered here. This is in the calculation of the width of the panes or “blades” as they are referred to in the discussion. The conversation goes something like this:

1. You remove (or add) one of the li lines in the header code in the div called image menu.

2. You adjust the openWidth parameter in the javascript just below that in the header.

3. You may also want to change the closed widths in the imagemenu.CSS file.

in the section that begins #imageMenu ul li a {
width:133px is the width of the picture when closed.

It’s in the section #imageMenu ul li a {
It’s width:133px;
This is the width of the picture when closed.

I guess it would be 133 times 7 divided by 6 (155px).”

It takes a little tweaking, but if you are used to that in .css and .php, you will knock it out pretty quickly. I wasn’t and it took me a while to get it right, but that’s because I was a newbie at tweaking php settings. Now that I have the notes and have worked with it, it doesn’t take me as long to do.