Typepad Master Class: Styling TypeLists

April 02, 2014

Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Pro Unlimited account is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.

Features like TypeLists allow you to showcase a wide variety of content in your sidebar for readers to enjoy. Gone are the days when all TypeLists shared the same style, making custom styles complicated. Today, custom IDs are generated based on the title given to the TypeList, making styling a (relative) snap. Pretty genius, right?

With the unique identifier, you can use CSS to style each TypeList, and nearly all modules, using their custom ID or Class selector. It's easy to get started, easy to implement, and the only real difficulty you may face is coming up with the CSS for the styles you want.

Here are a couple of simple style options to get you started. Once you're comfortable with them, you can root around in your favorite design inspirations for ideas, use our tips and tricks articles in the Archives or in the Knowledge Base for CSS you can use, and so on. If there's anything you can't work out, just open a ticket at Help > New Ticket and we'll get you sorted.

Simple Header Changes

Font and Background Color

Style TypeList HeaderIn this example, we've changed the background color, font color, and font style, of a Links TypeList called "& You May Enjoy..." It originally looked like the two modules above it, but we really want to make this list pop to show them as featured items on the blog.

To make this change, we first had to locate the ID of the TypeList. As we mentioned earlier, every TypeList will have a custom ID assigned to it based on its title. To find exactly what the ID is, we simply use our browser to view the source of the blog (this is typically at View > Source or Page Source). Use your find command (Command+F or Alt+F) and search for the title of the Typelist. When we did this for the above TypeList in our example, our result looked like this:

image from content.screencast.com
We highlighted the ID so it's easier for you to take note of. Yours will look similar, except it will use your TypeList title (e.g. A TypeList called "Bloggers Unite" will appear as "bloggers_unite" or similar).

With this information in hand, we then scooted over to Design > Custom CSS and typed the following:

#_you_may_enjoy .module-header {
    color: #D9826E;
    background: #E5E5E5;
    font-style: italic;
    }

The above CSS indicates that we want to select the TypeList we found the ID for, then target specifically the header area, not its content. We then set a font and background color to match the style of the post titles. We also made sure to set the font style to italic so it stood out a bit more but kept with the style of the blog design. When doing something similar, you can choose your own font and background colors, not use a font style, add a border, background image--whatever you choose.

Simple Border Change

Continuing with the simple changes, but wanting to make the TypeList fit the design of the theme we've set, this next example mimics the navigation bar by implementing borders.

Simple Border Change

Back at Design > Custom CSS, we added the following:

#_you_may_enjoy .module-header {
    border-top: solid 5px #6B6662;
    border-bottom: solid 1px #C6C1BD;
    padding-top: 9px;
    padding-bottom: 9px;
    }

We again focused on the header of the TypeList, using the custom ID and Class selector to pinpoint where the style changes should be reflected. With a thick top border, a thinner bottom border, and some padding above and below the header title to make things vertically centered to match the navigation bar, we've got a slick, perhaps more subtle emphasis on the TypeList we want to feature.

Come up with a design boost for your sidebar content, then repeat the steps to locate the unique identifier for your TypeList, and work out the CSS you'll need to get to look the way you want. You can do quite a lot with a little inspiration, ambition enough to push your design to that next step, and some CSS. Don't try to make it more complex than it has to be, but if you find yourself in over your head, don't hesitate to reach out to us.

Back to Basics: More Advanced HTML

March 26, 2014

Back to Basics HTML

Welcome to our special series on getting to know HTML! Every other week, we've debuted a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series: part 1, part 2, part 3, and part 4.

We have covered some of the basics of HTML over the last few weeks, but there are many, many more HTML tags. Here's a quick introduction to some more advanced HTML elements and how you would use them:

Anchor tags are added within the content of a webpage to allow readers to jump to various sections of the post. We use this element often in the Knowledge Base as you can see by visiting this article and clicking a link in the list. Additionally, we have a great tutorial on Anchor Tags in the Knowledge Base.

Script tags are seen in widgets and ads and other dynamic elements added with HTML. For example, if you were to configure the Twitter Timeline widget, you would be provided with a block of HTML including script tags that you can copy and paste into the custom sidebar module. You likely won't need to write your code which includes script tags, but you may see it frequently when adding third-party content to your blog.

