DRAFT: This module has unpublished changes.
Borders

The body of your website is where you will need to make crucial decisions.  You need to think about audience needs (can they read the words easily?) and you need to think about how that shell is working with your color theory to convey your overall message and intentions for your audience.  Here is the part of the code that we are working with:

}
#header_container, #main_container {
background-color:#FFFFFF;
border-color:#FFFFFF;
border-style:solid;
border-width:0 10px;
position:relative;
}
#header_container .title {
border-bottom:2px solid #CCCCCC !important;
padding:15px;
}

The background color indicates the main color of your main body.  You will also notice that there is a border on the right and left sides.  With border-color, You can decide the color of this border (remember your color design).  With border-style, you can also remove, add dots to, or leave a solid line for the border (as the default code here does).  With border-width, you can also thicken the border.

 

You will also notice that there is a border-bottom. This refers to the thin line that is under the title.  You can thicken this, remove it, or change color.  Do not ignore these issues.  Every design element of your site must be deliberate.

 

You can also round corners and add shadows to your borders.  Here is a site that uses rounded corners for all borders.

 Here is part of the code for the site you see above:

}
#header_container, #main_container {
background-color:#FFCC66;
border-color:#FFCC66;
border-style:solid;
border-width:2 10px;
border-radius:10px;
-moz-border-radius:10px;
position:relative;
}
#header_container .title {
border-bottom:2px none #CCCCCC !important;
padding:15px;
}

DRAFT: This module has unpublished changes.

Notice that this part of the code adds the rounded corners:

border-radius:10px; 

-moz-border-radius:10px;

 

Border-radius will determine how rounded your border corners are (in terms of pixels).  -Moz-border-radius adds the same information but makes sure that older versions of Firefox recognize this rounded corner feature.

 

Please see the image at the left for the different styles of borders.  You need to use the exact wording here to achieve the result that you see.

DRAFT: This module has unpublished changes.