 |
||
ALTERING THE TILING CLASSES
CSS - The Style Sheet
Style sheets in Review Foundry are re-published each time the configuration variables are saved for the Configure > Skin Style / Colors control panel. Part of the CSS that goes into them can be found in the template css_public.ttml. This is the place you add your own CSS classes, and where the CSS for tiling can be found.
Before you go messing around with the CSS classes cfor tiling, and there are a number of them, controlling the coloration of the tiles, border thickness, corner images for rounded borders, and so on, first check the effect of altering the tiling configuration variables discussed on the page: TILING CONFIGURATION VARIABLES. You may find that with a few clicks you can achieve the effect you are looking for.
There are also a few configuration variables that directly relate to tiling that are found on the Configure > Skin Style / Colors control panel. In particular these ones which control coloration:
style_tiled_border_color style_tiled_primary_background_color style_tiled_secondary_background_color
The first of these values should match the color of the border shown in the associated rounded corner images for tiling. You can change those images from the Configure > Skin Images control panel if you need to. The second and third variables control the background color of the alternating tiles. Again, these background colors should match those that appear in the rounded images.
If you decided to alter the CSS classes in css_public.ttml, you will find that there are 2 sets: one for the primary background color, and one for the secondary background color (though in practice you might keep these the same). When the CSS is published, the currently selected border with for tiling is used to select the appropriate rounded corner images for the class (if you happen to be using rounded, as opposed to square, corners).
Rounded Corner Images
As was mentioned in TILING CONFIGURATION VARIABLES, if you do NOT want to use rounded corners in your tiled format, you can simply switch them off from the Configure > Build / Browse control panel:
In this case, a border is placed on the edges of the tiles, but you are free to adjust the border color to match the tile backgound color to make the borders effectively disappear. Otherwise the borders will make the tiles stand out as separate squares, or rectangles, on the page.
Tiles with rounded corners are achieved by placing a small square image at each of the 4 corners of the tile. To make this work, the right corner images (plus top and bottom edge images) are published in the CSS classes, but the left corner images appear in the templates that control tiling. The reason for this is that the left images are initially hidden using the display: none; CSS property, and then made visible with the CSS from the style sheet when the right images are placed. The right, top, and bottom images are actually set as background images, while the left images are in the foreground. This method of adding rounded corners works well in the major browsers, and is the reason it was selected for use.
Here are the rounded corner images associated with a border width of 1 pixel. A border has been added to each image so that their boundaries can be clearly made out, and they are all magnified by a factor of 10, as they are all fairly small:
| tile_upper_left_1.gif | 
|
tile_top_1.gif | 
|
tile_upper_right_1.gif | 
|
|||||
| tile_lower_left_1.gif | 
|
tile_bottom_1.gif | 
|
tile_lower_right_1.gif | 
|
If you decide to replace these images, create copies with the same names first in your image editor. The new images need not be the same size, as they originals, but do stick to the same file names. Then upload the new images from the Configure > Skin Images control panel. Afterwards, re-publish the CSS style sheets from the Configure > Skin Style / Colors control panel to incorporate the new image sizes, if they differ from the original rounded corner images.
Copyright © 2004 Random Mouse Software. All Rights Reserved.