Random thoughts on art, technology, stuff, and occasionally Real Estate: May 2007

The Fake Weenie takes another turn in the spotlight.  If you need a refresher on the original construction of the Fake Weenie, check here:  TypePad: Deconstructing A Weenie

You know, I'm sorta fond of hairline borders, and I think I'd like a hairline border separating the two columns of the Fake Weenie (http://www.fakeweenie.com/)

Here's a screen shot of the borderless weenie:

To create a hairline border separating the two column using custom CSS, do this:

Sign in to your TypePad account

Click Weblogs, select your blog.  Hit Design -> Click Edit Custom CSS

 Add this line of code to the Custom CSS text box:

.layout-two-column-right #alpha-inner {border-right: 1px solid gray}

(You know the drill -- Do NOT omit the DOT, the brackets are curly brackets)

Then click Save Changes

Back at the Design screen, scroll to the bottom, click Republish Weblog

 At the pop-up window, click Publish

Viola!  The Fake Weenie with a hairline border separating the columns:

If you are using a two-column layout with the sidebar to the left, or a three-column layout, your CSS code will be slightly different.  Stand by!

Coming soon:  Cheatsheets with the element names for the three most common TypePad layouts.

Maybe you've had a TypePad blog for a while.  Maybe you already set up forwarding and masking in GoDaddy.  Well, you can easily change from MASKING to MAPPING.  (And back again, if you are so inclined).

Here are the steps to change an existing blog from MASKED to MAPPED:

1.  Sign in to GoDaddy first.  Hit Domains -> Domain Management & Renewals -> My Domain Names

2.  Place a checkmark to the left of the domain name, click "Forward"

3.  Mark the radio button titled "Diasabled", click OK .   Any previous masking is automatically disabled when forwarding is disabled.

4.  Leave GoDaddy running.  Open a new browser window or tab and sign in to TypePad.

5.  In TypePad, hit Control Panel -> Site Access -> Domain Mapping

6.  Click Begin Here: Map a Domain

7.  Type in the domain name.  Click "Get DNS Setting"   TypePad will display the CNAME record.  (You can drag the cursor over the name in "Points to", then hit Edit -> Copy, so you don't have to type when you arrive at that step)  Click "Complete Final Step"

8.  Select the individual TypePad weblog to which you want to map.  Click "Add Domain".  Close window

9.  Now back to GoDaddy.  If you left GoDaddy running in its own window or tab, you'll already be at the Domain Control Center with the domain selected.  Click "Nameservers"

10.  Under "Set Nameservers", click the "Default Nameservers" tab.  Mark the radio button next to "Default Parked Nameservers"  Click OK.

11.  At the next screen, clicking OK in the processing section will return you to the Domain Control Center.  Double click the domain name to access the details page.

12.  At the Details screen, find "Total DNS" in the center column of the top section.  Click "Total DNS Control and MX Records"

13.  The first row item is (Host) www (Points to) @ 

Click the pencil icon in the far right column of that row -- In response to "Are you sure?", you can click OK

14.  At the "points to Host" line type in the TypePad CNAME infor (or hit Edit -> Paste if you copied this several steps back)  Click OK

15.  Wait.  Test.  The domain usually takes an hour or so to resolve.  How will you know it is now MAPPING instead of MASKING?  With your blog open, hit View -> Source  ( or View -> Page Source in Firefox)  With MASKING, you will only see a view lines of html code, ending in a frameset.

With MAPPING, you will see the entire page in html

When the domain address finally resolves to your TypePad blog, go back to your TypePad Control Panel  (Control Panel -> Site Access -> Domain Mapping)

Scroll down to the list of your domains.  Check your new domain "Active".  Click "Set"

I converted http://www.clutteredshelf.com for this demonstration.  Now I need to go change it back to MASKED, since its is, after all, supposed to be the evil twin in To Mask Or Not To Mask, That Is The Question

Mapping will avoid some of the pitfalls of masking, such as hidden link URLs.  Here's how to MAP using GoDaddy and TypePad: 

First register the Domain Name at GoDaddy.  Leave GoDaddy running in one Browser window or tab. 

Go to TypePad in a different browser window or tab

Hit Typepad Control Panel -> Site Access -> Domain Mapping

Click "Begin Here: Map a Domain Name"

Type in the new domain name, click Get DNS Settings. Typepad will display the CNAME Record,  you can drag your curser across the CNAME and hit Edit -> Copy, so you don't have to type it when you get to that step.... then Click "Complete Final Step"

Tell Typepad which individual blog to map, click Add Domain

Now back to GoDaddy

At the GoDaddy Domain Control Center, place a check mark at the left of your new domain to select it, then click Nameservers

In the Default Nameserver tab, select "Default Parked Nameservers", click OK

 In the section below, double click the domain name to go to the details page

Find "Total DNS" in the middle column, and click on "Total DNS Control and MX Records"

The first row item in the list is www @

Click on the pencil icon (edit) in the far left column

On the line "Points to Host Name" type  in the CNAME information from Typepad (If you copied it earlier from TypePad, just hit Edit -> Paste)  Click OK.

Wait.  This one took just about one hour to resolve.  Test.   When the domain address finally resolves to your TypePad blog, go back to your TypePad Control Panel  (Control Panel -> Site Access -> Domain Mapping)

Scroll down to the list of your domains.  Check your new domain "Active".  Click "Set"

And Brian, since your blog already exists, and you'll need to first disable your existing forwarding, you might want to do this at, say, 3:00 AM.

Teresa's comment here got me thinking.  Let's see if Hands On Hacking can duplicate the simple, clean, minimalist design of the realestate weenie.

Create a test blog -- illustrated instructions are here: TypePad: Initial Steps Illustrated

Click on the Design Tab, Click "Change Theme"

Mark the radio button to the left of "Custom Theme"

Under "General Page Settings" click "Edit This Element"

At the next pop-up screen, under "General Settings" choose white as the "Background", leave "Border" as none.
Under "Main Content Column", set the "Center Column" at 500 pixels.  Set the  "Right Column" at 300 pixels. Set the Scroll to the bottom of the pop-up screen and click "Save Changes".

The next item in the "Customize Your Theme" list is "Page Banner".  Click "Edit This Element". 

Choose gray as the "Background", for "Border" choose, "Bottom", "Solid".   Later on you'll want to upload a banner image, but this will do for now.  Scroll to the bottom of the pop up screen, and click "Save Changes".

Scroll to the bottom of "Customize Your Theme", and click "Save Changes"

Now would be a good time to post something, so you can view your blog.  Click the Compose tab.  Make sure "New Post" is underlined, and write something.  Scroll to the bottom of the screen, click "Save". 

Take a peek, by clicking "View Weblog".

Now, if weenie were mine, I think I would outline the blog container with a line of mustard.  Click the "Design" tab.  Click "Edit Custom CSS"

 And add this line:

.layout-two-column-right #container  { border: 6px solid yellow }

Do not omit the DOT at the beginning, remember the brackets are "curly Brackets".

Scroll down, hit "Save Changes".  At the Design screen, scroll down, click "Republish Weblog",

in the "Publishing" pop-up box, click "Publish"

Here you go:

Real Weenie  http://www.stpaulrealestateblog.com/weenie/

Fake Weenie  http://cheryljns.typepad.com/fake_weenie/

Disclaimer:  This post addresses learning basic blog design.  It does not invite debate on the content of the Weenie blog.  :-)

When I first starting using TypePad, I spent a lot of time looking for things.  For me, at any rate, the layout of menus and commands took some getting-used-to.  Now I know where things are.  But just in case any new TypePad user is stumbling around, looking for things hidden in plain sight, here is an illustrated version of the initial steps in setting up a new blog:

Sign in to your TypePad account

Click the "Weblogs" tab

Click "Create a new Weblog

Name your new Weblog, then click "Create New Weblog"  Hint:  If this is just a test blog, you probably do not want to "Make This Weblog Public".

Click the "Design" tab

Now you are here, and you are ready to rock!

TypePad offers several predefined, ready-to-use blog templates.  Many very successful blogs are built with predefined templates.  Brian Brady's excellent blog, America's Most Opinionated Mortgage Broker uses TypePad's predefined Stevenson template.

OK.  Suppose you also really like the look of the Stevenson theme, but that Georgia font just doesn't do anything for you. I'm going to walk you through changing just one element of the Stevenson theme, using Custom CSS,  so you can see how easy it is to customize predefined templates.

The element we've going to change is the banner font.  Here's how to keep the theme and change just that one element, the font in the banner, using TypePad's Custom CSS.

You can follow along by creating a test blog.  If you have a Typepad Pro account you can create an unlimited number of blogs.  I have

Sign in to your TypePad account

Click the "Weblogs" tab

Click "Create a new Weblog

I'll call mine "Test Stevenson"

Click "Create New Weblog"

Click the "Design" tab

(For an Illustrated version of the above steps - go here:  TypePad: Initial Steps Illustrated  )

Click "Change Theme"

Click the radio button beside "Pre-defined Theme"

In the drop down menu to the right of "Show", choose "Cool Colors"

Click the radio button to the left of "Stevenson"  (Stevenson is in the second row)

Click "Save Changes"

Now is a good time to stop for a moment and post something, since you won't be able to see your design achievements otherwise.   "The Quick Brown Fox" will work just fine, as will "Lorem Ipsum" .

Click "Compose"  "New Post" paste or type in your text and click save.

Now back to design work.

Here's where we change the banner font:

Let's say you prefer Verdana to Georgia.

Click the "Design" tab.  Click "Edit Custom CSS"

Type (or copy and paste) this line in the text box:

#banner-header {font-family: Verdana, sans-serif;}

That is CSS (Cascading Style Sheet) code.  Don't drop the hash mark (#), the brackets must be "curly" brackets {}  and that's a semi-colon ; at the end of the font description not a colon.

Hit "Save Changes".  And the bottom of the Design screen, hit "Republish Weblog"

Now look at your Blog.  Bada - Bing!  New Banner font!

The biggest challenge is using Typepad's Custom CSS is figuring out the proper name code for the element you want to change.  Stick with me, I'll get you there.  :-)

