Styling the ahsk.ca content & site

The ahsk.ca utilizes a content editor that allows the user to format their content. The site also employs a stylesheet that defines element display properties.

Editor

Stylesheet

 

 

Editor options:

The page editor has several options to help format content. The icons in this image show the icon panels in the editor header. We will define the most used functions below...

(back to top)

 

 

This is a formatting test: BOLD

Definition and Usage bold

The <strong> tag is a phrase tag.

(back to top)

This is a formatting test: ITALIC

Definition and Usage italic

The <i> is a font-style tags.

(back to top)

This is a formatting test: UNDERLINE

Definition and Usage underline

The <u> tag defines underlined text.

(back to top)

This is a formatting test: Strikethrough

Definition and Usage strikethrough

The <s> and <strike> tags defines strikethrough text.

(back to top)

This is a formatting test: alignment

Definition and Usage align

The <align> tag defines alignment

(back to top)

This is a formatting test: unordered list

  • unordered list
  • unordered list
  • unordered list
  • unordered list

Definition and Usage unordered

The <ul> tag defines an unordered list (a bulleted list). An ordered list starts with the <li> tag

(back to top)

This is a formatting test: ordered list

  1. ordered list
  2. ordered list
  3. ordered list
  4. ordered list

Definition and Usage numbered

The <ol> tag defines an ordered list (a bulleted list). An ordered list starts with the <li> tag.

(back to top)

This is a formatting test: paragraph

Definition and Usage paragraph

The <p> tag defines a paragraph.

The p element automatically creates some space before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet.

(back to top)
This is a formatting test: address

Definition and Usage address

The <address> tag defines the contact information for the author or owner of a document. This way, the reader is able to contact the document's owner.

The address element is usually added to the header or footer of a webpage.

(back to top)
This is a formatting test: preformatted

Definition and Usage preformatted

The <pre> tag defines preformatted text.

Text in a pre element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

(back to top)

Headings

Definition and Usage heading

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the largest heading and <h6> defines the smallest heading.

 

This is a formatting test: Heading 1

This is a formatting test: Heading 2

This is a formatting test: Heading 3

This is a formatting test: Heading 4

This is a formatting test: Heading 5
This is a formatting test: Heading 6
(back to top)

Outdent/Indent

Definition and Usage outdent

content can be indented and outdented.

(back to top)

Undo/Redo

Definition and Usage undo

Click to undo/redo your last entry.

(back to top)

Link/Unlink

Definition and Usage link

Definition and Usage

The <a> tag defines an anchor. An anchor can be used in two ways:

  1. To create a link to another document, by using the href attribute
  2. To create a bookmark inside a document, by using the name attribute

The a element is usually referred to as a link or a hyperlink.

The most important attribute of the a element is the href attribute, which indicates the link’s destination.

By default, links will appear as follows in all browsers*:

  • An unvisited link is underlined and blue
  • A visited link is underlined and purple
  • An active link is underlined and red

*OR ARE DEFINED IN THE STYLESHEET

(back to top)

Anchor

Definition and Usage anchor

The <a> tag defines an anchor. An anchor can be used in two ways:

  1. To create a link to another document, by using the href attribute
  2. To create a bookmark inside a document, by using the name attribute
(back to top)

Insert/Edit Image

Definition and Usage undo

Click to insert/edit image.

(back to top)

Insert/Edit Embedded Media

Definition and Usage embedded media

Click to insert/edit embedded media like a video file.

(back to top)

 

 

Stylesheet for AHSK.CA

This is the stylesheet currently being used for the site:

 

/*

Architectural Heritage Society of Saskatchewan

Site Styles

*/

/* Structural */

html {
height: 100%;
margin: 0px;
padding: 0px;
}

body {
text-align: center;
margin: 0px;
padding: 0px;
font-family: georgia, serif;
font-size: 1em;
background: #96969b url('./images/bg_body.png') repeat-y center top;
}

.content {
width: 980px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 3px solid #798ca0;
margin: 0px auto 0px auto;
padding: 0px 0px 1px 0px;
background-color: #ffffff;
}

.banner {
margin: 0px;
padding: 0px;
height: 92px;
background: transparent url('./images/ahss_header.png') no-repeat 0px 0px;
}

.banner h1, .banner p {
display: none;
}

.navigation {
height: 25px;
margin: 0px 0px 1px 0px;
padding: 0px;
background: #798ca0 url('./images/nav_gradient2.png') repeat-x 0px 0px;
}

.content2 {
margin: 0px;
padding: 0px;
background: transparent url('./images/backer1.png') repeat-y 0px 0px;
}

.leftcolumn {
width: 200px;
float: left;
}

