Dwees Design

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 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 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/

This is yet another WYSIWYG module. It has a very simple configuration page, and will currently only show up on node/add or node/edit pages, of the content types one wants. It has a couple of advantages I see over TinyMCE.

1. The code for the editor is open-source.
2. It is a lot, lot smaller in size than many of the other editors out there, which makes it load faster than other editors.
3. The JS only loads on pages that have the editor present, rather than on all pages.

The major disadvantage of course is a much smaller developer team working on it, so bugs and feature requests will presumably take a long time to get implemented.

Anyway, I don't want to maintain this module, so I'm releasing it here, feature frozen.

This is a simple module that allows users to post responses/reviews of other people's posts. It also includes a simple 5 star voting widget, which degrades nicely when JavaScript is disabled. The posts are limited to the default filter input and are carefully screened for possible xss attacks since it is likely this kind of module could be used for allowing anonymous users to post.

Another feature of this module is that you can use one of your site vocabularies to define in what categories people can vote on. The voting unfortunately does not currently use the Voting Api module. It really should, because then one could define Views of the votes much more easily, and it would allow for a greater generalization of the voting process.

This module has actually already seen use in a couple of places, one a public library (they are using it to review books) and another site is using it to review cars.

Both of the sites have given me permission to release the code. Again, I'm too busy to maintain a module like this, but if someone wants to take up the torch...