Gastronome Tart: A Design That's Good Enough to Eat

Amy has a passion for food, and her blog, Gastronome Tart, is a delightful read for everybody who shares her passion. But with so many food blogs out there these days, how can Amy make sure Gastronome Tart stands out from the crowd? One way is with a stunning design, and that's exactly what she has.

Amy provided the gorgeous photo for the banner image and worked collaboratively with our design services team to create just the right look for her blog. The result is a design you won't forget.

Like what you see? Check out more of our design work in our newly launched TypePad Blog Services Portfolio. And be sure to visit Gastronome Tart for a tasty read!

Keep It Simple: Adding Custom Sidebar Content

Sidebars are a great place to add all types of interesting content, and the Embed Your Own HTML module makes it easy to add ads, widgets, badges, text, and other content to your sidebar.

The Embed Your Own HTML module is available with almost all design configurations. With the Chroma Theme, you can use the Custom Sidebar option on the Design tab. For Mixed Media Layouts with the recent photos module, you'll need to use a Notes TypeList. The tips below work similarly with the Custom Sidebar and Notes TypeList.

In the Knowledge Base, we have several articles on adding specific content to your sidebar, and we've added some additional quick tips below:

• add advertisements,
• recommended widgets,
• include a linked image,
• include an email link,
• add text to your blog's sidebar,
• and add Twitter widget.

Include an Email Link

TypePad has a default Email Me module which can be added to your blog at Design > Content.

However, you may want to use the Embed Your Own HTML module to add a custom link if you want to use a different email address or just include different text in your link. Below is an example of the code you can use to display a custom email link in your sidebar:

<p>We want to hear from you! <a href="mailto:deb@empirerecords.biz?subject=Blog Feedback">Send us an email.</a></p>

You can also generate code to secure your email address and prevent the email address from being scraped using an encoder. While securing your email address is not a bad idea, it also makes it difficult for readers of your site to copy your email address.

Once you have configured the code for your email link, go to Design > Content, select Embed Your Own HTML, and click Add This Module. Enter the code in the pop-up box and click OK. After rearranging your content, click Save Changes to update your blog.

Add text

The Embed Your Own HTML module makes it easy to add text to your blog's sidebar. You may want to add text for a brief introduction to your blog, a bio, or a copyright notice. At Design > Content, select the Embed Your Own HTML module and click Add This Module. Type the text you want to display in the pop-up box. You may want to surround your text with some additional HTML to have the formatting match other sidebar modules. For example:

<h2 class="module-header">About</h2>
<div class="module-content">
<p>Cooking With Tofu is a blog about my passion for turning blah tofu into wonderful meals both vegetarians and carnivores will enjoy. Thanks for visiting my blog!</p>
</div>

Twitter widget

Hundreds (if not thousands) of Twitter widgets are available, including the official Twitter widget, which allows you to display a list of recent tweets in your sidebar. After configuring your widget, you'll be provided with HTML code to add to your blog sidebar using the Embed Your Own HTML module at Design > Content.

Recent Frequently Asked Questions

We receive hundreds of inquiries from TypePad bloggers each day, and we wanted to highlight some of the recent frequently asked questions from our community.

Are you having problems uploading images, rearranging content, or publishing a post? If you are using Internet Explorer 9 as your browser, you can resolve all these issues by switching your browser to compatibility mode.

To switch to compatibility mode, click the broken page icon to the right of the browser address bar as shown here:

Do you wish to connect your TypePad blog to a Facebook Page? FaceBook only allows you to connect to a personal account. You can use the Facebook Notes or other options mentioned in the Knowledge Base. You can add a Facebook Page badge to your blog's sidebar too.

Are you missing a column on your blog or has your column has been displaced? You likely have an error in the code on your blog - either in a post or sidebar module. We have tips for correcting any code errors to restore your blog in our troubleshooting display issues article.

Do you need an invoice for your TypePad Pro subscription fee? At Account > Billing Info, you can review the transaction history for your account and view and print an invoice for each transaction. Additional information is available in the Knowledge Base.

Do you want more information on who is viewing your blog? TypePad makes it easy to take advantage of Google Analytics detailed statistics tool. Just go to Settings > Add-ons for your blog and enter the unique UA number from your Google Analytics account. Once you enter the UA number and click Save Changes, TypePad automatically adds the Google Analytics code to all the pages of your blog for tracking. See the Google Analytics article for more information.

If you need answers to any other questions, you can search the Knowledge Base, submit a question in the GetSatisfaction forum, or submit a help ticket.

Weekend project: 15 super quick CSS tips

We love the Custom CSS feature and we think there's even a lot fun to be had with it. Some of these tips come from help tickets and others you might not even know you wanted to try until now. These will work with most themes and can be adjusted to the colors you want to use.

1. Set a custom line height for text
The theme builder allows for standard sizing - normal, loose and tight. If you want to customize that, you can use:

