Surviving a Teacher's Salary

Cute is an understatement. The website Surviving a Teacher's Salary is a great example of color, content, and organization. The design elements are contained in the css which is old style, that is, it is contained in the page itself.

The body has a background image.

The header-wrapper also has a background image. The width is 960pixels and is centered on the body background image by use of the 0 auto margins.Here is the css:

#header-wrapper {
background-image:url(http://www.leeloublogsimages.com/Layouts/2010/Schoolzone/SchoolZoneHead.png);background-position: top center; background-repeat:no-repeat;
width:960px;
height:400px;
margin-right:0px;
border-bottom: 0px solid #fdd9aa;
}

I have to go and I will come back to this.

Box Shadows with CS3

Fetchak gives a work around to allow box shadows; found at http://fetchak.com/ie-css3/. The example also rounds corners.

Mozilla has also posted this information at its Development Center. The information there is more detailed and six live examples are given.

Remember CSS is placed either in the head or directly into the element tag. The obvious advantage of putting the Blogger CSS in the head tag is that the css can be repeatedly applied to a class of elements. For purposes of this example, I put the CSS Here is the css:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

Let's see if it works.

First, I create a div with a class name "box". I then put the css into the element tag using style. (I am going to put the css into the layout when this works.) You will see that I added color to the background and the text, then changed the width, height and padding to make the box stand out.

Learn how to put a box shadow on a div in blogger

blog wars

The blogoshpere has changed much since I started blogging. Blogger, which ruled the platform in the beginning, finds stiff competition from WordPress and now DotNetNuke. While Blogger maintains an advantage in simplicity, WordPress and DotNetNuke offer hosting advantages that the serious blogger will want to take advantage of.

In February 2008 Michael Kizer made the switch from WordPress to NetDotNuke.You can read his posting  to read his thoughts on why the switch.However, his blog postings end in October 2009, which makes me wonder. Did he loose interest in NetDotNuke or just run out of thoughts on the remodel project that was the subject of the blog? And, if buzz on the internet determines popularity, then the new kid on the block, NetDotNuke, is not quite ready for prime time.

LinkedIn gives a thumbs up rating to WordPress.The big advantage of WordPress over Blogger is explained like this:

Wordpress.org is not only a platform for blogging (I run two blogs with it), it can be used as a Web site with or without a blog (I also am starting a new Website and Blog with it for my daughter). There are many free Wordpress themes to run blogs with thousands of developers offering plugins (Widgets - add ons) for almost anything imaginable. 

NetDotNuke may have and advantage in skins available for showing off your blog, but WordPress has an advantage over NetDotNuke in simplicity and add ons.

Of course, if simplicity is all that you are after, then Blogger can not be beat. Blogger is a good beginning tool. It also permits multiple blogs and a dashboard that allows the blogger to jump back and forth between blogs with the touch of a key.

three column layouts

Three column layouts can be tricky. The problem arises from content that doesn't fit the allowable space.

Here is the css for purl bee a three column layout.

#canvasWrapper { width: 986px; padding: 0 0px 0 0px; }  

#sidebar1Wrapper { display: block; float: left;  width: 180px; padding: 0; padding-right: 53px; } 
#sidebar2Wrapper { display: block; float: right; width: 240px; padding: 0; } 
#contentWrapper { float: left; width: 460px;  }

Moving On

As we all know, web design is constant advancing as technology and design itself change. The question of today is flash versus static html. One example of the evolving state of web design is RogerVivier.com.Simple html and css is made beautiful by the use of flash that turns the site into a virtual movie about this designer's fashion.

A second issue is the layout box itself. Roger uses a layout width of 968px and a height of 568px.The ratio is slightly smaller than 60%, but this is to allow for the width and height of the monitor screen. Here is the layout reduced by half.

Blogs to watch

There is no certain order to this list of blogs to watch. Still each blog has elements that are worth noting.So, follow along on the sidebar list of notable blogs from time to time.

My first selection is frugalmommy. The blog has an appealing layout, good content, and soothing background music.

html in emails

Creating a template to send emails is common. The template requires html. Sitepoint is a good starting point to learn the basic fundamentals of html coding in emails.

Facebook linking to websites and blogger

I am struggling with the idea of linking to my facebook account from a website or blog. NPR does it directly - http://www.facebook.com/NPR, but I can't seem to find a similar url on my facebook account.

The answer - http://www.facebook.com/facebook-widgets/.

Those links are what Facebook likes to call "Badges." Go to your profile. Scroll all the way to the bottom. On the lower left hand column you should see a link that says "Create Profile Badge." Click that. From there you can edit a Badge to show the info you'd like. At the end, it will give you some html code that you can copy and paste into another website or blog. When people click on your Badge, they will get sent directly to your Facebook info box.

