Previous month:
August 2011
Next month:
October 2011

Posts from September 2011

Weekend Project: Styling Author Comments with Custom CSS

Last week we shared how to style your comments if you use Advanced Templates. This week we'll be focusing the Weekend Project on how to style your comments with only CSS.

In order to take part in this Weekend Project, you'll need to be a Pro-Unlimited (and above) member, and use the Custom CSS feature. All set? Let's get started!

First things first, though, let's take a look at how comments appear before any changes are made. Note that, due to the comment settings I've selected for this example, the comments include a profile image to the left of each comment.

Comments without styling

Continue reading "Weekend Project: Styling Author Comments with Custom CSS" »

Knit and Tonic

NAME: Wendy Bernard
BLOG: Knit and Tonic
WHY WE THINK KNIT AND TONIC ROCKS: When it comes to knitting, knit designer and author Wendy Bernard is a genius - but this isn't your run of the mill knitblog. Injected with plenty of wit and personality, Knit and Tonic puts a fresh spin on the subject. Needle-challenged? Don't worry - Wendy offers lots of knitting tutorials and tips & tricks, along with slices of her every day life.


FOLLOW KNIT AND TONIC: on Twitter and TypePad.

Laurelines Is Looking Lovely


Laura is an artist and uses her blog, Laurelines, to showcase her work. She wanted to take the blog to the next level, so she contacted the TypePad Blog Services team and we did a Tune-Up Service for her. From her own custom URL to social media integration and an email subscription option, the new features help her blog stand out as a unique site and encourage her readers to keep coming back and to share her posts with their own friends. The best feature, however, is the new banner image, which we created from Laura's own art. Gorgeous, isn't it? She is incredibly talented.

Looking to give your own blog a new lease on life? Want to make it better but aren't sure exactly what it needs? In the Tune-Up Service, we evaluate your blog and recommend the most important features, then implement those features for you. You can even get a new banner image as part of the service. Sign up now! And don't forget to check out Laurelines to see more of Laura's amazing art.

P.S. You can view this and many other great blogs in our portfolio.

Introducing Scene: Urban Borough, a New Theme from TypePad

We are introducing a new theme today called Urban Borough.


Urban Borough is the first release from a brand new theme set, which will consist of four themes altogether, grouped under the name Scene. The remaining three themes will be released over the next several weeks.

Common between all of the Scene themes will be:

  • wide columns (perfect for larger images and sidebar advertisements/widgets)
  • clean lines (classic styling for long-term use of the theme)
  • lots of balanced white space (ideal for helping to keep your blog from looking cluttered)
  • complementary color schemes to match the (gorgeous!) theme banners;
  • blog footer styles focused for content-rich setup; and
  • optimized styling for mobile views (mobile views will see a slimmed-down version of your blog, showing only the navigation, banner, blog title, and blog posts; all other content will not display)

We're very excited to be bringing you Urban Borough, as well as the rest of the themes in the coming weeks. We hope you take the time to preview and apply each theme as they're released. Feel free to lean on the thematic strengths or make adjustments via Custom CSS or the Content screen.

Want to learn more about the Scene theme and adjustments you can make? We've prepared and published an article to walk you through all of the great features and tweaks available for Scene.

Did You Know?: Staying in Touch with TypePad

We don’t know about you, but in today’s world, it can be hard to find all the information you need and to stay in touch with the people and brands you care about. Here’s how you can keep in contact with TypePad!

First off, there’s the TypePad Twitter account. On Twitter, we post status updates (even on services that aren’t TypePad but might affect your blog like domain registrars), links to Everything TypePad posts, answer subscriber requests, and more.

We’re also on Facebook! We post status updates here as well, ask questions about what you think on certain topics, and more. Be sure to Like us on Facebook!

We’ve mentioned it previously, but our Get Satisfaction forum is an excellent way to find answers to your questions, find out about top issues, and interact with your fellow TypePad members. You can even become a TypePad Champion!

We hope this helps you keep in touch with us in all the various places!

Weekend Project: Styling Author Comments in Advanced Templates

All comments on your blog look the same by default but, as the author of the blog, you want your comments to stand out. This Weekend Project post will show you how to add formatting to your own comments. The use of an Advanced Template Set for your blog's design is required for this tip.

