Chapter 2, Part 2: Designing Your Own Custom Look.

This Part is divided int 3 separate videos, a,b and c. This is to keep the total video file size from being to large.

Get the Flash Player to see the wordTube Media Player.

You can view this video in HD Quality at FULL SCREEN!

Get the Flash Player to see the wordTube Media Player.

You can view this video in HD Quality at FULL SCREEN!

Get the Flash Player to see the wordTube Media Player.

You can view this video in HD Quality at FULL SCREEN!

The graphic file editor that I use in this demonstration is a free online image editor http://pixlr.com/editor. This program is sufficient for most graphic operations. It is also blazingly fast! For that reason alone, I love it!

However, for higher quality font rendering, I recommend using a more advanced photo editor like Adobe Photoshop for example. Pixlr does have a variety of fonts, but if you choose to add effects like emboss and shadow etc...  the quality of rendering has noticeable graininess.

Here is the code snippet that I used in the demonstration blog for this video training. Copy & Paste the code below into your custom.css file, and replace the red colored text to match your own values.

body.custom { background: #d4d0c8 }
.custom #container { margin-top: 0em; margin-bottom: 0em; background: transparent; }
.custom #header { background: url('http://robertpeil.com/1blogtest/images/header.jpg') no-repeat;
height: 129px; /* height = (image height)-(46px) */
width: 960px; }    /* where width = (image width) */
.custom #page { background: transparent; }
.custom #content_box { background: url('http://robertpeil.com/1blogtest/images/background.jpg') repeat-y;}
.custom #footer { background: url('http://robertpeil.com/1blogtest/images/footer.jpg') no-repeat;
height: 100px; /* where height = (image height) */
padding-top: 4.5em;     /* adjust to position text */
text-align: center; }    /* to center text in footer */
/* the following is optional - it adds a line under the sidebar titles: */
.custom #sidebar_1 h3 { border-bottom: 1px solid #006ab3; margin: 12px 0;}
.custom #sidebar_2 h3 { border-bottom: 1px solid #006ab3; margin: 12px 0;}
/* the following adds a margin on the sides of the comment area */
.custom #comment_list { margin-left: 2em; margin-right: 2em; }

Don't forget, I would love to read your comments! You are welcome to add them below!

Return Back To Build Your Blog Training Menu Page

Leave a Comment

CommentLuv Enabled