Embed tags are commonly used to embed audio and video players. Example: <embed src="http://example.typepad.com/weblog/files/video.mov" height="315px" width="460px" autostart="0"></embed>

Iframe tags are also used to embed content, and if you embed YouTube videos, for example, the share code uses iframe tags. Example: <iframe width="560" height="315" src="http://www.youtube.com/watch?v=N1FNL_iIp5c" frameborder="0" allowfullscreen></iframe>

In our next special series of posts, we will be discussing the basics of CSS to make changes to design elements. CSS uses HTML tags to group together a section of content which can then be formatted using CSS, so it's helpful to understand div and span tags and their associated attributes.

Div (short for division) tags are used to group a large block of content. The content surrounded by div tags is block-line which applies paragraph like formatting with a line break above and below the content.

Span tags are used for small blocks of content typically within a larger paragraph. The content surrounded by span tags is in-line, or inside a paragraph.

The attributes for span and div tags are id and class.

The id attribute is used to identify one element.

The class attribute can be used to classify multiple elements.

Like all HTML tags, it is important to make sure to open and close all div and span tags. An open div tag can cause major display issues on your blog, so make sure every <div> has a corresponding </div>.

Here's an example of how you would use div and span tags:

<div class="author-quote">
<p>To read well, that is, to read true books in a true spirit, is a noble exercise, and one that will task the reader more than any exercise which the customs of the day esteem. <span id="author">Henry David Thoreau in <em>Walden</em></span></p>
</div>

In the next series on the basics of CSS, we'll explain how to then use CSS to make formatting changes to the elements in the div and span containers.

We have certainly not provided a complete list of HTML tags in this series, and we've only touched on some of the tags. A wealth of information is available online, and you'll also find HTML generators that will guide through the process of getting the proper HTML without the need to hand code it. Let us know if there is some HTML you want to learn about in the comments, and we'll write up additional tutorials.

Back to Basics: Understanding and Using Tables

March 12, 2014

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

So far in our HTML series, we've covered the basics, HTML for images, and lists and headers. Today, we're going to learn how tables work and how to use them in blog posts.

It's likely that you've used a table in a spreadsheet or other document - they're great for laying out information in an easy-to-read format. The HTML for tables can be a little tricky to grasp, though. So let's break it down into bite sized pieces.

Let's start with a very basic table, like this:

Name Age Location
Bob 25 California
Lisa 35 New York

First, we'll use a table and a tbody tag to get the table started:

<table>
<tbody>
....
</tbody>
</table>

All of the table elements will go within those tags.

Continue reading "Back to Basics: Understanding and Using Tables" »

Back To Basics: Lists and Headers

February 27, 2014

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

Over the last few weeks, we've been showing you some of the building blocks of HTML.  Today, we're going to look into lists and headers.

Lists can be used for all kinds of things - what books you're reading; your favorite movies; where you want to go on vacation.  It's a great way to make information pop and be easily readable at the same time. You can use either an ordered or an unordered list.

Ordered lists are exactly what they sound like - they're ordered by number.  This is great if there are steps you want to lay out for your readers, songs you want to rank from best to worst, etc.

Ordered lists begin with the <ol> tag.  Then each item within the list starts with a list item tag - <li> - then the item and a closing list item tag - </li>.  Once you've entered all of your items, you end with a closing </ol> tag. Here's an example of my favorite movies, ranked in order:

<ol>
<li>Singin' in the Rain</li>
<li>Jaws</li>
<li>Sense and Sensibility</li>
<li>The Blues Brothers</li>
</ol>

And this is what it would look like when rendered on your blog:

  1. Singin' in the Rain
  2. Jaws
  3. Sense and Sensibility
  4. The Blues Brothers

Unordered lists are exactly the same except they use the <ul> tags instead of the <ol> tags.  Here's an example of how an unordered list of some of the recent movies I've seen looks:

<ul>
<li>My Neighbor Totoro</li>
<li>Nebraska</li>
<li>Big Bad Wolves</li>
<li>Scott Pilgrim vs. the World</li>
</ul>

And this is how it looks when rendered on your blog:

  • My Neighbor Totoro
  • Nebraska
  • Bg Bad Wolves
  • Scott Pilgrim vs. the World

