Site Template using CSS

External Cascading Style Sheets (CSS) allow the look and feel of a site to be separated from the content. This provides a consistent site wide style and allows the entire site to be re-styled by simply editing the values in one file, the Style Sheet file. The layout and style of this site is determined by the external Cascading Style Sheet (CSS) file set in the Site Builder Software Site Code. This site uses the standard default Style Sheet however completely different colors, formatting and positioning can be achieved by simply changing the settings in the Style Sheet. For example you can:

Change the Style Sheet to set White text on a Black background,

Change the Style Sheet to position the Menu on the Right,

Change the Style Sheet to increase the text size

and then

Return to Default Style Sheet.

For style examples including a Horizontal Menu see the My Site Builder Styles site.

Setting Styles in a CSS File


Open the default style sheet file style.css packaged with the software in a text editor to see the default CSS formatting applied. If you modify this style sheet (or save it as a different file name with the .css extension and set the $cssFile variable to match) you can change the style of your site.

Styles are related to the element and the associated element class. They cascade which means that a style generally applies to the element and all elements included within it. The style of an included element can be set to override the style it inherits from a higher level element.

For example the body style applies to the body of a page which includes everything that is displayed. In the default style sheet the body style is:

body { margin:0px; padding:0px; background-color:#ffffff; color:#000000; text-align:justify; font-family:arial,helvetica,sans-serif; font-size:smaller }

A style is defined by stating the element ie body and then setting the styles to be applied between { }'s. Each style consists of a name ie margin and a value 0px separated by a : . Each style is separated by a ; . Changing a value changes the style applied.

In the Site Builder Software Site Code the div element with the class content is included within the body element and inherits the style of the body unless it is overwritten by its own style settings. For example in the default style sheet div.content { margin:20px; } is defined. The div.content defines the div element with the class content. The div.content stlye causes the margin applied to the div element with the class content to be set at 20px overriding the margin value set in the body style.

Site Builder Page Layout


Site Builder Software Site Code pages consist of divisions within which different components are placed. By modifying the CSS style that is applied to a division the format and positioning can be controlled. When you View Source of a web page you can see the underlying code. The source code consists of a header section and a body section. Within the body section are the elements displayed on the web page. The basic body code of a page generated by Site Builder Site Code is:

< body>

< div class='display'>

< h1 class="title">Item Title< /h1>

< div class="content">Item Content< /div>

< div class="time">Last Modified Time< /div>

< div class='footer'>Footer Html< /div>

< div class='admin'>Administration Links< /div>

< /div>

< div class='menu'>Item Menu< /div>

< div class='logo'>Logo< /div>

< div class='area'>Area Html< /div>

< /body>

For any web page you can see the underlying code from your browser, in Internet Explorer go View, Source; in FireFox go View, Page Source. This will allow you to see the structure of a page.

CSS Positioning


Elements are division tags consisting of a start tag < div.... > and an end tag < /div>. Each of these elements has an associated style set in the style sheet. For example the < div class='display'> style is set using the div.display in the style sheet. In the default style sheet this is

div.display{position:absolute;left:20%;top:20px;width:80%;}

This is setting the position of the display div. It is located 20% from left side of the page, 20px (pixels) from the top of the page, and has a width of 80% of the page. See the div.display area highlighted red. All elements included within the display div are positioned relative to it.

The menu div is not within the display div so its positioning is relative to the page. In the default style for the menu div is:

div.menu{position:absolute;left:2%;top:30px;width:16%;}

See the div.menu area highlighted red, it is positioned at the top left of your page.

By adjusting the left, top and width values an element can be placed anywhere on a web page. Positioning is usually set as either a percentage % or as a pixel px. Pixels provide fixed placement however due to varying screen resolutions may result in pages that are either too wide or too small for the users displayed screen. Applying a combination of percentage and pixel positioning allows consistent placement to be achieved. An element will usually expand vertically to accommodate its content.

The order in which elements appear in the code does not affect the displayed position, this is set by the style applied. However because search engines do not display the page; they simply look at the code; the order does affect the way a search engine sees the page. This means that placing the most important components of a web page at the top of the underlying code can influence the value as determined by a search engine. Placing the Title and Content first (as done by the Site Builder Software Site Code) reinforces their importance. Many web pages still order the code based on the order of display desired. This provides no benefit and can decrease search engine ranking.

The display div is the main division containing the content and administration links, it is always included in a Site Code generated web page. Other divs will only be included when they have content. If Item Menu is set as none (and there is no preceding or post html) there will be no div.menu, if there is no Area Html (ie $areaHtml="";) there will be no area.div and so on...

For additional detail on using CSS to position elements see W3Schools CSS Positioning.


CSS Formatting


CSS file style values also control the formatting of each element, including colour, font, borders etc. The style sheet applied for this site is the default style.css as packaged with the software. It can be opened and edited in a text editor. Applied styles are also displayed by the CSS validation link Valid CSS at the bottom of each page.

In the default style sheet the body style includes:

margin:0px; - this sets the margin as 0 pixels. A margin is the space around an element. Margins can be set in px (pixels) or % (percent). For additional detail see W3Schools CSS Margin.

padding:0px; - this sets the padding as 0 pixels. padding is the space around the content of an element. Padding can be set in px (pixels) or % (percent). For additional detail see W3Schools CSS Padding.

background-color:#ffffff; - sets the background page color as #ffffff (white). Background Color can be set as a hex color value or a defined color name. For additional detail see W3Schools CSS Background. Whenever a background-color style is set a corresponding color style should be set. W3Schools CSS Color Names lists defined color names and hex color values.

color:#000000; - sets the text color as #000000 (black). Color can be set as a hex color value or a defined color name. For additional detail see W3Schools CSS Color. Whenever a color style is set a corresponding background-color style should be set. W3Schools CSS Color Names lists defined color names and hex color values.

text-align:justify; - sets the alignment of text in the element as justified. Text alignment can be set as left, right, center or justify. For additional detail see W3Schools CSS Text Align.

font-family:arial,helvetica,sans-serif; - sets the font as arial, with a second option of helvetica and finally if neither of these are available a generic sans-serif font. For additional detail see W3Schools Font Family.

font-size:smaller; - sets the size of the font as smaller. Font Size can be set as smaller, larger, as a % (percentage) or as a fixed px (pixel) size. For additional detail see W3Schools Font Size.

The default style sheet h2 style includes an additional font-weight style:

font-weight: bold; - sets the weight of the font as bold. Font Weight can be set as normal or bold. For additional detail see W3Schools Font Weight.

The h2 style also includes border-bottom styles. When a style applies to an item that can be separated into left, right, top, and bottom sections it can be specifically applied a section. For example the border-style applied only to the bottom border becomes border-bottom-style. In the default style sheet the following border styles are applied only to the bottom border:

border-bottom-style: groove; - sets the style of the border as groove. Border Style can be set as none, dotted, dashed, solid, double, groove, ridge, inset or outset. For additional detail see W3Schools Border Style.

border-bottom-width: 3px; - sets the width of the border as 3 pixels. Border Width can be set in px (pixels). For additional detail see W3Schools Border Width.

border-bottom-color:#ff9900; - sets the color of the border as #ff9900. Border Color can be set as a hex color value or a defined color name. For additional detail see W3Schools Border Color. W3Schools CSS Color Names lists defined color names and hex color values.

Using CSS Styles


The basic elements involved in positioning and the default style sheet positioning values are:

div.display{position:absolute;left:20%;top:20px;width:80%;}

div.menu{position:absolute;left:2%;top:30px;width:16%;} - only used if $itemMenu, $itemMenuPreHtml or $itemMenuPostHtml are set.

div.logo{position:absolute; left: 0px; top: 0px;} - only used when $logoImageUrl is set.

div.area{position:absolute;left:20%;top:0px;} - only used when $areaHtml is set.

These four divisions establish the positioning for the site. All other elements are included within one of these. A default Quick Site (the basis of this site) consists of div.display and div.menu with the menu on the left 20% of the page (2 x 2% margins plus a width of 16%) and the display on the right 80%.

The softSWOT Style Page uses the Area and Logo divs to incorporate some of the standard softSWOT site style. The style sheet applied is stylesoftswot.css.

This is achieved by adjusting the variables in the Site Code file:

$logoImageUrl="http://www.softswot.com/images/softswot.gif";
$logoLinkUrl="http://www.softswot.com/";
$logoAltText="softSWOT - Web Solutions software";

This creates a < div class='logo'> which includes an image ..http://www.softswot.com/images/softswot.gif with a link ..http://www.softswot.com/ and the alt text ..softSWOT - Web Solutions software.

The right column content is simply set html in the Area Html variable:

$areaHtml="< div class='rightCol'>< div class='rightColCont'>< script type='text/javascript'>google_ad_client.... etc ....< /script>< /div>< /div>";

To position and format these elements the CSS Style sheet is adjusted.

The My Site Builder Styles site demonstrates additional techniques for simply and easily controlling the layout and style of your site.

Changing the Style within xHTML


By utilizing the Class Attribute styles set in the Style Sheet can easily be applied to an element. Refer to Class Attribute for details.

Style can also be applied directly to an element by simply adding style information to the element itself. Applying Style by Element shows how.

Changing the Style using Site Code Variables


Site Builder Software Site Code includes a set of CSS override variables that adjust the style values without changes to the Style Sheet.

Color 1, Color 2, Color 3 and Color 4 variables allow the base site colors to be adjusted by simply setting the variable values in the Site Code. For examples see the My Site Builder Styles site.

The Item Menu Layout value sets the Menu list item to float left (ie .menu li{float:left;} ) creating a horizontal Menu layout. Horizontal Menu provides and example.

Embedding Dynamic Content in a Static Template


If the Site Code variable HTML Full is set as false Site Code will return the div.display and div.menu divisions only. This allows the Site Code to be embedded within an existing web page. Using this feature the design of a site can be developed using any technique or application and the dynamic content simply included within the template. This technique is applied to include dynamic content within a static template. See the Html Full section of the Help file for details.
Sign In