Programming blog

So my wife and I have decided that we are going to try and be partners in a new business. We'll see how well we work together, we really haven't tried very hard to work on any serious projects (except of course for our son) together before this.

My wife knows a lot about graphic design and what looks good as a result of her training as a landscape arctitect, but knows very little about building websites. I know a fair bit about building websites, but my design sense is horrible. So we combine together these two talents, and we should make a pretty good team.

Instead of trying to build entire websites right now, our plan is to focus on building themes for Drupal 5 and Drupal 6. We'll create a showcase site for our themes, and charge people either a license to use the theme, or the complete copyright to a theme at a much steeper price.

So yesterday we started our collaboration by building a simple theme for our theme shop.

My wife and I each brainstormed a few ideas, and we settled on one of my ideas, with some touch-ups from my wife. I went to work and started installing and setting up the modules I thought we would need.

Installed modules:

• CCK + all default field types
• Imagefield
• Project + Project Release + Project Issue tracking
• Token
• Views + Views Bonus
• Panels
• Path
• E-commerce suit
• Poormanscron

The website portion isn't yet totally complete, but my wife created a layout, which I have turned into a theme. One of the fun aspects of this theme is the front page rotating image preview, done by customizing the html displayed by the view (essentially minimizing it as much as possible) and some jQuery fun.

Check out the site at:

http://unitorganizer.com/skindrupal/

So I thought I should give more detail on how to create a theme for Drupal 5.

What I basically did was copy page.tpl.php, node.tpl.php, block.tpl.php, box.tpl.php, comment.tpl.php and template.php from the Garland theme. I then also created a file called page-front.tpl.php. This gave me a basic framework with which to work.

For the creation of the theme for the Skin Drupal site, the first thing I did was rip out all of the html between the body tags in the page.tpl.php file. I then looked at the picture my wife gave me, and mentally divided it into regions.

From this picture, you can see it could be easily divided into 4 blocks, which is essentially how I created the html.

First I inserted a wrapper div, to make it easy to center the display of the site for people with browsers with resolution greater than 1024x768. We decided, by doing some research online, that a theme that was 960px wide by about 500px tall was ideal for display in most people's monitors. We'd be leaving those poor 800x600 people out of the loop, but that's only 10% of the market, and not likely to be the people looking for themes at our site (developers tend to try and use the best tools at their disposal).

Inside the wrapper div, I inserted two sibling divs to divide the site into the header and main regions. Since the content of the header was so simple, I just inserted 2 divs for the right and left portions of the header and the same for the main portion.

The 5 rotating image blocks, I quickly realized I would have to position absolutely on the page in order to make the fade in and fade out work. This presented problems later and led us to eventually scrap this theme, but more about that in a future post. Anyway, to allow for this, I opened up my blank template.php file and created a themename_regions function, and created 5 more regions for my site, calling them easy to remember things like box 1, box 2, box 3, box 4 and box 5. Before I went any further, I created 5 views to match these blocks and used the block administration page to match the blocks to their position on the front page. I went ahead and created some filler content, so we'd be able to see these blocks at work.

It was pretty simple to set some default blocks for the right column of the main page, and then I went ahead and worked on the css for the theme, which is remarkably simple since our layout is so clean and easy.

Fix the width of all of the blocks, fix their height, add float left to most of them, and float right to the right column, and we were set. Then I used absolute positioning on the blocks and wrote the JS script to fade them in and out. jQuery is amazing, I have to say, this script was a breeze to write. If you examine the source of the page, or use JSview, you can see the name of the JS file, which you can safely view in your browser. You'll see that it's pretty short.

I kept the default html for the box, block, comment, and node files, but used a views theming function inside my template.php file to greatly simplify the html presented by the views (since all I really wanted to see was the thumbnails). Then Tada! I had a really simple plain theme. The idea of the theme is that it looks essentially unthemed, and that our themes will be ways to spruce up the site.

So our new site already has a new theme, which is just a modified version of the old theme. It looks pretty good I think.

