Adobe<sup>&reg;</sup> GoLive<sup>&reg;</sup> CSS Palette

by Joe Gillespie — Mar 1, 2004

This is a collection of drag and drop CSS boxes for use with Adobe GoLive. With these building blocks, you can build various types of fixed and fluid layouts quickly and easily.

Download CSSBoxes.sit.hqx for Mac

Download CSSBoxes.zip for Windows

Installation

Copy the CSSBoxes folder into the Extends Scripts folder in the GoLive Modules folder. When you launch GoLive, a new icon will appear in the 'Objects' palette. When you click on it, you will see icons representing the various CSS Box configurations.

The icons here have tooltips and link directly to the appropriate instructions.

The Style Definitions

style definitions

Before you can use any of the drag and drop CSS boxes, you must first install the necessary style definitions.

Switch to 'Source' mode and drag this icon into the head section of your page, just before the closing tag is probably the best place. This inserts a set of default style definitions for the boxes. You can later modify any of the style definitions by going into GoLive's CSS Editor.

When you have built your page, you might also want to move the style definitions to an external style sheet, I'll leave that up to you.

The default page body definitions specify Verdana, Geneva, Arial, Sans-serif as the font-family. The font-size is x-small with a line height of 140%. Text-align for the body is set to centered, this is so that the CSS boxes inserted will sit in the middle of the page, not over to the left-hand side.

The basic boxes

style definitions style definitions

Switch back to Layout mode and drag this icon to your empty page. There is a basic box called '.fixedrow' set to 700px width and with left and right margins set to auto. This box will center on the browser window. Change the width to whatever you want.

If you want a layout that stretches with the page width, instead, use the '.fluidrow'.

Note that although these boxes are visible in GoLive's layout window, they won't be visible in a browser because they are transparent and have no borders. I have put some default text into them so that you see something.

When I'm building a layout like this, I like to give the boxes temporary background colours to make them visible. You can do this too, just change the background: transparent attribute to a suitable colour. Unlike borders, background colours do not affect the dimensions of a box.

Columns

Now, you can choose from a variety of different static or fluid column formats with two or three columns. There are also some single columns of different styles that can be mixed 'n' matched.

2 column static layout

2 col static

This gives a row box (.fixedRow) containing two columns each 50% wide (.col50). The column height is preset to 200px, so you can modify the definition as required.

2 column fluid layout

2 col fluid

With this one, the row box is flexible because the overall width is specified as 80%. The two 50% columns inside are therefore allowed to expand and contract.

3 column static layout

3 col static

This one has a fixed 700px box containing three 33% columns. As the outer box width is fixed, the inner ones are too.

3 column fluid layout

3 col fluid

When the outer box is fluid, the 33% inner ones stretch giving a flexible three column layout.

Basic column

basic column

A single column (.unspecCol) preset to width: 150px; height: 200px. As it is set to float: left, you can put any number of these side by side as required.

Coloured column

coloured column

Similar in size, this column has a default background-color: #f3f3ff which you can change in the CSS editor.

Bordered column

bordered column

Again, the same default size as the basic column but this one has a solid red 1px border as well as a #ffe background colour. If you are specifying fixed box sizes, note that the border sits outside the box dimension.

Horizontal spacer

horizontal spacer

The horizontal spacer a 10px high box of indeterminate width. Use it to put space between rows. In a two column layout like this one, it makes sure that text in two columns aligns correctly.

Vertical spacer

vertical spacer

Because of the inconsistencies between browsers, separating columns using margin and padding can cause headaches. If you use a vertical spacer instead, you don't get those problems. This one is preset to width: 10px; height: 200px. Change the spec as you like.

Finally

I can't give a full blown tutorial on the use of CSS boxes on this page but I do have quite a few simple and more complex ones elsewhere on this site.

As I'm giving this set of extends scripts away for free, it is unsupported and you use it at your own discretion. I am unable to debug individual CSS layouts but you might find help on the WPDFD Forums.

Adobe and GoLive are registered trademarks of Adobe Systems, Inc.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float