Style Guide
WOW Style Guide
A style guide in 'editors' terms is nothing more then a set of 'writing' guidelines to help keep a group of editors 'style' insink with each other. Like the spelling of words, indentation or block paragraphs, do we use all caps in a content title or only cap the important words or only cap the first words.
Our style guide can be whatever we want it to be. The important thing is that we agree on it, and then use it when we are writing docs for the site. It makes the finished product of a group of editors more professional. Once it is in place new editors can just follow along with what we have created.
With this in mind, please try to keep the design of the page/s you manage in conformatity with the theme and layout of the WOW website!
Style Templates
Highlight Template:
If you wish to highlight a body of text in a pane as is done here, then this is the template to use:
<table align="center" width="90%" style="background: #d9eafb; border-width: 4px; border-color: #DAE0E5; border-style: double; vertical-align: top; color: #000000" cellspacing="2" cellpadding="2" border="0"><tr><td>
YOUR TEXT HERE
</td>
</tr>
</table>
To use this templates on the Content Express WOW pages that you manage, just copy the code, paste it into your text/html editor, and then add your content (This can also be used in the FAQ section, to highlight your answers to questions asked).
To highlight just a word or a phrase:
<span style="background: #99ccff">YOUR WORD OR PHRASE</span>
|
The CSS style sheet used by the WOW website:
BODY {
background: #e3f2ff;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
}
TD {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
TH {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}
TEXTAREA {
background-color: transparent;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-indent: 2px;
}
INPUT {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-indent: 2px;
}
INPUT.pn-text {
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-indent: 2px;
}
INPUT.pn-button {
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-indent: 2px;
}
INPUT.r-button {
background-color: transparent;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
SELECT {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
SELECT.pn-text {
background-color: #FFFFFF;
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
A:link {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
}
A:visited {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
}
A:hover {
color: #006699;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
}
A:active {
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
.pn-normal {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
text-decoration: none;
}
.pn-normal A:link {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
}
.pn-normal A:visited {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
}
.pn-normal A:hover {
color: #006699;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: underline;
}
.pn-normal A:active {
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
.pn-title {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.pn-title A:link {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: underline;
}
.pn-title A:visited {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: underline;
}
.pn-title A:hover {
color: #006699;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.pn-title A:active {
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
.pn-sub {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-decoration: none;
}
.pn-sub A:link {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
text-decoration: underline;
}
.pn-sub A:visited {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
text-decoration: underline;
}
.pn-sub A:hover {
background-color: #FFFFFF;
color: #006699;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
text-decoration: none;
}
.pn-sub A:active {
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
text-decoration: underline;
}
.pn-logo {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
letter-spacing: 3px;
text-decoration: none;
}
A.pn-logo:link {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
letter-spacing: 3px;
text-decoration: none;
}
A.pn-logo:visited {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
letter-spacing: 3px;
text-decoration: none;
}
A.pn-logo:hover {
background-color: #B1B78B;
color: #E3F2FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
letter-spacing: 3px;
text-decoration: none;
}
A.pn-logo:active {
color: #FF0000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
letter-spacing: 3px;
text-decoration: none;
}
.pn-logo-small {
color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
.pn-pagetitle {
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
/* Content Express stuff */
.pn-menu-title { font-size: 12px }
.pn-menuitem-title { font-weight: bold }
.pn-content-page-title { font-size: 14px }
/* MHonArc stuff */
body.MHonArc { background: #0099cc; color: #000000 }
td.MHonArc-idx { background: #e3f2ff; color: #000000 }
td.MHonArc-msg { background: #ffffff; color: #000000 }
h3.MHonArc { font-size: 14pt }
h3 { font: bold 12pt Verdana, Arial, Helvetica, sans-serif; color: #000000; background: none }
h4 { font: bold 11pt Verdana, Arial, Helvetica, sans-serif; color: #000000; background: none }
h5 { font: bold 10pt Verdana, Arial, Helvetica, sans-serif; color: #000000; background: none }
.center { text-align: center }
.right { text-align: right }
.top { vertical-align: top }
.small { font-size: 8pt }
p,span,dl { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt }
p.error { font-weight: bold; color: #cc0000; background: none }
p.success { font-weight: bold; color: #006699; background: none }
span.title { font-weight: bold; font-size: 12pt; color: #000000; background: none }
span.list { font-size: 9pt }
td.margcell { background: #0099cc; color: #000000 }
input.button {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10pt;
color: #ffffff;
background: #0099cc
}
.margcell div.button { margin-bottom: 8pt }
.margcell input.button { width: 130px; background: #e3f2ff; color: #000000 }
.margcell input.button:hover { background: #ffffff; color: #000000 }
input.text {
font-family: "courier new", monospace;
font-size: 10pt;
color: #000000;
background: #ffffff
}
div.textarea { font-family: "courier new", monospace; font-size: 10pt }
a.margcell:link { color: #000000; background: none }
a.margcell:active { color: #cc0000; background: #ffffff }
a.margcell:visited { color: #000000; background: none }
a.margcell:hover { color: #006699; background: #ffffff }
|
|
· 
26,852 visits or 874 visits per day during the last 30 days