eZeeGallery Photo Dreamweaver Extension

eZeeGallery Photo

Some Alterations

We will explore some simple changes you can do to your gallery pages CSS file to achieve some fairly ordinary but desireable effects.

Image Spacing

Now we are going to open things up a bit and give the thumbs some breathing room. This is accomplished by altering the margin on the classes that are applied to each of the thumbnails. Since the thumbnails have a 3 state rollover - "norm", "over", and "down" all three must be adjusted equally.

With you page open, go to the CSS Styles Panel. The image below illustrates the 3 classes that will be modified. By default the margin is set to ( 0 2px ) for all three. This indicates that there is 0 margin for the top and bottom and 2px margin on the left and the right. When you select each one, you are then able to make modifications to the values in the CSS properties Panel.

CSS Styles Panel

Dreamweaver 8 CSS Styles panel

Once inside the CSS properties Panel you can click in the right side where the values are and it will allow you to change the values.

CSS properties Panel

Dreamweaver 8 CSS Properties Panel

The margin is inside of the Box category. Change the margin from 0 2px to just 10px. This will give a margin of 10px on all sides of the thumbnails.

CSS properties Panel

Dreamweaver 8 CSS Properties Panel

Remember: You must do this for all 3 of the thumb classes... thumbNorm, thumbDown, and thumbOver.The thumbnail images have been spread apart by 20 pixels. The gap between them is 20 pixels because each thumbnail has a margin of 10px so when they are side by side or on top of each other both margins touch and add up to 20px.

Your gallery page will now look like the screenshot below.

Version 1

Version 1 will display "Placement" images.

Gallery in Dreamweaver Design View

Version 2

Version 2 will display your actual images.

Gallery in Dreamweaver Design View

Remember: to upload your " ezeegallery.css" file after you have made any changes so it will reflect to your page online. This file is located in your "" folder in the root of your site.

Moving the NavLinks Div

If you want to move the nav links below the thumbnails it is very simple. Open your gallery page and go into code view. The div has an id of "thumbNavLinks" and is located just below the "ezeeWrapper" div. and just above the "thumbimages" div. To move the Nav Links below the thumbnails cut the "thumbnavLinks" div and paste it just below the closing </div> tag of the "thumbimages". This is also just above the "wait" div.

Default "above" the thumbnails

Dreamweaver Code View

After "below" the thumbnails

Dreamweaver Code View

Move the entire layout down from the top

The simplest way to add some space above the layout is to add a top margin to the "ezeeWrapper" div.

From the CSS Styles Panel select the #ezeeWrapper

The default values. 0pixels top and bottom, and auto for left and right.

Box Properties

The values read from the top in a clockwise direction. 50px = top, auto = right, 0 = bottom, auto = left. We have given 50 pixels of extra space at the top by giving setting the top to 50px.

Note: If the value of 0 is used, adding the "px" after the value is not necessary. Any time you use a number value greater than 0 you must add the "px"