Weekend Project: Grid-style Posts Layout

October 14, 2011

This weekend's project is inspired by Rachael Herron's blog Yarn-A-Go-Go. Specifically, Rachael has set up her Books section to use a grid format for the book covers and blog post title. Each post then has a detailed synopsis, links to purchase the books, and reviews.

Yarn-A-Go-Go

If you would like to display your posts in an easy-on-the-eyes grid format, and you're using Advanced Templates for your blog, read on!

Continue reading "Weekend Project: Grid-style Posts Layout" »

Weekend Project: Styling Author Comments with Custom CSS

September 30, 2011

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" »

Weekend Project: Styling Author Comments in Advanced Templates

September 24, 2011

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(http://example.typepad.com/pencil.png) no-repeat;
  padding-left: 18px;
  border-top: #000000 1px solid;
}

Combining all the above styles together results in:

Weekend Project: Move the search form to the navigation bar

September 16, 2011

We're calling this a Weekend Project because there's a bit of code involved but you'll be amazed how easy this is to do. This project can be used on blogs using Basic Templates at any of the Pro subscription levels.

First, you'll need the code for your blog's search form. The code is different for each individual blog so to make it easy, we'll just grab the code directly from the blog's HTML source. Make sure the search form module is enabled in Blogs > Design > Content and then open your blog in your browser.

View the source of the page (View > Page Source on Mac, View > Source on PC) and look for the Search header in the sidebar code. You'll copy just the <form> code. Below is a screenshot of what to look for and copy.

View source

Next, go back to the Design > Content page and open the Navigation Bar. Here, select the Advanced option and paste the code in the list item (<li> in code) for the last item in the list. You will also add a bit of code to the float the form to the right in the nav bar. It will look like this:

 <li class=”last-nav-list-item nav-list-item” style=”float: right;”><form id="search-blog" method="get" action="http://example.typepad.com/.services/blog/6a00e550196b118834013486aabf34970c/search">
            <input type="search" name="filter.q" results="5" value="" />
            <input type="submit" value="Search" />
        </form>
   </li>

Here's an example screenshot:

Nav Bar code

When you save and view your blog, it should look something like this:

Search form on blog

The final step is to remove the search module from your sidebar in Design > Content. That's it! You're all done. Have a great weekend of relaxing and blogging, folks!

Weekend Project: Build a Content-Rich Blog Footer!

September 02, 2011

This Weekend Project is going to walk you through how to create a content-rich Blog Footer. All Pro members of TypePad can take part in this project to transform their default Blog Footer. In no time at all that simple pair of links at the bottom of your blog will be replaced with great new content!

Thickfooter_before-after

Continue reading "Weekend Project: Build a Content-Rich Blog Footer!" »

Weekend Project: Faux Columns with Custom CSS

August 19, 2011

CSS is a great tool for adding customization and flexibility to your blog's design. However, it does have its limitations. One limitation you may have run into yourself if you use the Theme Builder looks like this:

Faux-columns-before

Notice how the border to the left of the sidebar stops prematurely? This is because the border can only extend as far as the content. This is the expected behavior with CSS but it doesn't look great. How can we get around that?

The solution is surprisingly simple - use an image behind the columns to fake the look of the background colors and borders extending beyond the content. A List Apart introduced this concept years ago and called it Faux Columns. Today, we're going to adapt that idea to work with your TypePad blog.

First, you'll need a background image. For reference, the image we're using for our example is available here. Go to Blogs > Design > Theme and see how wide each column in your design is. Your blocks of color should be those same widths, with borders between if you'd like. The overall width of the image should match the width of each column in your Theme added together. You can use solid colors, gradients, patterns, etc. It's up to you but keep legibility in mind!

Next, upload the image in Library > File Manager. You'll need the URL for the image later.

Now, go to Blogs > Design > Custom CSS and add this code:

#container-inner { background: transparent; }

This will remove the existing color from behind the container so your image will be able to show. You'll also need to make the existing colors behind each column transparent. The exact code for this depends on which layout you've chosen. For a two column layout with the sidebar on the right, the code would look like:

.layout-two-column-right #alpha-inner { background: transparent; }
.layout-two-column-right #beta-inner { background: transparent; }

Finally, you'll add the code to put your image behind the container, repeating vertically.

#container {
background: #FFFFFF url(http://example.typepad.com/bg-gradient.png) repeat-y;
}

The result should look something like this:

Faux-columns-after

Notice how the border and background behind the sidebar extend beyond the content? This concept allows for a lot of flexibility in design from simply having a border extend all the way down the page to elaborate background patterns. Have fun!

Weekend Project: Style Your Mobile Blog with Basic Templates

August 05, 2011

You may remember a post we published last month about styling the mobile version of your blog with Advanced Templates. This weekend's project is how to style your mobile blog without Advanced Templates. This is a great tip for those of you who want a custom look for the mobile version of your blog, but don't use Advanced Templates, or only know enough CSS and HTML to get yourself into trouble.