Now let's talk about header tags.

While some people use header tags to make text bold or to stand out, this isn't actually how they should be used.  Header tags should not be used for style purposes but rather to help search engines index the structure and content of your blog.  The headers use the <h1> through <h6> tags.

Typepad uses the first three of these - <h1> though <h3> in its structure.  Let's see where each one is used.

The <h1> tag is used in the banner header for your blog's name.  Your blog's name is the first and most import structural element.  It looks like this when you view your blog's source code:

<h1 id="banner-header"><a href="http://everything.typepad.com/" accesskey="1">Everything Typepad</a></h1>

The <h2> tag is used in three separate locations within your blog's structure.  These are for the blog's description, the date headers on your posts, and the sidebar headers for Typelists, modules like Recent Comments, search, and more.

Here's some examples of the <h2> tag in use:

<h2 id="banner-description">This is my blog's description.</h2>

<h2>Recent Comments</h2>

<h2>02/05/2014</h2>

Finally, there's the <h3> tag that's used for your post titles. Here's a typical example:

<h3><a href="http://kymberlie6.typepad.com/comment_testing/2011/11/blockquote-with-centered-block-image-and-text.html">Blockquote with Centered Block Image and Text</a></h3>

As you can see, while header tags are used in various ways on your blog, all these tags follow the same structure as every other HTML tag.  If there's an opening tag - like <h1> - you must have the corresponding closing tag - </h1> - to complete the tag.

You can read more about header tags and how to use them for SEO purposes here.

We hope you found this useful!  HTML is an exciting language and we're happy to help you learn more about it.

Back To Basics: HTML for your Images

February 13, 2014

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out part 1 in the series.

We're back with another installment of "Getting To Know HTML" and today we're going to talk about how to use HTML when adding images to your blog post.  Images are what grabs readers' attention before reading a word so let's make a good first impression and give them a reason to stick around.  

Coffee Mug Image

To follow up our previous HTML post, we are sticking with the Edit HTML tab on the Compose page.   You can still use the Insert Image button while using the HTML tab. The above image was inserted and styled using HTML only (no Aviary or Insert button involved).  We'll break down and explain the components used to create this image's appearance.

The image tag always begins with "img" and followed by an attribute tag to identify the image source ("src" ) and enhancing your images by adjusting the size, adding borders, and descriptions. So we start with our image HTML and we'll build from there:

<img src="http://mperezsay.typepad.com/coffeemug.png">

The original size of this photo is 639 × 638 px was but made smaller by adjusting the  "width" and "height" attribute to width="300" and height="290".

You can also enlarge your picture but it's not recommended as it may distort the quality of the image so remember, it's better to downscale a large image than enlarge a small one. 

To give it a thick solid black border around your image,  you can pull this off by including a style parameters to your code including Width, Style, and Color like so:  style="border: 10px solid black;"

If you hover your mouse over the above image, you should see a little pop-up text that says "Good Morning Typepad!"  This is added by including the Title attribute simply as: title="Good Morning Typepad".   In addition to this, you can add alternative text to your image file so if someone's browser is a little slow to load images, instead of reading "coffeemug.png" in the box, it says "Coffee Mug Image" using the "alt" attribute.

You may notice the placement of the image and spacing around it.  If you don't want to mess around with the <p> tags and don't want to use the Align Center button, you can adjust the spacing by adding hspace for horizontal spacing and vspace for vertical spacing.

So let's put this all together and see the HTML for the image above:

<p><img style="border: 10px solid black;" title="Good Morning Typepad!" src="http://mperezsay.typepad.com/coffeemug.png" alt="Coffee Mug Image" width="300" height="290" hspace="150" vspace="40" /></p>

Like text links, images can be linked to another website. To link an image, you start the HTML the same as a text link which we learned about previously, only this time we're connecting it with the image HTML as shown in this example from our Knowledge Base:

Screen Shot 2014-01-25 at 3.35.27 PM

 

Adding a link to our Coffee Cup image will look like this: 

<a href="http://www.typepad.com" target="_blank"><img style="border: 10px solid black;" title="Good Morning Typepad!" src="http://mperezsay.typepad.com/coffeemug.png" alt="Coffee Mug Image" width="300" height="290" hspace="150" vspace="40" /></a>