.leftcolumn2 {
padding: 10px 5px 10px 5px;
text-align: left;
}

.main {
width: 780px;
float: right;
margin: 0px;
padding: 0px;
}

.main2 {
padding: 10px 10px 10px 18px;
text-align: left;
}

.spacer {
clear: both;
}

.footer {
margin: 0px 0px 40px 0px;
padding: 0px;
}

/* Login Box */

.banner .tool {
float: right;
font-size: 12px;
margin: 5px 5px 0px 0px;
padding: 0px;
color: #ffffff;
background-color: #798ca0;
-moz-border-radius: 7px;
border-radius: 7px;
}

.banner .tool form {
padding: 0px;
margin: 0px;
}

.banner .tool span {
display: block;
margin: 3px 8px 3px 8px;
padding: 0px;
}

.banner .tool p {
display: inline;
color: #ffffff;
}

.banner .tool label {
display: inline;
}

.banner .tool input {
font-size: 12px;
font-family: georgia, serif;
color: #000000;
border: 1px solid #000000;
margin: 0px;
padding: 0px;
}

.banner .tool input.text {
width: 65px;
}

.banner .tool a {
display: inline-block;
font-size: 12px;
line-height: 13px;
background-color: #cecece;
margin: 0px 0px 0px 10px;
border: 1px solid #000000;
padding: 2px 3px 2px 3px;
text-decoration: none;
color: #000000;
}

.banner .tool a:link, .banner .tool a:visited, .banner .tool a:hover {
color: #000000;
}

.banner p.login {
display: block;
float: right;
clear: right;
font-size: 12px;
margin: 10px 13px 0px 0px;
padding: 0px;
}

.banner p.login a, .banner p.login a:link, .banner p.login a:visited {
color: #cc0000;
text-decoration: none;
}

.banner p.login a:hover {
text-decoration: underline;
}

/* Navigation */

.navigation ul {
display: block;
height: 25px;
margin: 0px;
padding: 0px;
list-style-type: none;
}

.navigation ul ul {
display: none;
}

.navigation li {
display: block;
position: relative;
height: 25px;
float: left;
margin: 0px;
padding: 0px;
border-right: 1px solid #000000;
}

.navigation a, .navigation a:visited, .navigation a:link {
display: block;
margin: 0px;
padding: 0px;
height: 25px;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #2f2f6f;
}

.navigation a:hover {
color: #cc6f00;
}

.navigation a span {
display: block;
margin: 5px 8px 0px 8px;
}

/* Navigation Left */

.leftcolumn2 ul.editormenu {
display: none;
}

.leftcolumn2 ul.tabmenu {
display: block;
margin: 0px 0px 0px 10px;
padding: 0px;
list-style-type: none;
}

.leftcolumn2 ul.tabmenu ul {
display: block;
margin: 0px 0px 0px 16px;
padding: 0px;
list-style-type: none;
}

.leftcolumn2 ul.tabmenu a {
text-decoration: none;
color: #ffffff;
font-weight: bold;
}

.leftcolumn2 ul.tabmenu a:hover {
text-decoration: underline;
color: #cc0000;
}


/* Content Styles */

.leftcolumn {
font-size: 0.8em;
}

.main h1 {
font-size: 1.2em;
font-weight: bold;
}

.main h1 span.subHead {
display: inline-block;
font-size: 0.8em;
font-weight: bold;
color: #798ca0;
border-left: 1px solid #798ca0;
margin-left: 1em;
padding-left: 1em;
}

.main h2 {
font-size: 1.1em;
font-weight: bold;
}

.main h3 {
font-size: 1em;
font-weight: bold;
}

.main h3.contentHead {
margin: 1em 0px .8em 0px;
border-bottom: 1px solid #798ca0;
}

.main h4 {
font-size: .9em;
font-weight: bold;
}

.main h5 {
font-size: .8em;
font-weight: bold;
}

.main h6 {
font-size: .7em;
font-weight: bold;
}

.main a {
color: #cc0000;
text-decoration: none;
}

.main a:hover {
text-decoration: underline;
}

.copyright {
font-size: .8em;
text-align: center;
}

a.btnMore {
display: block;
clear: both;
width: 60px;
margin: 1em 0px 0px 1em;
padding: 8px 0px 8px 0px;
background-color: #798ca0;
font-size: .8em;
font-weight: bold;
color: #ffffff;
text-align: center;
text-decoration: none;
border-radius: 3px;
-moz-border-radius: 3px;
}

a.btnMore:hover {
color: #ffefef;
background-color: #99acc0;
text-decoration: none;
}

(back to top)

Contact AHSS