Use UW-Stout style with Blogger - Web Developer's Resources

This page provides information about using a UW-Stout styled template with Blogger.com.

Getting Started

If you don't already have a Blogger account, go to Blogger.com and create a blog using your UW-Stout username and password. Then skip down to the rest of the directions.

If you currently do have a Blogger account, you may need to update your settings after logging into Blogger.

Setting up the Stout FTP

Before setting up the UW-Stout styled template, you may want to set your blog to the Stout FTP utilizing the Stout Web server.

Copy the code

Below is the HTML code that works with the Blogger templating system to produce the code that approximates the UW-Stout look. Select the code in the text box and copy it to your clipboard (CTRL-C or Right Click > Copy).

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[/* ----------------------------------------------- Stout Blogger Template ----------------------------------------------- */ /* Variable definitions ==================== <Variable name="mainBgColor" description="Main Background Color" type="color" default="#ffffff" value="#ffffff"> <Variable name="mainTextColor" description="Text Color" type="color" default="#555544" value="#000000"> <Variable name="pageHeaderColor" description="Blog Title Color" type="color" default="#ffffee" value="#ffffee"> <Variable name="blogDescriptionColor" description="Blog Description Color" type="color" default="#ffffee" value="#ffffff"> <Variable name="linkColor" description="Link Color" type="color" default="#000000" value="#000000"> <Variable name="hoverLinkColor" description="Link Hover Color" type="color" default="#88bb22" value="#0066CC"> <Variable name="dateHeaderColor" description="Date Header Color" type="color" default="#555544" value="#333333"> <Variable name="sidebarHeaderColor" description="Sidebar Title Color" type="color" default="#555544" value="#333333"> <Variable name="sidebarTextColor" description="Sidebar Text Color" type="color" default="#555544" value="#333333"> <Variable name="bodyFont" description="Text Font" type="font" default="normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif" value="normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif"> */ /* Primary layout */ body { margin: 0; padding: 0; font: 76% Arial, Helvetica, sans-serif; background:#aeaeae url(http://www.uwstout.edu/images/back.gif); } img { border: 0; display: block; } .clear { clear: both; } /* Wrapper */ #outer-wrapper { margin: 0 auto; border: 0; width: 760px; text-align: left; background: $mainBgColor; font: $bodyFont; } /* Header */ #header-wrapper { padding: 0; margin-top: 25px; color: #fff; background: #006; border-bottom: solid 2px #AF5A4E; border-top: solid 2px #AF5A4E; } #header h1 { margin: 0; font-size: 2.0em; padding: 20px 25px; } h1 a, h1 a:link, h1 a:visited { color: $pageHeaderColor; } #header .description { font-size: 110%; text-align: left; padding: 3px 20px 10px 23px; margin: 0; line-height:140%; color: $blogDescriptionColor; } /* Inner layout */ #content-wrapper { padding: 0; } #main { width: 400px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar { float: right; width: 226px; padding: 15px; clear: both; background: #ddf;} /* Bottom layout */ #footer { clear: both; padding: 5px 10px; margin: 0; border-top: solid 2px #AF5A4E; height: 120px; color: #fff; background: #006 url(http://www.uwstout.edu/images/rev_logo.gif) no-repeat right top; } #footer .widget { text-align: left; width: 25%; margin: 0; background-color: transparent; } /* Default links */ a:link, a:visited { background: transparent; } a:hover { background: transparent; } a:active { background: transparent; } /* Typography */ .main p, .sidebar p { line-height: 140%; margin-top: 5px; } h2, h3, h4, h5 { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; } h2 { font-size: 1.7em; margin: 0 0 5px; padding: 0 0 2px; border-bottom: 1px solid #006; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h5 { font-size: 1.0em; } h6 { font-size: 0.8em; } h2.date-header { color: $dateHeaderColor; } .sidebar h2 { font-size: 1.4em; margin: 0 0 5px; padding: 0 0 2px; border-bottom: 1px solid #006; color: $sidebarHeaderColor; } .sidebar h3 { font-size: 1.4em; margin: 10px 0 5px; padding: 0 0 2px; border-bottom: 1px solid #006; color: $sidebarHeaderColor; } .post h3 { margin-top: 5px; } .post-footer { font-style: italic; } .sidebar .widget { padding-left: 0px; } .main .widget { margin: 12px 0 0 0 ; padding-left: 15px; } li { line-height: 160%; } .sidebar ul { list-style: none; padding: 0 0 0 5px; margin: 0; } .sidebar ul li { list-style: disc; vertical-align: top; padding: 0; margin: 0; } .widget-content { padding-left:15px; } /* Profile ----------------------------------------------- */ .profile-datablock { margin: 3px 0 5px 0; line-height: 140%; } .profile-textblock { margin-left: 0; } .profile-img { float: left; margin: 0 10px 5px 0; border:4px solid #ccb; } #comments { border: 0; border-top: 1px dashed #eed; margin: 10px 0 0 0; padding: 0; } #comments h4 { margin-top: 10px; margin-bottom: -10px; font-weight: normal; font-style: italic; text-transform: uppercase; letter-spacing: 1px; } #comments dl dt { font-weight: bold; font-style: italic; margin-top: 35px; padding: 1px 0 0 18px; background: transparent; } #comments dl dd { padding: 0; margin: 0; } .deleted-comment { font-style:italic; color:gray; } .feed-links { clear: both; line-height: 2.5em; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { text-align: center; } /** Page structure tweaks for layout editor wireframe */ body#layout #outer-wrapper { padding-top: 0; } body#layout #header, body#layout #content-wrapper, body#layout #footer { padding: 0; } ]]></b:skin> </head> <body> <div id='outer-wrapper'><div id='wrap2'>  <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> </span> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='RaeRae Test3 (Header)' type='Header'/> </b:section> </div> <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Profile1' locked='false' title='About This Blog' type='Profile'/> <b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/> <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/> </b:section> </div> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> </div>  <div id='footer-wrapper'> <b:section class='footer' id='footer'> <b:widget id='Text1' locked='false' title='' type='Text'/> </b:section> </div> </div></div>  </body> </html>

Paste the code in Blogger template

After you're logged into Blogger, click the Layout link under the Dashboard heading, as shown below.
Click "Edit HTML" under the Template tab, and select all the text in the box by using CTRL-A or Right Click > Select All.
Paste the code (copied above) into the text area by using CTRL-V or Right Click > Paste.
Click the Save Template Changes button.

Add your office address

Click "Page Elements" below the Template tab. This will bring you back to the screen below.
Click Edit In the box that says Text, as in the image below.
This will pop up a window titled Configure Text as shown below. Leave the Title field blank.
Select all the text in the box by using CTRL-A or Right Click > Select All. Then copy it to your clipboard (CTRL-C or Right Click > Copy). <br/> <a href="http://www.uwstout.edu/">University of Wisconsin-Stout</a> <br/><br/> OFFICE ADDRESS <br/> Menomonie, WI 54751 <br/> Phone: 715/232-XXXX
Paste the Address code (copied above) into the text area. Select all the text in the box by using CTRL-A or Right Click > Select All. Paste the text with CTRL-V or Right Click > Paste.
In the code, change "OFFICE ADDRESS" to your actual address and replace "XXXX" with your phone extention.
Click the Save Changes button.

Start Posting

To beging posting, click the Posting tab. The page will look similar to the illustration below.
After writing your post, click Save Now to save your post. A link will appear near the top of the page that will allow you to view your blog.