This article shows a recommended starting stylesheet (CSS) for a
Waypoint website. While Waypoint will work with most any CSS you can
come up with, a few tips will allow for easier editing once the site is
set up.
- In Waypoint there's always a form tag that wraps the entire page (standard .Net construct), so I always start with a body, form, html block and set the font settings there. This makes it global. When you set up your CSS, some of the size settings I think were only applicable to content areas. The rich text editor looks to the body style so when you open the editor and the body is not set, the text is way too big and looks bad. Setting the font style on the body fixes this.
- It's a good idea to set the basic link styles globally as well - same reason, so they work in the editor.
- The heading tags as well, h1-h6, I also set here. We can always override this later if needed for specialty areas.
- I also added a standard Waypoint error block. These can always be changed but this is a nice block to start with and the images are global in Waypoint so you can always use this block to start.
- Avoid setting margin/padding to 0 for all UL's, OL's, and P's (as often found in CSS reset blocks). This causes issues when editing for users.
Here is a sample starting CSS block that you can use to get started. Note that the font is a
google webfont.
body, form, html{ padding:0;
margin:0;}
body, form, html, .RadDock_Default .rdContent, td{
font-family: 'Open Sans', sans-serif;
font-size:13px;
color:#777777;}
h1{ font-size:25px; color:#005491; font-family: 'Montserrat', sans-serif; font-weight:400; }
h2{ font-size:22px; color:#005491; font-family: 'Montserrat', sans-serif; font-weight:400; }
h3{ font-size:15px; color:#236792; font-weight:700; }
h4{font-size:13px; color:#236792; font-weight:700; }
h5{ font-size:13px; color:#236792; font-weight:400; }
h6{ font-size:11px; color:#236792; font-weight:400; font-style:italic; }
a:link, a:visited{ color:#236792; font-weight:700; text-decoration:none; }
a:hover, a:active{ color:#236792; font-weight:700; text-decoration:underline; }
.clear { clear:both; }
a img{ border:0 none; }
/* ERRORS */
.WPERR_Error, .WPERR_Validation, .WPERR_Information, .WPERR_Warning, .WPERR_Fatal, .WPERR_Login, .WPERR_Success
{
color: #000000;
font-weight: 700;
text-transform:none;
background-color: #fdfadb;
background-repeat: no-repeat;
background-position: left;
padding: 12px 7px 12px 42px;
border:1px solid #808fb0;
margin: 7px;
display:block;
}
.nobullets{ list-style:none; clear:both; padding: 10px 0; margin:0;}
.WPERR_Error, .WPERR_Validation, .WPERR_Fatal, .WPERR_Login, .WPERR_Information{ background-image:url(/wp-admin/images/ico-error.gif); }
.WPERR_Warning { background-image:url(/wp-admin/images/ico-warning.gif); }
.WPERR_Information { background-image:url(/wp-admin/images/ico-info.gif); }
.WPERR_Success { background-image:url(/wp-admin/images/ico-check.png); }
.err, .error{ font-weight: bold; color: Red;}
/* END ERRORS */