Enhancing the Site Template

Instructions for Template Use in pdf format. file for printing 

Newsbox

The left sidebar of the Nightlights Template uses a news box to display News. You can easily add this feature on to any of your sidebars by using the following code within your XHTML:

<div class="sidebox">
<p class="sideboxheading">Headline</p>
<p>Your content goes here</p>
</div>

Add the following css will style your sidebox:

/* sidebar - colored box */
.sidebox {
border: 2px solid #CCCCCC;
margin: 0px 5px 3px 5px;
padding: 0px 3px 15px 3px;
background: #FFFFFF;
color: #000000;
font-size: 85%;
}
.sideboxheading {
background: #000000;
color: #FFFFFF;
font-weight: bold;
text-align: center;
margin-top: 3px;
padding: 2px;
}

If you want the corners to be rounded then you will need to add style rules adjusting the pixel to what you want.

border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;

NOTE: Change the style rules to suit your needs. Make sure you place the XHTML code INSIDE the leftColum1 or rightColumn1 <div>. If you want the styling for the links within your sidebox to be different than those on the rest of your site, you will need to add style rules for them also.

.sidebox a:link { style rules }
.sidebox a:visited { style rules }
.sidebox a:hover { style rules }
.sidebox a:active { style rules }

Using images for the site name

You can easily use an image for your site name which will allow for any fancy fonts or logos you may want to use. The site name at the top of this page is a transparent gif image. It has been inserted into the XHTML code and a class applied. The class style rules will allow the image to resize to fit the screen of mobile devices.

Code for inserting the image goes between the opening and closing tag <div class="logo">

<div id="header">
<img class="dynasize" alt="Expression Web Site Templates." src="images/site-logo.gif" />
</div>

Change the path and alt tag to YOUR image. Add the following style rule to your style sheet:

img.dynasize { max-width: 100%; }

IMPORTANT NOTE: The length and width have been removed after inserting the image. This must be done for the image to display correctly in mobile devices.

Social Media Icons (free ones)

Many sites now include icons for the various social media venues as part of the sidebar. Google is your friend in locating them. They are usually available in numerous sizes so select the size that works best with your site layout. Included below are just a few of those available.

RSS Feeds

Ian Haynes has a free add-in available for Expression Web that will make this job much easier. Read more about and download from Insert a Twitter or RSS Feed Add-in by Ian Haynes

Photo Galleries

Two of the photo galleries I use most often are Web Album Generator (free) and Ajatix Lightbox Add-In (commercial by Ajatix). Neither one of these galleries is mobile friendly.

Top Border across page

Example: Beryl's Quilt Shop

To add a top border that will extend across the entire top of your page, you will need to use a seamless image and repeat it vertically across the page. Change the body style to include an image as well as a background color for the page.

body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
margin: 20px 0;
padding: 0px;
background: #314263 url('../images/bord_country_sewing_01.gif') repeat-x;
}

At the same time you will need to adjust the top margin for the outerWrapper  style rules.

#outerWrapper  {
width: 980px;
margin: 136px auto 0px auto;
}

Bottom Border across page

Example: Dandelion Meadow Template

To add a bottom border that will extend across the entire bottom of you page, you will need to use a seamless image and repeat it vertically across the page. At the present time you will need to add a <div> to the bottom of the page and style it using the style rules in your style sheet.

#bottom-bg {
border: thin solid #FFFFFF;
background: #FFFFFF url('../images/fotolia_11343079.jpg') repeat-x left bottom;
height: 225px;
}

The code within your XHTML file would look like this:

<div id="bottom-bg"></div>

NOTE: On this particular template, the footer sits within the bottom background <div> tag.

Google AdSense

What is AdSense for mobile?

If you're looking to monetize a mobile site designed for users of iPhone, Android, or other high-end devices with browsers capable of executing Javascript, simply use any standard AdSense for content ad unit that fits your mobile-optimized site.

Mobile Ads Formatting