Getting to Know CSS: Typepad-specific CSS

May 07, 2014

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!

Getting To Know CSS: Writing Your Own CSS Code

May 01, 2014

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!

Getting To Know CSS: Getting Started

April 09, 2014

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!

Now that we're all HTML experts (thanks to our Back To Basics To HTML series), it's time to move ahead and learn how to apply CSS to what we have built on our blogs.   Today we'll be going over what CSS is, and how and when to use it.

What is CSS?

CSS stands for Cascading Style Sheets and is used to style the markup language you've created on your site.  CSS gives you more control and flexibility over your layout than what HTML can offer.  HTML provides the foundation and content where CSS will enhance the presentation of the HTML.  It is best to not mix CSS with HTML together which is why a stylesheet is saved separately.

Where can I add CSS on my blog?

On Typepad for Unlimited users and higher, we've made it easy to add custom CSS to your layout by going to Design > Custom CSS, there is no need to set up Advanced Templates.   Some examples of element changes you can make are fonts, colors, column widths, background images, advanced positions and more.

Screen Shot 2014-04-04 at 1.14.11 PM

CSS minimizes the amount of coding needed for your site which will save on loading time.  For instance, if you have H2 sized headers throughout your blog but you wish to have them appear as bold, with HTML you will have to insert the bold HTML code <b></b> on every header which can be time consuming and clunky code-wise. With CSS, you can just set up all header elements to appear as bold at once.

How is CSS formatted?

The written format for CSS code is broken into two areas: the selector, which can be an Element, Class or ID; and then the property and property value. The selector and property info is grouped together within a curly brackets set.  

An Element selector specifies HTML tags (e.g. p, img, a), which can be as general as applying to all instances of the tag selected, or can be a child of a specific class or ID

p { property: value; }
.entry-body p { property: value; }

A Class is denoted by a period prefixed to the selector name. Classes are used for items that often appear in multiples (e.g. modules, list items, posts).

CSS classes are coded as: .element { property: value; }

IDs are used for when you want to specify one section of your layout (e.g. banner, navigation bar) and are denoted by prefixing the selector name with a hash or "#": #element { property: value; }

When can I use CSS?

CSS comes into play when you want to change or tweak your design and format.  It is not used to add additional content like advertisements and third-party widgets.

Need CSS? Yes No
Position your Navigation Links or Banner? X  
Inserting Javascript?   X
Changing the size of your columns? X  
Change the font of your blog post titles? X  
Add an image as your background? X  
Hide post footer links like tags, comments, permalink? X  
Add to a blog post or comment?    X
Change default post font? X  
Add banner to pre-defined theme? X  
Add buttons, badges, widgets?    X

Ready to level up? You're in luck! Over the course of our Getting to Know CSS series, we will be going over other features and functions of CSS, teaching you about editing and adding elements to your stylesheets, and finding which classes will work best with your specific Typepad theme. Stay tuned!

Tips for Customizing the New Responsive Snap Theme

April 04, 2014

We recently released a brand new theme to beta subscribers called Snap. The main feature that makes this theme special is that it's responsive. Check out our announcement post for more details about the theme and how to use it on your blog.

Snap

If you like the way the theme works but want to make it a little more yours, we're here to help with that, too. There are some easy changes you can make using CSS that will allow you to use your own colors, fonts and banner images. We'll be going into some of those ideas in this post. Please note that we're using the Custom CSS feature, which is available at the Unlimited level and above.

Custom Colors

We got a little carried away with flavors for the Snap theme and created a dozen to choose from. But it's possible that none of those colors suit your blog. Let's rectify that with some super easy code, like this:

h1 a,
.entry-header a,
.entry-header,
.module-header a,
.module-header,
.entry-body a,
.module-content a:hover,
.module-calendar a { color: #D60077 !important; }

.navbar { background: #D60077; }

.navbar a { color: #fff !important; }

That's the default code to make the banner text, post headers, sidebar headers, links and navigation bar pink. Just switch out the HTML color code with your own and you're done. You can pull out specific classes if you want to use different colors in specific areas.

Custom Fonts

We kept the fonts for this theme very simple so they'd be easy to customize with your own. Here's the default code:

body { font-family: Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6, .module-email  { font-family: Georgia, Times New Roman, serif; }

That makes body text Helvetica/Arial and headers Georgia/Times New Roman. Just switch out the font names with your favorite web safe font for an easy update. Or you can use a web font from a service like Google Web Fonts for even more customization options.

Custom Image Banner

This is the one we've heard the most requests for and we wanted to get the code just right. Due to the nature of responsive design, there isn't a one-size-fits-all solution for this but we'll make it as straight forward as possible.

Continue reading "Tips for Customizing the New Responsive Snap Theme" »

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.

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.