First, let's begin with our test subject--Swoonish. This just so happens to be my personal blog, which I hadn't gotten around to designing the mobile view for yet. (You're helping me be productive when I'd rather be eating pizza, so thanks! :D)

This is what Swoonish looks like in your standard browser, via your standard computer:

image from screencast.com
If I wanted to, I could ignore that not everyone has an iPhone, or other compatible device that (usually) shows you how the blog should look. Unfortunately, I, and the rest of the support staff, are completely aware of the frustration that can come when you're trying to read a blog with an amazing, fully decked-out design, lots of photographs, scripts, and content, that just takes forever to load.

The purpose of this project, then, is to:

  1. retain some aspects of your blog's design so that it's still visually linked to the full version of your blog; and
  2. provide a slimmed-down, content-only (note: post content, not sidebar content) view that is easy to read and browse.

Excited to get started? Me too!

Continue reading "Weekend Project: Style Your Mobile Blog with Basic Templates" »

Weekend Project: Eye-Catching Sidebar Menus

July 22, 2011

TypePad's Pages feature is pretty nifty - compose your Pages with the info you want to include, drop a  module into your sidebar that lists them all out nicely, and voila - instant menu. But why stop there? You can use CSS to fancy it up and draw attention to that important information.

Let's turn this:

Pages-module-before

Into this:

Pages-module-after

If you're unfamiliar with TypePad's Custom CSS feature, this will be a good way to get your feet wet. First, let's hide the "Pages" header.

.module-archives .module-header { display: none; }

Next, we'll style the links so they're black with no underline:

.module-archives .module-list-item a {
color: #000;
text-decoration: none;
}

Finally, we'll style each list-item. I've made mine very simple and sleek, so they stand out but aren't too distracting:

.module-archives .module-list-item {
margin: 0 0 2px 0;
padding: 5px 5px 5px 14px;
background-color: #EFEFEF;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ccc;
}

See how the subtle borders make the links look almost like buttons? That's CSS magic! Of course, you can use any colors you want.

Weekend Project: Displaying Recent Photos in Advanced Templates

July 08, 2011

Warning: geekery ahead! If you're an Advanced Template user and want to add even more fun stuff to your blog, this post is for you. If you're a Basic Templates user and want to display the photos recently added to your blog all in one spot, you already have this functionality available as part of our Mixed Media layouts.

When you add an image in a post in TypePad, the backend generates a whole slew of image thumbnails that you can access via special TypePad tags. In this tutorial, we're going to use those tags to display a small gallery of image thumbnails in the sidebar of a blog. The special tags will generate a squared thumbnail of the first image inserted into each post, which link back to the associated post's individual archive URL. Below is an example on a live blog:

Recentphotosatscreenshot
The last image in this example is a placeholder that links to a post that doesn't have an image associated with it. Your placeholder image can be anything you'd like, you'll just want to make sure it's the same dimensions as the thumbnails you're generating.

The code for the above example:

<h2 class="module-header">Recent Photos</h2>
        <ul class="sidebar-thumbnails">
            <MTEntries lastn="10">
<MTEntryPhoto>
<li class="thumb"><a href="<$MTEntryPermalink$>"><img src="<$MTEntryPhotoURL spec="115si"$>" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>"></a></li>

<MTElse>
<!-- Posts without images show a placeholder -->
<li class="thumb"><a href="<$MTEntryPermalink$>"><img src="http://example.typepad.com/noimage.gif" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>"></a></li>
</MTElse>
</MTEntryPhoto>
            </MTEntries>
        </ul>

And the CSS used to style the thumbnails:

.sidebar-thumbnails {
margin: 0;
padding: 0;
list-style: none;
}

.thumb img {
margin: 0 5px 5px 0;
border: 1px solid #000;
float: left;
}

You can, of course, use CSS to style the images however you wish. The thumbnail size is determined by the <$MTEntryPhotoURL spec="115si"$> tag. In this case, the thumbnail is 115 pixels wide and 115 pixels in height. There are eight different thumbnail sizes available so you should be able to find one that fits your blog's design.

Weekend Project: Style Your Mobile Blog with Advanced Templates

July 01, 2011

This Weekend Project is for those of you with Advanced Templates, a Pro-Unlimited feature that lets you edit the HTML of your blog's design and layout. You'll need to already utilize Advanced Templates for your blog's design, or be comfortable coding with HTML and CSS in order to successfully create a new design using the Advanced Templates feature.

The Project for this weekend is on styling your mobile blog, by simply using one or two new custom template modules:

  • head-common-extra-mobile
  • footer-extra-mobile

The first module listed above is the key for being able to customize your blog's mobile design. When created, it is automatically inserted into the HEAD of the mobile template. Due to its position within the source code of the mobile design, you can use it to insert CSS to style only the mobile view.

The second module listed above allows you to add additional content below the footer of your blog's mobile design. When created, it is automatically inserted into the mobile template, above the closing BODY tag (e.g. </body>). This module is ideal for adding a link to the full version of your blog, if you so choose.

Continue reading "Weekend Project: Style Your Mobile Blog with Advanced Templates" »

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.