Well Rounded Users Guide

Introduction

WellRounded, from Media Lab, allows Dreamweaver users to quickly create graphically rich rounded rectangles that are:

Graphically rich
Easy to add content to
Easy to change the size and location of (and auto-size to content!)
Work perfectly across browsers

Installation, Launching & Registration

WellRounded is distributed as an unlockable demo. Anyone can download the demo, try it out, and after purchasing enter an unlock code to activate it fully. There is no time-limit on the demo, but any graphics created with the unregistered version are defaced.

Installing

WellRounded installs like any Dreamweaver extension. Simply download the WellRounded .mxp file and double click it. Macromedia Extension manager will automatically install it. If for some reason this doesn't work, launch Macromedia Extension manager, open the WellRounded.mxp file from Extension Manager, and select "Install WellRounded".

Launching

By default, WellRounded is located on the Dreamweaver Layout tool bar. To open it, simply click the WellRounded icon.

WellRounded cannot operate on documents that have no path. The document must have been saved at least one time.

Registration

If you have a WellRounded unlock code, simply open WellRounded from the tool bar, and choose the Register button from the base DIV dialog. In there enter your name and unlock code and click OK. You do not need to edit the serial number or product ID fields.

WellRounded unlock codes are tied to the serial number of the host Dreamweaver application. When you upgrade Dreamweaver you'll receive a new serial number from Macromedia and will need new unlock codes for WellRounded. Registered users can get these at no charge. Go to www.medialab.com and use the appropriate button at the bottom of the home page.

Tutorials:

Your First (and second) WellRounded Rect

The above tutorial walks you through the basics of the WellRounded UI. In particular we see the Class and DIV Dialogs.

And End To Absolute Positioning

The above tutorial goes through the basics of making WellRounded rects that don't use absolute positioning.

Floating Columns Of WellRounded Rectangles

A tutorial for building a nice three column liquid layout using WellRounded rectangles as containers.

Embedding WellRoundeds

This tutorial uses the techniques of the previous three to show how WellRounded rects can be embedded into one another. We also use a 'margin reserving' technique to add a sidebar to the right side of the document.

DIVs and Classes

A DIV is the html attribute that WellRounded uses around the content of the rounded rects it creates. WellRounded acutally uses multiple DIVs inside of DIVs in order to achieve the complex effect in a way that is both easy to edit in Dreamweaver's Design view and is compatible with all popular browsers. Each rounded rect needs a unique ID that it gives to the DIV for that rect. DIVs also determine the size and location of a rounded rectangle.

Classes are CSS code chunks describing how a particular style of rounded rect should look. This includes the background color and links to the locations in your site folder where the corner graphics are located. Classes also need unique names, and can be used for any number of rounded rects that share the same look. Once a WellRounded class is defined you can create hundreds of WellRounded rects that are all using the same class without creating any more files or extra CSS.

DIV IDs and Class names have the following limitations:

Names and IDs must be unique
They cannot begin with a number.
They cannot contain punctuation
They cannot contain spaces (underscores _ are allowed)
They cannot contain any non-alphabetic character (%,*, +=| etc.)

WellRounded does not screen or enforce any of these rules. It takes your input as you enter it. If you type in incorrect class or ID names then your document may not behave correctly.

The DIV Dialog

This is the base window that always appears when you launch WellRounded. If there are no WellRounded classes in your document yet, then the Class Dialog will open immediately on top.

ID	This is the unique ID for the DIV that contains the rect you are about to create..
Width	The width of the rect (in pixels). You can always use the Dreamweaver UI to drag the rect wider or thinner as desired. Through code editing you can change the width to be measured in ems or percentages.
Height - popup	Fit to Content or Absolute If Fit to Content is chosen, then this WellRounded rect will always be tall enough to contain whatever is in it. If Absolute is chosen, then this WellRounded rect will always be an absolute size. You set the absolute size in the field next to this control. Note: No matter which option is chosen, you cannot use the Dreamweaver UI to drag tall the WellRounded Rect.
Height - field	The height of the rect (in pixels). This field is only used if the Height is set to Absolute.
Class Choice	A document may have several WellRounded classes defined. The rect you create from this dialog will be of the class chosen.
New Round Rect Class	Clicking this button will open the Class Dialog where you can define a new WellRounded class.
About	Learn the inspirational true-to-life story of heartbreak, fortitude, chastity, and victory: The Creation of WellRounded - Brian's Song.
Register	If you've purchased WellRounded (and we hope you do) click here to open up the registration dialog where you can enter you name and unlock code.
Cancel	Change of heart? This is your out. Note: If you created a new WellRounded class in this session then any files created for the rect are still on your drive. You'll have to delete them yourself.
OK	Allright!

