Previous month:
April 2014
Next month:
June 2014

Posts from May 2014

Getting to Know CSS: Typepad-specific CSS

Back_to_basics_header_css

Welcome to our special series on getting to know CSS! Every other week, we'll debut a new article full of valuable tips and tricks that will help you to understand how CSS works and how to apply it to your blog. We'll cover everything from the very basics, to fancy tricks, to the best way to find the code you need for your very own blog. Get ready to advance your skill set!

We've previously introduced you to the concept of CSS and provided information on how to format general CSS elements for use with your blog. Now, we'd like to provide gudiance for using elements that are specific to your Typepad blog.

It's common for websites to use their own CSS names for features, like the banner or sidebar headers. Let's see how you can figure out those names for Typepad. Whether you're using the theme builder or one of our built-in themes, the names will be the same.

The very easiest method is to view the HTML source of the main page of the blog or a page of the blog that shows the element you'd like to customize. In most browsers, just right click on the page and choose "View page source." You'll then see a bunch of code, like the screenshot below.

Screen Shot 2014-05-06 at 1.34.04 PM

Scroll through until you find the element you want to customize, like the post title or a sidebar header. You don't need to locate each instance, just one will do. You'll then look for the "class" or "ID" name right before that element. The below example shows the post title highlighted.

Highlight

The class name for the post title is entry-header so you can add that to your Custom CSS page as:

.entry-header { }

And then add your CSS, like:

.entry-header { font-size: 200%; }

The view source method is great if you just want to customize a few things. If you want to dig even deeper or make lots of changes, we recommend letting browser add-ons do some of the work for you. One we use a lot when designing blog themes is Firebug.

It has a lot of features but one of the handiest is showing you the classes for every element on the page and allowing you to edit the code right there so you can see how it will look. The screenshot below shows that in action.

Firebug

There are other plug-ins and tools you can use. We recommend:

Every element of a Typepad blog has a corresponding CSS class or ID, making it possible to use Custom CSS to fine-tune everything on your blog. If you have a favorite tool that we haven't mentioned, or a tip for fellow Typepad users, please leave a comment below!


Announcing: Retiring the Typepad Community on Get Satisfaction

Over the years, the Typepad community on Get Satisfaction has been a great place to ask questions, get answers, and suggest features to us, but most of all, it's been a great place for you to talk with your fellow Typepad fans and help each other out.

Over time, though, participation has shifted away from the forum to social networking sites like Twitter and Facebook, and since we always want to be where the action is, the time has come to retire the Get Satisfaction community, effective May 6, 2014.

We want to let you know that your input, assistance, and participation has been an integral part of our community's success over the years. We all appreciate your work as an extended part of the Typepad team.

There are still many opportunities for you to participate in the Typepad community, from starting and contributing to conversations in the comments here on Everything Typepad, to tweeting about #Typepad and @ replying to other Typepad bloggers, to commenting on our Facebook Page.

If you ever need help with anything, you can open a Help ticket in your Dashboard, email us at support@typepad.com, or tweet to us directly @Typepad. We hope you'll continue to be an active part of the Typepad community - or become one, if you haven't been in the past!

Have questions? We want to hear from you, so let's start a discussion in the comments!


Typepad On Pinterest: This Full House

Typepad is on Pinterest!  We love pinning and repinning great content from Typepad blogs in every genre, and we're always looking for great, inspirational content. Are you on Pinterest? Drop your link in the comments, and don't forget to follow Typepad right here! If you're not on Pinterest yet, check it out - it's a great way to promote your blog and connect with others!

Want some inspiration? Check out our featured pinner, This Full House!

This Full House follows Liz and her large family all living under one roof.  Her style of writing draws you in like you're catching up with an old friend.

Screen Shot 2014-03-23 at 4.34.16 PM

FOLLOW: Pinterest | Blog 

Want to promote your pinterest account on your Typepad blog? Just go to Blogs > Content and add the Pinterest Widget to your Sidebar via the center menu. While you're there, make your blog posts "pinable" by adding the Pin It button to your post footers.

Want even more? Learn how to promote your blog on Pinterest and follow Typepad at www.pinterest.com/typepad.


Getting To Know CSS: Writing Your Own CSS Code

Back_to_basics_header_css

Welcome to our special series on getting to know CSS! Every other week, we'll debut a new article full of valuable tips and tricks that will help you to understand how CSS works and how to apply it to your blog. We'll cover everything from the very basics, to fancy tricks, to the best way to find the code you need for your very own blog. Get ready to advance your skill set!

Recently we introduced you to CSS. Within this post, we helped you learn what CSS stands for, what it can be used for, its basic structure, and more.  In this post, we're going to teach you how to write your own CSS and give you some examples for changes you can make to your own blog.

As we mentioned previously, when you write out CSS code, it's into two areas: the selector, which can be an Element, Class or ID; and then the property and property value. These are grouped together within a curly brackets set.

You may be thinking, "Well, what does this mean in plain English?" so we're going to break it down for you.  Remember, while you will need to be willing to learn a little bit of "techy" stuff to understand things like CSS, the support team is always here to help you and happy to give you a hand.

Breaking It Down

Let's take a look at a common CSS element - the p tag.  The p tag is used for the paragraphs within your posts.  This paragraph that you're reading, for instance, is created using a p tag.  Here's an example of a CSS statement:

p { font-size:10px; }

In this case, p (the paragraph tag) is the selector, font-size is the property (what you're changing about the text) and 10px is the property value (setting the font to 10 pixel).

You can also combine property values, like font-size and color.  Here's the CSS code that you would use to change the font to 10 pixel and set its color to black.  You'd use this:

p { font-size:10px; color:#000000; }

Now all parapgraph tags would be set to this size and this color.  There's no need to individually change paragraphs; you set it once and you're done!  That's the beauty of CSS.

CSS isn't just used for fonts, though.  It can change a multitude of elements on your blog.  For instance, to add a color to your blog's background, you'd use the following:

body { background:#fdd0a6; }

Again, you've got the selector (body) the property (background), and the property value (#fdd0a6).

Some of the attributes you can change are as follows:

  • margins
  • padding
  • borders
  • alignment
  • text-decoration (underlining, overlining, etc.)
  • text-transform (uppercase, lowercase, capitalize)

And many more!

Our CSS Cookbook is a great place to get ideas of even more changes you can make to your blog.  Our Tips and Tricks category also has more great CSS to try out on your blog. And don't forget - we're here to help!