The idea is, instead of fading out the backgrounds of the preview images, we leave them in place, and fade out the images. We also reduced the number of images previewed to 3, and arranged them in a column. Finally, my wife had a great idea of moving the menu to beneath the images, so now our menu block is at the bottom of the page.

This is an extremely easy theme, and it even works in IE 5.5 (with a minor adjustment for the logo, which I haven't done yet).

One column, centered horizontally, with header, main, and footer sections divided vertically. No sidebars at all, and extremely easy to retheme later. The JS had to be rewritten, nearly from scratch, but I think it works a bit smoother now, less jerkiness because of the fewer number of elements involved.

Check it out at http://unitorganizer.com/skindrupal

Dave

So I love the Panels module. It gives me much, much greater control over where I want to place my content, and how I create my blocks. It's stupendous.

It has a serious problem though, the actual construction of content is not meant to be done by a beginner. The form includes many unnecessary elements for a novice user and the process is confusing. Worse still, you can't use either the IMCE module or any WYSIWYG editor when creating custom panes. This is a serious issue for many of my users, most of whom will be publishing to the web for the first time.

So I wrote a module which takes the process of custom pane construction, and tries to simplify it as much as possible. The basic idea is, people navigate to a Panes tab, where they see all of the displays associated with this group (or one display in the case of a panels node). They can then choose to add panes to the display, and be sent to a separate form, or edit the custom panes that have already been built. Since this is a separate form, the users have access to a WYSIWYG editor and the nice IMCE pop-up for adding images.

I think this will make managing custom pane content much easier for most of my users. We'll see, I'm going to let my partner know about it, and see what he thinks.

Screen shots:

Main pane edit window

Add pane window

Edit pane window

Notice the use of a WYSIWYG editor in both the 'Add pane' and 'Edit pane' forms (and the link to the IMCE image uploader). This is what really lowers the difficulty of adding nice custom panes to a panels node or an Og panels page.

There are 8 different basic usable website themes I can think of. I've listed them below. My intention is to find minimal mark-up that will produce these themes, with as wide a range of browsers as possible support.

One column	Three fixed columns
Three column fluid center	Three columns - fluid left
Three columns fluid right	Two fixed columns
Two columns - fluid left	Two columns - fluid right

Does anyone have any suggestions of an Open Source solution to these themes? I'm sure they have all been created before. Why re-invent the wheel?

Check this out!

This is a script written by John Bezanis which takes 6 images, specified by GET parameters (his own words) and turns them into a spinning cube. You can click on a face of the cube and it will spin around into focus. Click again and the cube continues spinning.

It's currently displaying 6 images from a course in my online MA where we have to analyze an e-Learning platform using these 6 facets.

Someone mentioned in one of the Drupal groups that they had created a very simple script to check how popular search terms, unique for IP address. In other words, how many different unique visitors have searched for a particular word. I just took their script and converted it to a simple module. Can't take much credit for this one.

This is my BookGUI module, including the most recent updates (which are actually almost a year old). I don't consider it stable for a except for a development environment, but maybe someone can iron out a couple of the kinks I gave up on.

This allows you to edit the structure of a book (AKA the Book module) as well as add/delete pages to the book on the fly, all via an Ajax management page.

It's huge flaw is that it doesn't check for the number of pages that it's going to load. I really need to build some kind of paging system or something similar into this structure. Maybe only load the structure of the book, and none of the content? Content could be loaded on the fly via Ajax...

Anyway, check it out if you like, it's released under the GPL.

One problem with Drupal is that the UI sucks for beginner users. They have great difficulty finding all of the most important administrative menu items they want to use. Since Drupal tends to group administrative items by general functionality and by module, it can tricky working where something is located for a beginner. Not to mention the fact, many beginning CMS users are terrified to death of 'clicking the auto-destruct link' by mistake and screwing up their work. This fear is not ungrounded, as many Desktop applications have a strange red X in the top right corner of the page that is terribly destructive when accidentally clicked (assuming one is not used to reading dialogs carefully before clicking Yes).

So the solution in Drupal is simple. Create a page where all of the most useful administrative items are linked, and make sure that each type of functionality is in blocks which are displayed only to the user who has access to do that item.