You can also try these codes out in your Sidebar if you want to skip using our Sidebar Image Uploader and go strictly with the Embed Your Own  HTML module under Design > Content and insert your image HTML there.

Play around with your image HTML coding skills in your test blog or a saved draft posts and see how much you can do on your own!

Typepad 101: Turn your blog into a book!

February 04, 2014

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. The tip is suitable for bloggers at all levels - no special tricks or upgrades needed.

Although Typepad goes to great lengths to back up your blogs, sometimes you want the security of having a copy of your blog on your computer. You can export your blog posts, pages, and comments any time at Settings > Import/Export. The export is in a format that is easy to import to a new blog, but maybe you want a copy of your blog that mirrors your blog's design and includes all your photos.

BooksIf you want a hard copy of your blog to share with your friends and family who don't get their news online, or if you like the idea of having your blog on your bookshelves to flip through any time, you can do that! There are blog to book tools you can use to turn your Typepad blog into a beautiful book filled with your photos and writings.

A couple services we recommend to turn your blog into a book are Blurb and blog2print. Ask about the discounts they offer for Typepad bloggers! By using one of these services, you can design your book featuring all or some of your posts and photos in a soft- or hard-cover book, and the book (or books!) will be delivered to you.

If you simply want a backup copy of all images and other files uploaded to your Typepad account, just let us know! We're happy to do an export of files for you. Just open a help ticket at Help > New Ticket with your request and give us a couple days to complete the export.

Back To Basics: Getting to Know HTML

January 30, 2014

Back_to_basics_header

Welcome to our special series on getting to know HTML! Every other week, we'll debut a new article full of valuable tips and tricks that will start you on the path to being an HTML pro. We'll cover everything from the very basics, to tricks with images and headers, to advanced HTML. Miss anything? Check out the other posts in our series here.

As a blogger, you're probably acquainted with the concept of HTML, even if you don't use it on a daily basis. To put it as simply as possible, HTML is code written into a kind of text document used by browsers like Firefox, Chrome, and Internet Explorer to present text and graphics, arranging them into a format befitting a blog or website.

Understanding HTML can be really helpful if you'd like to have a bit more control over your content or compose your posts and pages in a plain text environment (our Edit HTML option in the Compose Editor), allowing you to manually add paragraphs, create links, and all sorts of other things. It's like learning a language that will help you feel more comfortable and fit right into the blogging world!

Getting Started

Since we're looking at HTML in terms of blogging, and Typepad has neatly arranged all the behind the scenes basics for you, we won't be going over the "bones" of what makes up a web page today. You can learn more about that sort of thing here, though - helpful stuff if you decide to get into using Typepad's Advanced Templates later on. Today we'll focus on things you can do within Typepad's Edit HTML tab in the Compose area, like creating paragraphs and adding links.

To practice your HTML, you can either use Typepad's Compose Editor (we recommend switching to Draft mode so you don't accidentally post any unwanted content to your blog) or use a text editor, like Notepad (typically included in your PC's operating system) or TextEdit (typically included in your Mac's Operating System).

HTML is made up of tags and content. The tags surround the content and give it meaning. When you look at Typepad's Compose Editor in Rich Text mode, you see your text and images the way you can expect to see them on your blog, which is called WYSIWYG, or What You See Is What You Get:

Richtext

You're not seeing the HTML that makes up your content, because the magic happens behind the scenes with Rich Text. Switch over to the Edit HTML tab, though, and it's a bit like taking a peek behind the wizard's curtain:

Edit_html