The Class Dialog

This is the window that appears on top of the DIV Dialog when WellRounded is launched in a document that has no WellRounded classes. It also appears if you click the New Round Rect Class button from the DIV Dialog.

Required Parameters
Class Name	This is the unique name for the class of round rects you will create if you hit OK.
Radius	The radius (in pixels) of the round rect corners
Feather	The feathering of the corners. 1 (the default) : the corners will be nicely anti-aliased. 0 : they will have no anti-aliasing and will be jaggy. If more than 1 : they will be blurred.
Place .gifs here / Browse Button	WellRounded will normally be outputting 8 different .gif files for the corner and edge graphics. It will place them in the field selected here. WellRounded automatically populates this field with the path to the same location as the current document.
Rect Color	The color of the round cornered rect. The default is a lovely orange. Transparent is not an available option.
Background Color	The background color of the round cornered rect. The default is set to the background color of the current document. Transparent is not an available option.
Optional Parameters
Border Width	The width (in pixels) of the border to be drawn around the WellRounded rect.
Color for Border, Drop Shadow, Inner Shadow	The color of the border, drop shadow, or inner shadow. Important!: Setting the color activates the setting. In other words: if drop shadow color is set then there is a drop shadow. If it is not, there isn't. None of the other drop shadow settings affect whether or not there will be one - only the color matters.
Feathering for Drop or Inner Shadows	The feathering for these effects. Follows the same feathering scheme as above.
X and Y Offset for Drop or Inner Shadows	And offset in pixels. A positive X value moves the effect to the right, a negative X value moves the effect to the left. A positive Y value moves the effect down, a negative Y value moves the effect up.
The Controls
Preview	Preview opens up a small preview of the round cornered rect settings. Note, this preview is always sized very small. It is not scaled, it is just a WellRounded rect containing nothing.
OK	Hitting OK defines a new class and writes the .gif files out to the hard drive. If you cancel in the subsequent DIV Dialog you will stop any custom HTML/CSS being added to your document, but the .gif files will have already been created.
Cancel	Leave, do nothing.
Help	Opens this file you're reading now.

Tips, Tricks, Things to Know

If you choose Absolute height you cannot use the Dreamweaver UI to drag tall the WellRounded Rect. For Absolute height WellRouned rects, the height can only be changed by editing the source.
If you accidentally have WellRounded place the .gif files in the incorrect place, you can use Dreamweavers Files Inspector to move them and it will update the links in the CSS automatically.
You can make some cool looking WellRounded rects by setting the foreground color to the background color and just using a border or shadow to give the round rect definition.
Drop shadows and inner shadows will become glows and inner glows if you leave the X and Y offsets at 0 and turn the feather value up high.
The WellRounded unlock code is tied to your Dreamweaver serial number. When you upgrade Dreamweaver you'll need to get a new unlock code. We have a simple online form where registered users can request these at no charge.
WellRounded rects default to absolute positioning, but you can change them to inline and relative positioning by editing the source. They work very well in that fashion.
You can remake a WellRounded rect class if you know what you are doing.

Remaking WellRounded Rectangle Classes

The WellRounded rectangle divs are very maleable and can be modified directly in Dreamweaver by dragging and stretching, as well as through direct access to the code. But if you want to make changes that would affect the graphics themselves (color, drop shadow offset, border width, etc.) then you can remake the class...if you know what you are doing. You must be able to distinguish the WellRounded class CSS from the WellRounded div CSS. Follow these steps:

Carefully note the exact class name of the class you want to remake as well as its file location.
Delete the class CSS for the rect class you want to remake. Leaving any div CSS behind.
Use WellRounded and open the 'New Round Rect Class' dialog. Define a new class that has the same name and location as before. Adjust the other settings as you see fit.
Hit OK in the Class Dialog. This makes the new class.
Hit OK in the Div dialog.
If you don't need this newly created round rect div, delete it.

