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.

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!

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.