There you can see the code for a link (outlined in red), and the code for the image (we'll get to that in another post!), along with the opening and closing paragraph tags (<p> and </p>). While working in Typepad's Rich Text tab is super easy, and appropriate for most situations, there are times when using the Edit HTML tab is the way forward, so knowing how to create paragraphs and add links will put you on your way to being an HTML pro.

Continue reading "Back To Basics: Getting to Know HTML" »

Typepad 101: Change the date and time of posts

January 02, 2014

Welcome to Typepad 101! Whether you want to add some new features to your blog's design, or simply make your blog more functional, Typepad 101 has you covered. The tip is suitable for bloggers at all levels - no special tricks or upgrades needed.

Posts published to your blog are ordered by date, and you can change the date of any post to change the order of posts. Marilyn talked about her favorite feature of scheduling posts to publish in the future, and you can use the same feature to:

  • Reorder posts,
  • Use a unique ordering scheme,
  • Publish previous posts anew, and
  • Backdate posts.

To change the date &/or time of a post, go to the Edit Post page and select Publish On from Status menu. This will open the calendar pop-up where you can change publish date and time. Click OK.

Publish On

If you are setting the post to publish now or in the past, make sure Publish is selected from Status menu and click the Publish button. If you are setting the post to publish anew in the future, make sure Publish On is selected from the Status menu and click Publish or Schedule. Learn more.

If you want to add content to your blog that is not ordered by date, you may want to consider using pages. Pages are static and great to be used for more traditional website pages. e.g. biography, contact, shop

Are there other ways you use the Publish On… function? Share it with us in the comments!

Favorite Features: Custom CSS

December 26, 2013

Favorite Features
Welcome to our special series on our favorite Typepad features! Every other week, we'll debut a new article full of valuable tips and tricks for the Typepad team's top feature picks. Each feature is already built-in and available right at your fingertips, ready to help you get the most out of your blogging experience. Miss anything? Check out the other posts in our series here. This week's favorite feature post is from Colleen, who has been part of the Typepad team for over 8 years.

You might notice that we talk about Custom CSS a lot around here. Why? Because it's an awesome feature that allows you to customize your blog's design, no matter what level of expertise you have with coding. Absolute beginners can just copy code, plop it into their design and go on with their day. Or if you're a CSS expert, you can build a whole theme from scratch. You might be surprised how fun it is to see how the code you use translates to the actual blog. It can be really gratifying!

I love Custom CSS because it allows me to change a blog's style without touching the HTML or template tags. I work with a lot of subscribers on creating custom designs for their blogs and I recommend using Custom CSS for most situations. It allows for a great deal of flexibility without losing access to the other design features, like the Content page. If you've been curious about Advanced Templates because you want more flexibility but you're a little intimidated by all the code, then Custom CSS might be the best solution for you.

Three Little Birdies uses the Clean theme and Custom CSS to create a totally unique design
Three Little Birdies uses the Clean theme and Custom CSS to create a totally unique design

Even if you don't want to make a ton of changes to your blog, you can still use Custom CSS to make little customizations to perk things up. Don't like the font your theme uses? Try out a new one. Want to add a snazzy background image to your blog? You can do that, too. You can tweak your banner, style the navigation bar, or even use custom widths for your blog's columns

Are you using Custom CSS on your blog? Tell us it about it in the comments for this post. We love to see our favorite features in action!

Favorite Feature: Scheduled Blog Post

December 17, 2013

Favorite_features_header

Welcome to our special series on our favorite Typepad features! Every other week, we'll debut a new article full of valuable tips and tricks for the Typepad team's top feature picks. Each feature is already built-in and available right at your fingertips, ready to help you get the most out of your blogging experience. Miss anything? Check out the other posts in our series here. This week's favorite feature post is from Marilyn who has blogged with Typepad at Pulp Sushi since 2006 and recently started working with the Typepad support team.

As bloggers with busy schedules, we don't want to let our time get away from us and forget to update our blog.  Typepad's schedule post feature has been a life saver and my favorite feature when working on my own blog. 

Publishon

So if you're full of blog posts ideas but unsure of when you can write it all out, scheduling your posts is the way to go.  My schedule doesn't allow me to write a blog post every day but I still would like to have fresh content to be published daily. This is very easy to do from the Compose page under Status, select Publish On and choose your date and time for publishing.

Screen Shot 2013-12-03 at 8.15.55 PM

If you have a regular feature on your blog that's published monthly or weekly like "Friday Pinterest Picks", why not schedule the entire month in advance?  I like to schedule my blog posts on the weekends for the week ahead.  I use my Google Calendar to map out the month.

Marilyn's Blog Calendar
Here's what my Blog Planner looks like

Having a Blog Planner (many you can find online to download for free) can help make your scheduling even easier.  Here's one you can download and print from Typepad blogger Vale Design.

This could be a helpful tool if you're new to blogging too!  Regularly scheduled blog posts brings structure to your planning, helps build readership, and encourages visitors to come back.

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.