First, go to Design > Templates and click to edit the Individual Archives Template. Look for the section below in the template:

<MTComments><!-- comment listing -->
<a id="c<$MTCommentID$>"></a>
<div class="comment" id="comment-<$MTCommentID$>">

Add <$MTCommentAuthor dirify="1"$> to the third line of code just after <div class="comment

<MTComments><!-- comment listing -->
<a id="c<$MTCommentID$>"></a>
<div class="comment <$MTCommentAuthor dirify="1"$>" id="comment-<$MTCommentID$>">

The MTCommentAuthor tag calls the Display Name of the commenter. If the commenter is signed in to comment, the Display Name is set at Account > Summary in the author's TypePad account. If the commenter is not signed in to comment, the content of the Name field in the comment form is used.

The dirify attribute converts the Display Name to all lower-case, strips non-alphanumeric characters, and converts spaces to underscores.

In the example, the author name is Rex Manning, and the dirify tag will convert the name to rex_manning making it easy for us to use CSS to apply formatting to comments submitted by Rex.

If you viewed the source code for a post you've left a comment on, you'd see the result of the above code would be:

<MTComments><!-- comment listing -->
<a id="c####"></a>
<div class="comment rex_manning" id="comment-####">

At Design > Templates, click on the Stylesheet Template to add the CSS to style comments submitted by the post author.

The class for the author comments is going to be the author's Display Name converted to all lower-case, no alphanumeric characters, and underscores used instead of spaces. If your display name is Sarah, the class used is .sarah. If your display name is Sam Callahan, the class used is .sam_callahan.

To indent the comments submitted by the author, you would use the CSS:

.rex_manning {
  margin-left: 20px;
  margin-right: 20px;

To also add a background color and border to the comment:

.rex_manning {
  background-color: #DDEBEB;
  border: #000000 1px solid;
  margin-left: 20px;
  margin-right: 20px;
  padding: 8px;

You can add an image to the comment. First, upload the image to your TypePad account at Library > File Manager. Copy the URL for the uploaded image to include in the CSS. The example CSS below places a small pencil icon to the left of the author's name.

.rex_manning .comment-footer {
  background: url( no-repeat;
  padding-left: 18px;
  border-top: #000000 1px solid;

Combining all the above styles together results in:

Hollywood Housewife

NAME: Laura Tremaine
BLOG: Hollywood Housewife
WHY WE THINK HOLLYWOOD HOUSEWIFE ROCKS: Laura Tremaine is a small town Oklahoma girl turned Hollywood Housewife. She lives in the hills of Los Angeles with her producer/director husband and her toddler daughter. Their life is about 95% west coast chaotic bliss and 5% red carpet. On her blog, Hollywood Housewife, Laura brings a fresh, engaging perspective to everything from red carpet events, to beauty, to everyday life. We love it!



Brian Dickie

NAME: Brian Dickey
BLOG: Life as General Director of Chicago Opera Theater
WHY WE THINK BRIAN DICKIE ROCKS: As General Director of Chicago Opera Theater, Brian Dickie knows exquisite music. He also has his finger on the pulse of the community and Chicago's arts scene, a position that has earned him the honor of being named by the Chicago Tribune as a “Chicagoan of the Year,” not once, but twice, and having garnered several other awards and countless praise from the community during his tenure. His blog focuses on his work as General Director and features captivating posts about his daily life, travels, and thoughts on opera and the Chicago arts scene. His blog is must for enthusiasts, certainly, but should turn the curious amongst us into opera lovers as well.



The Big Parent Hacks Redesign


  • Et-phacks
  • Et-phacks2


Click the thumbnails for a larger view

Asha's blog Parent Hacks is a great resource for parents who are looking for tips and tricks. But the blog's design hadn't been updated in several years and Asha felt it was out of date. She had a good idea of what she wanted and worked with Trainello Design to create a lovely new design for her blog that more effectively highlights her content. Asha then reached out to TypePad Blog Services and we implemented her design on TypePad. Read Asha's blog post to learn more about how things went.

Whether you've created a mock-up or would like to copy the design of your personal or organizational website on TypePad, our Design Implementation Service can help. You may be surprised at what's possible. Sign up today!. And be sure to visit Parent Hacks to learn how you or a parent you know can make life easier.

P.S. You can view this and many other great blogs in our portfolio.