OK - you took a photo and the room is leaning or tilting.  What do you do?  Skew it!

Before starting, I find it is easier if I enlarge the "canvas" to gain some working room.  Grab one of the edges or corners of the window holding the image, and drag outward.

Next: 

In Photoshop Elements 5 hit Select -> All.  Then hit Image -> Transform -> Skew

In Photoshop Full Version hit Select -> All.  Then hit Edit -> Transform -> Skew

Grab the lower right of left corner of the selection box and drag outward.  Grab the opposite corner and drag outward.  Keep dragging until the predomoniant vertical lines look straight.  Hit Enter to finish and "Apply the Transformation".

The Skew tool is a very easy tool to master.  Learning of its existence, and learning where to find it are the difficult steps.

If you know how to use White-Out, you already understand the concept behind Photoshop's Clone Stamp.

How do you use White-Out?  You see an error on a typed page.  You daub the little brush around in the bottle, then you use the brush to daub the white stuff on top on the error to cover it up.

The only difference in Photoshop is that instead of daubing the little brush around inside the bottle, you first daub it at some part of your image - usually called the "source".  Whatever color/shade/part-of-the-image you've chosen as your "source" is the color/shade/part-of-the-image that will be used to paint over the "error".

Here's how:

Click on the Clone Stamp Tool.

