Posts categorized "Weekend Projects" Feed

Weekend Project: Featuring Images with a One-Column Layout

This Weekend Project is perfect for anyone who wants to display images in a gallery-like format, where the images are wide and don't have to contend with other design elements.

In the example below we've made use of the One-Column Layout, combining it with the Theme Builder and Custom CSS. You can setup something similar with only the Theme Builder.

One-col-layout-gallery

Remember that images, by default, will be restricted to 30px less than the width of the column. Keep in mind that the current max-width of the Theme Builder post column is 500px. The widest an image can be, without using CSS to increase the column width, is 470px.

Knowing that, and knowing we wanted to display much larger images, we setup a custom column width for our One-Column Layout by using the following CSS:

#container { width: 900px !important; }
#alpha { width: 900px !important; }

This means our images can be shown at a max-width of 870px!

We also chose the following Content settings at Design & Content to limit the design elements:

  • no date-header
  • no navigation bar
  • no module content
  • minimal post footer content (we kept it to just the permalink, comments link, and a few buttons)
  • no blog footer

You can choose your own preferred settings for what appears in the blog, but we really love the simple design that doesn't distract from the image.


Weekend Project: Setting up Shop

Yesterday, we announced that we're looking for independent retailers to list in the TypePad Shop. We will launch the shop just before Thanksgiving so if you want to be included before the holiday rush, be sure to submit your shop soon.

You don't have a shop? No worries! You have a whole slew of options for places to sell your goods online. Whatever it is that you want to sell, there's likely a great place to sell it.

For the crafters and artists, there's Etsy, an extremely popular (and very enticing to the shopaholics) marketplace where artists sell everything from handmade fashion to woodworking. Etsy makes it super easy to get started with their site - you can read the basics here.

Once you have your Etsy shop set up and ready for business, you'll want to make it easy for your readers and followers to find. You have two options: a widget in your sidebar with images and links for your items or you can embed your shop in a Page as part of your blog. We have a full overview with instructions for both methods in our Knowledge Base.

Another great place for artists is bigcartel. You can create your own custom marketplace with their easy to use interface and take orders and payments directly from the site. Your store is hosted on their site so there's nothing to install or set up. They even have a free level if you only have a few items to sell.

Bigcartel doesn't have a widget feature just yet but their shops have RSS feeds, which you can display in your blog's sidebar with the Your Feeds feature. You could also link directly to your shop in your blog's navigation bar or in a sidebar using a Links TypeList.

If you'd like to take payment a little more directly, PayPal is a good option. If you just have one or two items to sell, like ebooks or music, you can create a Page on your blog and add a PayPal payment button. We have tips for including custom code via the Compose editor here.

PayPal also offers a storefront widget, which you can display in your blog's sidebar. It's very quick to set up and allows visitors to select items directly from the widget.

Do you have a favorite way to sell stuff online? Share it in the comments! And don't forget to submit your info to the TypePad Shop!


Weekend Project: Wide Image or Ad Above Two Sidebars

For this Weekend Project we'll be tackling the task of adding a wide image above the sidebars of a three-column-right layout. This can also be used for wider widgets, large advertisements, and more. Typically, however, it's used when you have something you want to feature above the rest of your sidebar.

Adding Wide Content Spanning Above Two Sidebars

We recommend creating a test blog in your account, then selecting the three-column layout where the post column is on the left and the two sidebars are on the right. The theme you choose can be a duplicate of your existing theme, or you can add any theme of your choice; it really depends on whether you want to test the change for your existing design or a new design.

Adding Wide Content Spanning Above Two Sidebars

To get started, you'll need to go to Design > Content, then add the Embed Your Own HTML module. When you click to add the module, a pop-up box will appear, pre-filled with "Custom HTML" in the Label field, which we recommend changing to something that will remind you what the module is for. The HTML field is where you'll be placing the content you want to span across the two sidebars.

In order to create the space for your content, you'll need to first strip the default module tags that appear around the Embed Your Own HTML module content. To do that, place the following into the HTML field of the Embed Your Own HTML module:

<!-- no_wrapper -->

Immediately below that, you'll need to add the HTML to prematurely close the #beta-inner and #beta DIV tags of the first sidebar. The code for that looks like this:

 </div> <!-- prematurely close #beta-inner -->
</div> <!-- prematurely close #beta -->

If you left the HTML at that, your sidebars would be broken, but that's something that will be fixed before you click OK and save the content changes.

Next up, add the HTML for your content. If, like in our example, you are adding a centered image, the recommended HTML would be:

<div align="center">
 <img src="http://example.typepad.com/image.jpg" title="Image Title" />
</div>

Replace http://example.typepad.com/image.jpg with the URL of your own image. If you're using the space for an advertisement or widget, then paste in the HTML or script that you were provided for that item instead of our example image code.

The final step would be to add in HTML to re-open the closed sidebar by adding in the opening DIV tags. We recommend keeping the same IDs for the DIV tags, which would make the HTML you need to add:

<div id="beta"> <!-- re-open #beta -->
 <div id="beta-inner"> <!-- re-open #beta-inner -->

All of the HTML content together for our example would be:

<!-- no_wrapper -->
 </div> <!-- premature close #beta-inner -->
</div> <!-- premature close #beta column -->

<div align="center">
<img src="http://example.typepad.com/image.jpg" title="Image Title" />
</div>

<div id="beta"> <!-- re-open #beta -->
 <div id="beta-inner"> <!-- re-open #beta-inner -->

Adding Wide Content Spanning Above Two Sidebars

After adding the HTML above, click the OK button and position the module at the very top of the first sidebar. You can then click Preview to see how the spanned area looks before clicking Save Changes.

With that last step, we wrap up this Weekend Project! It can be used for a myriad of things. You can even add more than one item to the spanned area (just place it within the same area as your first image, ad, etc.). So, try it out, have some fun, and let us know how it works out for you!


Weekend Project: Grid-style Posts Layout

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

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

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

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!

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

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

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