The answer comes from yahoo.

Facebook

Add Facebook Connect to Your Blog with this 8 minute video. You will want to follow along with a written tutorial. WikiDevelopers, the same people who made the video, have also written out a step by step description of how to do it. If you need to understand more fully the Why, read on.

This seems like a challenge that is worth taking, so let's give it a try.

Swapping Images

Learning a technique and forgetting how to do it can be frustrating. I have played with and used Dreamweaver's swap image behavior many times, but I always have to go back to a refresher tutorial to remember exactly how to do it.

Here is a good tutorial from Adobe on the swap image behavior.

For my purposes, i want to swap an image when I mouse over another image. Note that the image I mouse over stays the same, another image, the source image, is swapped. This technique is commonly used in shopping carts to show multiple colors or styles of a similar product. A thumbnail image is often used for the mouseover, while the larger view is substituted. This is also the same annoying behavior behind pop-up windows.

The key steps are:

1. Name the source image that will be replaced.
2. Now, select the smaller thumbnail image. The mouse over behavior will be applied to this image to create the swap image behavior.
3. With the thumbnail selected choose behaviors. Click the plus sign and swap image.
4. In the swap image dialog box, first find the source image that you previously named.
5. Now in the box below, browse to the new source image that will replace the original image.
6. Click ok. You are done.

Such an easy and effective technique. Why do I forget it?

scrollers

Lyrics | King, Ben E. - Stand by Me lyrics

This is just a quick reminder to myself. Javascript allows you to scroll with the write command. For an example click on the following youtube site, Stand By Me. Now google javascript scroller and find the appropriate js.

I hope to come back to this project later when time permits.

meta tags again

How to add meta tags?

Check out this posting.

In edit html, place the following code just below

Hmmm? Is there a good way to type in meta tags in blogger? If you can't see the post above, you can look at the source code.

horizontal nav with gadgets

Horizontal Navigation Using Gadgets

The layout menu allows you to inset navigation below the header.Select the "Add a gadget" immediately below the header. Scroll down and choose any of the link lists. For example, I choose link list. Hit the plus button. The configure link list menu pops up. Don't give the list a name. The reason is that you want only the link names to appear. Finish the menu box with as many links as you wish to appear in your horizontal menu.

Now, if you save the layout, you will notice that when you view the blog, the link list will appear underlined with bullets and in block form. The reason for this is that this is the default css for an unordered list, which is what your link list is. Links are underlined by default. To create an inline list and remove the bullets, you will have to apply the inline code to the ul and none to the li element. Finally, if you want to remove the underline from the a element use the property none.

So, that your property changes don't apply to all list and link elements, give the newly created navigation a div tag with its own unique id or class, i.e. "topNav". Then, in the style section, apply the appropriate css to the topNav id or class. Do so for the ul, li, and a elements to change the properties to inline, none and no underline. Get the specific css to use.

meta tags

The best article on creating meta tags is from Blog Know How. Read it and the comments that follow.

You will need to edit the layout and specifically, the html. Take care to "Check the Expand Widget Templates box".

The meta tags are placed in the head section immediately below the title. Note that I am not using a meta tag below as blogger does not accept the tag.

[b:if cond="data:blog.url == data:blog.homepageUrl"]
[meta content="Place your blog description here" name="description"]
[meta content="Place your blog keywords here(separated by commas)" name="keywords"]
[/b:if]

menus - navigation - horizontal navbar

Add top navigation - horizontal navbar

This is a two part discussion in how to add top navigation to your blog. We will be creating horizontal navigation, placing it at the top of your blog, and finally styling it.

There are literally hundreds of sites that give the html and css to create menus for your site. CssPlay by Stu Nichols is a good example of a collection of menus from which to choose.

The menu itself is html using an unordered list, where each list item will link to a specified url.

The styling of the list items and the links is achieved by the use of css. A long explanation is not warranted here. Suffice it to say that the "inline" declaration will change the appearance of the list from a vertical block to horizontal. For a step by step explanation in how to create and style a horizontal menu check out 456BereaStreet.com.

the header image

Find an image that you like.

In photoshop add some text such as your blog title and description. Size the image to your width requirement or just check "shrink to fit" when you edit the header in layout. Upload and you are done/

start with a template

To make this blog you can start with a template that blogger provides, or ...

1. Find a template that inspires you. Mashables lists 50 template designs that kick ass. Check it out.

2. When you find the template you like, download the xml file to your computer.

3. On your blog dashboard go to your Blogger dashboard and go to Layout, Page Elements> Edit HTML.

4. Look for the section near the top where you can browse for your XML template:

In the end, I stuck with a blogger template because the mashables either didn't fit what I needed or they had coding errors.