This page explains how a graphics person can work with us to create a web design that will immediately work with Drupal 6.x and Drupal 7.x.
There are a few points to follow in order to have pages that can extend vertically and horizontally (optional). Pages that get larger as the browser gets larger are horizontally dynamic. Our company's web site is such a theme. Most likely, you do want the theme to grow vertically as more content is added to a page it will be required for the theme to grow vertically. There are business card or box like themes that simply cannot grow vertically. However, in most cases, it is just a matter of making sure that the graphics can repeat vertically to get such a feature to work.
Our Drupal Themes
The following image presents a travel or vacation theme with a paradisaic island at the top and an extensible body. This theme is going to extend horizontally and vertically.
What is required in a theme in order to build a dynamic website from it:
If the inside of your site is not extensible, you want the left and right sides to be repeatable in some ways. If you have a vertical gradients, we simply repeat the gradients horizontally. At the bottom and the top, the gradient ends with one plain color that continues all the way as required.
It is also possible to have pictures that has edges of the sample color as the background. Then we don't repeat anything other than the background color.
Many sites use a picture at the top. In general, it cannot be repeated horizontally. Yet, when the picture is well chosen, then we can extend it horizontally.
In our example, we show that HE (horizontal extension) can be applied where the top becomes two plain blues.
For pictures to be cut, they need to include an area that has a plain color. Note that the area does not need to be vertically straight to start with. If you have to cut around an object, it will work too. In that case, we will ask you two images. The left side and the right side with the plain color extension added to one of the them (the one on the left) and an alpha channel in the other one (the one on the right.) There is an example with a tree, a shrub, a gradient for the sky and grass that repeats.
The picture on the left shows the tree going a little over the shrub. The shrub cannot move because you are missing the edges (on the left.) But you want the tree to stay in the center. We can see in the wider middle picture that the tree moved to the center. Now the problem, as we can see on the close up, is that the shrub and the tree go over each others. Yet, you can cut in between as shown on the image below:
The red lines shows where we can insert a plain color, or repeat the grass.
The bottom side may have graphics such as the rounded edges in our example. Yet, below the round edges, the theme becomes blue and remains blue. We can therefore repeat that color.
The bottom could also include an image that repeats vertically. However, on real tall monitors, that may not look as good.
If you do not want the inside of the theme to extend (i.e. ignore HE and VE capabilities), then you will be required to support proper corners for the bottom of the page to look good. In most cases, this means the corners need to be a plain color. It can also be a repeated image, but in that case it needs to perfectly match the left side, right side and bottom. That's often a complicated feat to achieve.
Our example shows a bottom left corner and a bottom right corner of the same color. They do not need to be the same color. If you want the body of your site to be vertically centered in the browser, then you will have the same constraints for the top corners.
In most cases, you want your theme to extend vertically. With CSS, we can easily force a minimum height for your pages. This means that the theme will always look as expected even if the content of a page is too small and the theme has images that require a minimum height.
In our example, the theme can easily be extended since there is a place where all the colors can become plain on a line. However, it is not required that the line be straight (although it makes it a lot simpler!) as for the vertical cut (HE), the horizontal cut could cut different parts at different heights. It is often that the left side will be cut at a different level than the content area than the right side.
Note that the VE area does not need to be even 1 pixel. The cut area just needs to be available somewhere and the theme needs to still look good once extended. One reason why it could look bad is because you lose the important effect of a gradient.
The horizontal cut has the same constraints than the vertical cut. It is more likely that it cannot be achieve if you want a picture at the top of the screen that cannot include a plain color (although you can have multiple cut in your image, in general that won't work well.)
Note that specifying a minimum width is also doable in CSS. That way we can protect the look in the even the browser is resized to a very small width.
In our example, the image goes to a set of plain blues on both sides (dark sky blue and light ocean view.) These blues can be repeated as much as required.
Just like the VE area, the HE area does not need to be even 1 pixel. Note that in our example, we may want to grow the bar in two places since there is a gradient effect in the bar and we probably want to keep the middle effect in the middle.