Transferring WellRounded Rectangles Across Documents

If you have WellRounded rect that you like in one document and you want to use it another without remaking it, then you can transfer it if you understand the WellRounded CSS a bit. You must be able to distinguish WellRounded class CSS from the WellRounded div CSS. Follow these steps:

The other document must either be in the same location as the document you have the WellRounded rects in now, or have the same relative path to the rect graphics.
Find the class CSS of the WellRounded rect class you want to re-use.
Copy/Paste the WellRounded class CSS to the style section of your other document.
You are now ready to re-use that class in the other document.
Choose the WellRounded toolbar icon - you should see the WellRounded class you copied listed in the class choice menu.

Demos

You'll find a variety of demonstrations on the main WellRounded page.

Frequently Asked Questions

Why are there little white and black W's on my corners?
This is WellRounded 's copy protection scheme. It does this in demo mode. Once you purchase WellRounded you will receive an unlock code. Once it is registered with the unlock code WellRounded will output graphics without the defacing.
My unlock code isn't working!
The WellRounded unlock code is tied to the Dreamweaver serial number. If you upgrade Dreamweaver you'll need a new unlock which you can request from us at no charge via an online form. If you are attempting to use WellRounded with a different copy of Dreamweaver than the one it was purchased for the unlock will not work.
I used WellRounded and I got a rectangle with some text, but it doesn't have any color, no corners, nothing. Why?
This normally happens when an illegal class name was used. Try to avoid using punctuation or non-alphabetic characters (like %$#, etc.)
I used WellRounded, and I have a round rect at the very top of my document going all the way across it. I can't move it. Why?
This normally happens when an illegal div name was used. Try to avoid using punctuation or non-alphabetic characters.
The right hand edge of my WellRounded rectangle has a gap. What gives?
There are three possible causes for this problem:

1 - The content of the div may be too wide. This will probably not be a problem normally with text - but when including images or very long lines of text without spaces if the elements is too wide it may cause a gap in the border edge of the WellRounded rect in some browsers. The solution is to make the WellRounded rect wider, or the offending element thinner.

2 - You are using Internet Explorer and there is space between the end of the content and the WellRounded rectangle closing line. Look at this example HTML:

... a good night and a safe drive home </p> </div></div><div class="wr_botrow"><div><div></div></div></div></div></div>

The empty line after the </p> and before the first </div> may cause Internet Explorer to put in a small gap near the bottom right hand edge of your WellRounded rectangle. The solution is to delete the empty line or to add   directly before that first </div> tag that starts the line.

3 - You are using Internet Explorer 5 for Mac and your content exceeds the height of the rounded rectangle.

This happens if you create a WellRounded rectangle of a fixed height and then place too much content into the rect, such that it exceeds the height you originally specified. The answer is to either adjust the height setting in the CSS to be larger, place less content in the rect, or, best of all, don't use a fixed height for that WellRounded rectangle - instead use a WellRounded rectangle the derives its height from the content itself.
Look for a line like this in the CSS:
#addressround .wr_contentrow .wr_content {height: 260px;} /* -- edit height here! --*/Delete this entire line, now the height will not be preset, but will follow the content. And the gap will disappear in IE 5 Mac.
I created a WellRounded rect but I'm not happy with it. Can I Undo it?
Yes, but you'll probably have to hit Undo multiple times. Dreamweaver stores one undo entry per WellRounded operation. Additionally, undo-ing in Dreamweaver will not delete any .gif files created by WellRounded. You'll have to do that yourself.
How can I change the color of my WellRounded rectangles? (or the border, dropshadow, etc)
If you know that you are doing you can remake the rectangle definition.
I've defined a nice WellRounded class in one document, and I'd like to use it in another. Is there an easy way to do this?
Yes, if you understand the WellRounded CSS a bit. Read about transferring.
Can you nest WellRounded rectangles?
Yes you can. We have a sample file that does that here. Make sure the containing rect has plenty of extra room.
Can I make the content of the rect get closer to the edge?
Horizontally yes. See the What Can I Edit? discussion for the CSS Class.

WellRounded Output Analyzed

The Graphics

topleft.gif

toptile.gif

topright.gif

lefttile.gif

righttile.gif

botleft.gif

bottile.gif

botright.gif

WellRounded outputs 8 graphic files whenever you click OK in the Class Dialog. These are the corners and side and top tiles used to construct the rect.

The HTML

This is the HTML that is typically placed into your document by WellRounded. It is inserted at whatever edit point you had, or wrapped around any selection you made in the document.

<div id="mywrrect"> <div class="samplecname"> <div class="wr_toprow"><div><div></div></div></div><div class="wr_contentrow"><div class="wr_content">CONTENT GOES HERE<br />This WellRounded rect takes the height of the content within it. <br />To change its width, simply grab its edges and stretch it.</div></div><div class="wr_botrow"><div><div></div></div></div></div></div> 

You can see the ID and class name that you provide through the WellRounded UI in red and blue respectively. The content of the rect is in bold. Note the closing comment.

What Can I Edit?

You can safely edit anything in the content section (bolded above). The rest of the WellRounded rect HTML should be left alone.

The CSS

WellRounded will typically insert two blocks of CSS into the <style> section of the <head> of your document. If you do not have those blocks, WellRounded will create them for you.

The Div

This is the CSS that represents a one instance of a particular WellRounded rectangle. It is pretty straightforward and very editable. The comments you see are added by WellRounded.

#mywrrect { position: absolute; left: 64px; top: 64px; width: 300px;/* -- edit width here! -- */ padding: 0; margin: 0; }

If the WellRounded rect has a height parameter of Absolute, then you will also see the following CSS. Otherwise, you won't.

#mywrrect .wr_contentrow .wr_content { height: 200px;} /* -- edit height here! --*/

What Can I Edit?

You can edit all the attributes of the WellRounded rect divs that you see above, except the padding which must be left at 0.

To make the rounded rect inline just remove the positon, left, and top attributes. The width can be changed to ems, percentages, or removed as well.

If you use the Dreamweaver UI to drag the width of the rect it will affect the width parameter. But using Dreamweaver UI to drag the height will not affect the height. The height can only be changed by adding more content to the container (for Size to Content rects) or editing the property at /* -- edit height here! -- */ for Absolute height rects.

The Class

Here is the CSS that is typically included by WellRounded for a new round rect class:

.samplecname { background-color: #DD6633;} .samplecname .wr_toprow { background: url(samplecnametoptile.gif) repeat-x; } .samplecname .wr_toprow div { background: url(samplecnametopleft.gif) no-repeat top left; } .samplecname .wr_toprow div div { background: url(samplecnametopright.gif) no-repeat top right; } .samplecname .wr_contentrow { background: url(samplecnamelefttile.gif) repeat-y; } .samplecname .wr_contentrow .wr_content { background: url(samplecnamerighttile.gif) repeat-y right;} .samplecname .wr_botrow { background: url(samplecnamebottile.gif) repeat-x; } .samplecname .wr_botrow div { background: url(samplecnamebotleft.gif) no-repeat top left; } .samplecname .wr_botrow div div { background: url(samplecnamebotright.gif) no-repeat top right; } .samplecname .wr_toprow, .samplecname .wr_toprow div, .samplecname .wr_botrow, .samplecname .wr_botrow div { width:100%; height:26px; font-size:1px; } .samplecname .wr_content { padding: 1px 2em; margin: 0; } .samplecname p { padding: 0; margin: 1em 0 0 0; padding-bottom: 1em; }

What Can I Edit?

Very little of the class can be safely edited. If you want to play around with these settings, we strongly urge you to carefully check everything in all browsers.

.samplecname .wr_content { padding: 1px 2em; ... The 2em value of the padding can be edited slightly. If you want your content to move towards the edges of the round rect, you can edit this value. It can be set to a pixel value instead of em.

.samplecname p { padding: 0; margin: 1em 0 0 0; padding-bottom: 1em; } The margin values are top, right, bottom, left respectively. You can safely edit any of them. These margins affect any <p> tags you place inside the content area.

What Can't I Edit?

.samplecname p { padding: 0; margin: 1em 0 0 0; padding-bottom: 1em; } Do not edit the padding-bottom: 1em; which is attached to the class <p>tag.