Look up at the settings in the Option Bar.  You can experiment with a larger or smaller "brush".  You may also want to UNCHECK "Aligned".  ("Aligned" tells Photoshop, as you paint over a large "error", to keep moving the "source" point in order to keep it exactly the same distance from the error as when you began.  Sometimes you want this.  Most often you do not want it.  If you are not expecting the behaviour, it can be quite puzzling.)

Press and hold down the ALT key.  As you hold down the ALT key, click on the part of the image you have chosen as your "source".  This is usually called "selecting the source".

Release the ALT key.

Begin dragging the cursor over the "error" in a "rubbing" motion.  If you are covering a large "error" you will still note some of the "Aligned" behaviour, even with the Aligned option unchecked.  Just reselect the source area, and "rub" some more.

As you practice cloning, you will become aware of subtle differences in colors, textures, and shades, and you will realize you may need to reselect slightly different areas of the source periodically as you work, to match slightly different shades surrounding the "error" you are covering.

These instructions refer to the Windows version of Photoshop Elements.

Scott Kelby has an detailed cloning tutorial in his book, "The Photoshop Elements 5 Book For Digital Photographers".  The tutorial is titled "Cloning Away Unwanted Objects", and it begins on page 268.

.

TypePad Users:  Check this out!

http://everything.typepad.com/blog/2007/05/go_beyond_blogg.html

The new Pages features lets you create any number of additional, detailed, static pages to compliment your blog,  that you can then link to from the main page of your blog.

Easiest route to this new feature:  From the TypePad Welcome (Home) screen, hit Begin New Post, and you'll notice the Compose tab now gives you the choice of composing a New Post or a New Page.

Hmm.  This brings us a baby step closer to the convergence of a "static website" with a blog......

To mask or not to mask, that is the question.  And keep in mind, just because you can do something, doesn't mean that you should.

The issues are easier grasped by example so, to illustrate, I have created two test blogs:  http://www.clutteredshelf.com  and http://www.frayedcuffs.com  .  For the purpose of this example, http://www.frayedcuffs.com  will be the good guy, http://www.clutteredshelf.com  will be the evil twin.

Take a look at http://www.frayedcuffs.com    The domain name frayedcuffs.com was parked on the Typepad blog using PairNIC.  Do you see the short blogroll in the left colum?  Click on any of those blogs, then look at the address bar of your browser.  If you clicked on Rain City Guide, you saw http://www.raincityguide.com  in your address bar.

Now go to http://www.clutteredshelf.com   The domain name cluttershelf.com is forwarded to the Typepad blog and masked.  Now click on Rain City Guide in the blogroll.  What do you see in your browser's address bar?  It still says http://www.clutteredshelf.com , right? Click on any of the sites in the blogroll, no matter what link you click on, your browser's address bar still reads http://www.clutteredshelf.com

Now, seriously, do you think Mr. Dustin Luther would enjoy seeing his creation displayed under the URL http://www.clutteredshelf.com ?  Or Mr. Miller?  Or Mr. Swann?

If it were your website or blog, would you want it displayed under someone else's URL?

Now you have grasped the single biggest issue with masking.

Try something else.  Hit View -> Source (in Firefox it's View -> Page Source) and take a look at the source code.  Even if you know absolutely nothing about html, you can see that the source code showing for http://www.clutteredshelf.com  is only about 14 lines referencing a "frameset".  Now look at the source code for http://www.frayedcuffs.com .  Everything is visible, including META tags.  I'll leave the significance of that to the SEO experts.

All that said --- there is one area where I think masking is a good idea:  Single property websites.  On a single property website you will probably not have a blogroll.  You will probably have a limited number of links, and all of those links will most likely be information you created about that particular property,