Posts categorized "Weekend Projects" Feed

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


Weekend Project: Eye-Catching Sidebar Menus

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

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

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


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;
}

Screen shot 2011-06-24 at 5.12.06 PM

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;
}

Screen shot 2011-06-24 at 5.14.15 PM

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;
}

Screen shot 2011-06-24 at 5.15.20 PM

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;
}

Screen shot 2011-06-24 at 5.16.09 PM

8. Style every other blog comment

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

Screen shot 2011-06-24 at 5.16.42 PM

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;
}

Screen shot 2011-06-24 at 5.31.44 PM

10. Style the "email me" module

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

Screen shot 2011-06-24 at 5.32.15 PM

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;
}

Screen shot 2011-06-24 at 5.32.50 PM

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;
}

Screen shot 2011-06-24 at 5.33.23 PM

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;
}

Screen shot 2011-06-24 at 5.33.47 PM


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...

2011-06-17_2236

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...

2011-06-17_2246

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.


Weekend Project: Styling pagination links with Custom CSS

Time for another handy CSS tip! This time, we're styling the pagination links that direct readers to more posts from your main page, as well as category and datebased pages. The first step is making sure you have text filled in for those links in Blogs > Settings > Posts. The link text can be anything you wish - just keep in mind that you want it to be clear to the reader that there are more great posts to read if they click those links!

Continue reading "Weekend Project: Styling pagination links with Custom CSS" »


Weekend Project: Styling the Blockquote Tag

Blockquotes are used for a myriad of things--think recipes, quotations, poetry; it's something that has enough significance, or requires emphasis, to be set apart from the rest of your blog text.

Our goal with this Weekend Project is to show you a few ways in which you can style your blockquote tags to make what you emphasize stand out that much more.

This Weekend Project requires CSS, but this is a tip that all levels of TypePad bloggers can use. Note, however, that it'll be much simpler to setup (think "set it and forget it") for our Unlimited and above members. Plus users will need to manually add the CSS to the blockquote tags via the HTML tab. Don't worry, we'll give you the lowdown on how to implement the CSS in both ways. If you want the ability to only have to set it up once, though, we recommend upgrading to the Unlimited plan.

To get started, you'll need to think about your blog's design, what kind of impact you want to make with your blockquotes, and what fits your personal blogging style. Do you prefer simplicity, bold colors, lots of flourish? If we don't give you the exact example you're looking for, a quick search via your favorite search engine, and the tips we give you, will head you in the right direction.

Here are the examples we've setup for you at this time...

1) This blockquote is styled with a dark gray background, white text, and a thin, white, dashed border. It's also padded on the top, right, bottom, and left (5px, 15px, 5px, 15px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can go to Design > Custom CSS, or Design > Templates > Stylesheet if you're an Advanced Template user, and add the following CSS:

blockquote {
  background-color: #333; 
  color: #fff; 
  border: 1px dashed #fff; 
  padding: 5px 15px;
}

And that's it! Preview your changes, then, if you're happy with them, click "Save" and forget about it. You don't have to do anything else; just apply the blockquote in the editor and the CSS will do its magic to transform it using the settings you put into place.

Plus users will need to compose their post, select the text they want to offset, then click the blockquote icon (quotation mark) in the editor (note: you'll need to do this for every blockquote, manually via the HTML tab). Once that's in place, click the HTML tab and look for the <blockquote> tag. Then, add the CSS like so:

<blockquote style="background-color: #333; color: #fff; border: 1px dashed #fff; padding: 5px 15px;">

2) This blockquote is styled with a dark gray drop-shadow, and is padded on the top, right, bottom, and left (5px, 15px, 5px, 15px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote {
  padding: 5px 15px; 
  -moz-box-shadow: 3px 3px 4px #000;
  -webkit-box-shadow: 3px 3px 4px #000;
  box-shadow: 3px 3px 4px #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow
(Strength=4, Direction=135, Color='#000000')";
  filter: progid:DXImageTransform.Microsoft.Shadow
(Strength=4, Direction=135, Color='#000000');
}

Plus users will need to use:

<blockquote style="padding: 5px 15px; -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');">

3) This blockquote is simply styled with a 2px wide border in red (the hexadecimal--#c00000--can be changed to a color that suits your blog), displayed only on the left side. It also has padding on the top, right, bottom, and left (5px, 15px, 5px, 15px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote {
  border-left: 2px solid #c00000;
  padding: 5px 15px;
}

Plus users can use:

<blockquote style="border-left:2px solid #c00000;padding:5px 15px;">

4) This blockquote style is a classic, using a simple background image of a large quotation mark. There is a greater amount of padding used on the top, right, bottom, and left (25px, 15px, 5px, 75px, respectively). Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote {
  background:url(http://www.example.com/image.jpg) 
no-repeat top left;
  padding:25px 15px 5px 75px;
}

Plus users can use:

<blockquote style="background:url(http://www.example.com/image.jpg) no-repeat top left;padding:25px 15px 5px 75px;">

5) This blockquote style actually uses a couple of things we've already made use of in the above examples. The blockquote is set to only be 430px wide, is styled with a background image at the top, which is centered and dragged up -7px, and has a white background color. The perimeter of the blockquote has small gray dots on the left, right, and bottom. There's also padding set for the top, right, bottom, and left (30px, 15px, 15px, 15px, respectively), to push the text away from the inside edges of the blockquote border.

Here's what that looks like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, est sed congue sagittis, sem elit fermentum urna, ac posuere orci turpis quis nisl. Mauris et arcu libero, a hendrerit nunc. Aliquam tempor posuere libero, sit amet facilisis velit tempus a. Vivamus purus risus, cursus et venenatis nec, tempor non.

Unlimited+ users can use:

blockquote { 
  width: 430px;
  background:#fff url(http://www.example.com/image.jpg) 
no-repeat center -7px;
  overflow:visible;
  border-right:1px dotted #c0c0c0;
  border-bottom:1px dotted #c0c0c0;
  border-left:1px dotted #c0c0c0;
  padding:30px 15px 15px 15px;

Plus users can use:

<blockquote style="width:430px;background:#fff url(http://www.example.com/image.jpg) no-repeat center -7px;overflow:visible;border-right:1px dotted #c0c0c0;border-bottom:1px dotted #c0c0c0;border-left:1px dotted #c0c0c0;padding:30px 15px 15px 15px;>

Note: The last couple of examples use background images, and if that's something that interests you, you'll need to first upload that image to your File Manager. Once uploaded, click on the file name of the image you uploaded, then copy the URL out of the address bar. You'll be using that URL to replace the http://www.example.com/image.jpg example in the CSS code above.

We hope you'll find these examples useful, possibly the oomph! an occasional post or two in your blog needs. Go ahead and steal some moments this weekend to figure out what works best for your blog. Remember: you can preview your blockquote changes, make some edits and preview again, then save when you've perfected the look you're going for.