body { line-height: 130%; }
.module-content { line-height: 120%; }

2. Round the corners of the blog container
You might want to add some space above and below so the rounding stands out.

#container {
margin-top: 15px;
margin-bottom: 15px;
border: 20px solid #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

3. Round the edges of the banner background color while you're at it

#banner
{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

4. Hide Page titles

.entry-type-page .entry-header { display: none; }

5. Style the featured post

.entry-featured .entry-content {
background-color: #EFEFEF;
padding: 10px 20px;
border-bottom: 1px solid #CCCCCC;
}

And you can hide the featured post's title and footer:

.entry-featured .entry-header,
.entry-featured .entry-footer { display: none; }

6. Set a default border around images in posts
This will apply to ALL of the images you include in your posts by default. This works best if you know the style you want to use and keep that consistent across all of your posts.

.entry-content img {
border: 1px solid #999;
padding: 10px;
background-color: #FFF;
}

7. Add a fancy divider between posts
You'll first upload your image and then copy the URL so you can use it in the following code.

.entry-footer {
padding-bottom: 60px;
background: transparent url(http://example.typepad.com/flourish.png) bottom center no-repeat;
}

8. Style every other blog comment

.comment-odd {
background-color: #EFEFEF;
padding: 10px;
}

9. Style your author image in the sidebar

.module-photo .module-content img {
border: 2px solid #999;
background-color: #efefef;
padding: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
margin-bottom: 15px;
}

10. Style the "email me" module

.module-email .module-content {
font-size: medium;
background: #EFEFEF;
text-align: center;
padding: 10px;
}

11. Remove the extra space between items in the archive and categories sidebar lists

.module-archives .module-list-item,
.module-categories .module-list-item {
margin: 0;
}

12. Fancify the RSS "subscribe" sidebar link

.module-syndicate .module-content {
font-weight: bold;
border: 1px solid #000;
background: #EFEFEF;
text-align: center;
padding: 10px;
}

13. Customize the search results highlight color

.search-results .search-results-highlight {
background: #88dddd;
}

14. Style the "Powered by TypePad" module

.module-powered .module-content {
background: #88dddd;
text-align: center;
padding: 10px;
font-size: 14px;
}

15. Add some pizazz to your TypeList thumbnails

.typelist-thumbnailed { margin: -6px 0 20px 0; }

.typelist-thumbnail {
    min-width: 50px;
    width: 50px;
    margin: 6px 18px 0 0;
    text-align: left;
    vertical-align: middle;
}

.typelist-thumbnail img {
margin: 0px;
border: 1px solid #000000;
padding: 4px;
}

From the SAY blog: There is No Muse

The act of creation is surrounded by a fog of myths.

Kirby Ferguson

We hate to be the ones to break it to you, but there is no muse. While we mythologize the creative process with images of lightning bolts and beautiful goddesses inspiring the divine act of putting pen to paper, chisel to stone or finger to tablet, the reality is a bit more prosaic. Creativity isn't delivered from above, it comes from hard work...and a good set of pre-existing materials.

via blog.saymedia.com

This week's "This Week in Venn" over on the SAY blog sparks a discussion on the nature of creativity and what it means to be truly original.

Is everything a remix? What does it mean to be original in a world full of reblogging and remixing?

Seems like good fodder for a Friday afternoon... :)

A Stunning Banner Image - We Can Help You With That

We've been posting a lot about banner images recently (how to add a personalized banner to your blog, a fancy trick for displaying a different banner each time your blog loads) - and with good reason. The banner image is the main focus of your blog's design. It's the first thing people notice when they view the blog and what they'll most remember about it.

Many people are creative and artistic and can make their own banner image. But if you're like me and you're not, TypePad Blog Services is here to help! Our banner designer, Melanie, can create a stunning, professional banner image for your blog.

The Banner Design Service costs $300. We create several banner proposals for you. You pick the one you like best and we adjust it to look just right for your blog. Then we upload it for you and make sure it fits in with your blog design. It's a terrific value and costs much less than a full blog design service.

Take a look at some recent banners we've designed:

Like what you see? If you're interested in having us design a wonderful banner image for your blog, sign up today!

Meet Some of Our Get Satisfaction Champions!

You might remember a few weeks back when we said we’d be looking for Get Satisfaction Champions to make the TypePad community an ever better place. Since then, a couple of you have answered our call, so we wanted to introduce you to our newest TypePad Champions!

First up is David Ewart. David blogs over at Holy Textures. David became a Get Satisfaction Champion by pointing out an issue Adobe was having that impacted .pdf files. Thanks for keeping everyone apprised of the situation, David!

Next up is Cookie. Cookie blogs over at Shut Up & Knit! Cookie has helped out in several topics, but she first came to our attention when she helped a new user with their registration issue. We appreciate you helping out the newbies, Cookie!

Not only did Cookie and David get a spiffy little Champ icon for their avatars at Get Satisfaction, they also got credit applied to their TypePad accounts!

If you’d like to help out your fellow TypePad subscribers in Get Satisfaction, remember you can do so by not just answering questions, but by making suggestions to improve a blog, starting a discussion on a useful topic, or anything else that comes to mind. The TypePad support staff closely monitors (and participates) in the forum, so we’ll keep an eye out for anything useful!

Head over to TypePad’s Get Satisfaction page and help make the community better!

Weekend Project: Rotate those Banners!

Have you ever considered having your banner change each time your blog is loaded? Ever created two or more banners you absolutely love, which perfectly fit your blog, but then had a terrible time choosing which banner you should use?

With this Weekend Project, you won't have that problem!

Here's what you'll need for this project:

• Access to the Theme Builder feature (Pro-Plus and above)
• Access to the Custom CSS feature (Pro-Unlimited and above)
• Access to the Blog Description at Settings > Basics
• Banner images you simply must have on your blog (tip: make sure they're all the same size)
• A rotating image script

* note: this project utilizes the Theme Builder, it does not add any code via HTML or other advanced methods.

To get started, use the Theme Builder to begin building your custom theme. In the section for the banner, make certain to select the "text" option, not the "image" option. Weird, right? Don't worry, it'll make sense in the end.

Next, create your banner images, making sure to give them the same height and width so that they all fit within the same amount of visual space. If you're not sure what size to make them, then we have some tips on choosing a banner size that will help.

In the example below, I have created two images that are 960px wide and 200px tall...

Once you have your custom banner images created, and saved to your computer, upload them to your File Manager. You'll want to keep the File Manager open as it will come in handy in the following step.

Now here is the part where we setup the rotating script. Thankfully, there are numerous sites available which serve that very purpose. We're offering a link to a single resource, but you can find your own with a query for "free banner rotation generator" in your favorite search engine.

The one we're sharing has ads and pop-ups, but several users have used it with great success. The form is simple to understand, and generates the necessary script. If you have a favorite resource for this type of script, make sure to share it in the comments below!

To generate the script for the banner rotation, go to HTML Basix. Scroll down a bit, then select the following recommended settings:

• New image with every page load
• Open on the same page
• The width of the banner images (for our example above, that would be 960)
• The height of the banner images (for our example above, that would be 200)

The next set of fields will be for the image URLs, the links they should go to, and the text you want to appear should someone hover over them. You will fill each set of three fields for every image you want to appear in rotation.

To fit our example, we would enter details twice, which would look something like this...

To find the URL of your banner images, you would open the File Manager, then click on the filename for each of your banner images. The images will open in a new tab or window of your browser, and you can copy the URL of the image from the address bar of your browser.

Once complete, click the "Generate" button at the bottom of the screen. You'll then see a new window open with the code you need to use. Copy the code provided to you, then, in your blog, go to Settings > Basics. Paste the script into the Description field and save your changes.

If you load your blog at this point, you'll notice that the blog title still appears in the banner area. Mosey yourself on over to Design > Custom CSS, then enter:

#banner-header { display: none; }

Click the Preview button to see the changes, then click the Save button so that your blog reflects those changes.

* note: this tip may not work completely as expected due to theme variances. If this is the case for you, feel free to open a ticket within your account, then let us know you're trying to complete the Weekend Project for rotating banner images, and which part isn't working for you.

Featured Friday! The Best of TypePad Blogs

Here's what's new on the Featured TypePad Blog:

Royal Tunbridge Wells

I Listen To Everything

Dan Santat: Author / Illustrator

Love My Dress

Bothersome Things

Shannon Eileen

Every week we round up a great sampling of the blogs we love that were created by TypePad bloggers just like you. Keep those submissions coming! Just head over to the Featured TypePad Blog and click "Suggest A Site"!

Keep It Simple: Composing posts offline

It is finally summer. Time for trips on planes, trains, and automobiles to visit family, explore the world, or just relax at the beach. Finding an internet connection can be difficult when on vacation but you still want to share your adventures. There are several options for composing your posts offline to be ready to publish when you get off the plane or step out of the sun.

Use the secret email address for your blog to publish a post via email or text message. Image, video, and audio files can be added as attachments to your email and be embedded in the published post. At Settings > Post By Email, you can get the secret email address. The Knowledge Base has more information.

Microsoft Word includes a built in Publish as a blog post feature allowing you to compose and publish your post without the need to sign in to TypePad. You can compose a Word document with images and formatting, and when you click Publish in Word, the published post will retain the formatting. You can also manage previously published posts directly in Word. Information on setting up Word to publish to your blog is available in the Post to blog from Microsoft Word article.

Other desktop publishers are available to compose and publish your posts without signing in to TypePad. For Windows, we recommend the free Windows Live Writer application. For Macs, you have MarsEdit which is not a free tool, or you can check the free application, Qumana.

Enjoy your summer!