Everything Typepad

Typepad 101: Change the Background of your Blog

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. Topics covered in this series are suitable for bloggers at any skill level. If you're at a plan which doesn't include a necessary feature, you can upgrade to put these tricks to use on your blog.

The content outside of sidebars and posts/pages column (aka blog container) is the background for your blog. The blog backgrand has also been called the outside margins, sides, or simply, the empty space to the left and right. You can customize the background by changing the color or adding a background image. You can also reduce the visible background by expanding the column widths.

It's actually pretty easy to change the color of your blog's background using the Theme Builder or Custom CSS.

First, you'll want to check out all the colors you can use for your background color. There are tons of websites which list the hex codes for colors. You may want to start by checking the w3schools.com HTML Color Names chart, and you can do a search for other color code sites. Once you determine the color, grab the 6 digit hex color code.

Now, you can add apply the color code to the background of your blog.

If you are using the Theme Builder for your blog's design, go to Design > Theme Builder > General Settings, enter the color code in the Background Settings field, and click Save Changes. The Theme Builder is available with the Plus and higher plans.

With the Custom CSS feature, you can change the background color of any theme. Custom CSS is available with the Unlimited and higher plans. At Design > Custom CSS, enter the below code in the text field:

body { background: #8A2BE2 !important; }

Replace 8A2BE2 with the color code you wish to use and click Save Changes to update your blog. Similar CSS can be added to the Stylesheet Template for your blog if you are using an Advanced Template Set.

Instead of changing the background color, you can add a background image using Custom CSS. There are several variations of how to place the background image on your blog. The basic CSS is:

body { background: transparent url(http://example.typepad.com/background.jpg); }

Where you'll replace http://example.typepad.com/background.jpg with the URL for the image uploaded to your Typepad account at Library > File Manager. You can also replace transparent with a hex color code, like #FFFFF, if want to set the background color when the background image ends. Setting a color code with the background image is ideal if you have an image which fades to a solid color.

If you want the background image to repeat, add repeat-x to repeat horizontally or repeat-y to repeat vertically. For example:

body { background: url(http://example.typepad.com/background.jpg) repeat-y; }

The CSS can be added at Design > Custom CSS to update your blog. You can find more options for adding a background image in the Knowledge Base.

Depending on your preferences, you may want to simply reduce the amount of empty space to the left and right of your blog's content. You can do this by increasing the column widths with Custom CSS, and we have specific information in the article on changing the column widths.

If you want to remove the background entirely, there is the option to select a Fluid width when using the Theme Builder for your blog's design. A Fluid width for the main content column will expand and contract depending on the size of the visitor's browser window filling the entire window, and the background will not display at all. At Design > Theme Builder > Main Content Column, select Fluid for the width and click Save Changes to update your blog.

Tips for Tricky Trackbacks

Image via itinfoz.com

Trackbacks have been a feature on Typepad for more than a decade, created by our Founding Fathers to allow bloggers to keep track of who links to their posts and helping to build a growing community.

Unfortunately, spammers have abused the Trackback feature, using it to insert spam links on blogs - a phenomenon that we know many of you have experienced lately. As a result, many blogging services have stopped supporting Trackbacks entirely over the past few years, and Typepad is amongst the most recent to phase out the feature. We know you're tired of dealing with spam, and frankly, so are we.

Social networking and SEO have grown exponentially over the past several years, and today there are plenty of replacement options that offer lots of bang for your social buck without the risk of spam. Features like Facebook Like, Reblogging, and the option to add a post as a favorite are all great ways for your readers to endorse your posts. In fact, there are even more options available for sharing in the post footer - check it out.

Disabling Trackbacks

Though we're phasing out Trackbacks on a global level for all Typepad blogs, we know that many of you will want to disable Trackbacks now, and we've made that easy for you.

You'll probably want to edit your older posts, since that's where a lot of spam comes from. To do that, go to Blogs > Posts, scroll down to the bottom of the list, click the Select All box, then in the More Actions menu, choose Do Not Accept Trackbacks, and click Go. You'll need to do that for each page of posts on your list, so go to page 2 and repeat the process.

Once you've disabled Trackbacks for existing posts, you can change the default setting for new posts. At Settings > Comments, uncheck the box to accept Trackbacks on new posts and click Save Changes, and you're all set. Once you've disabled Trackbacks on your posts, the Trackbacks link in the post footer and Trackbacks heading above the comments will not display.

We're standing right next to you in the fight against spammers, so we hope you'll take this opportunity to talk to us about it in the comments! Let us know what you think - we're all ears.

Featured Blog: Butter

NAME: Jan Livingston Mokhtari
BLOG: Butter
TYPEPAD MEMBER SINCE: 2010
WHY YOU'LL LOVE IT: Jan is a wife, mom, and artist who loves making things: oil paintings, finger paintings, Crème Brule French Toast, TV spots, TV shows, and just about anything else she sets her mind to. She believes every “thing” starts with an inspiration and Butter Blog is her place to share those bright beginnings with her readers. Come discover some “things” of your own!

FOLLOW: Twitter | Typepad

Typepad 101: Adding Text to Your Sidebar

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.

Your blog has so much information that you want to get out to your readers.  Maybe you're a business that wants to make sure its hours are prominently featured so that your patrons know when to come by.  Maybe you're going out of town and want your readers to know there's a reason that you're not responding to posts or comments.

You can use the featured post option to add a post that stays at the top of your blog, but if your visitors are on another page like your archives, they won't see it.

To get around this, you can easily add text to your blog's sidebar.  Since the sidebar is the same throughout the blog, your readers will always see it.  With our "Embed your HTML" widget, this is as easy as pie for the majority of our designs.

All you need to do is go to Blogs > Design > Content. Select Widgets, then the "Embed your HTML" option, and click the "Add this module" button.  You would then enter your text into the new pop-up window and click "OK" to close the pop-up box.  You can rearrange the content into your preferred order, and then save your changes.

If you're using a Mixed Media layout, you'll need to use a Notes TypeList. With the Chroma or TweetPad Themes, use the Custom Sidebar option on the Design tab.  With Advanced Templates, you'll need to add the code directly to the template or use a TypeList.

We have more information on this in the Knowledge Base.

Spotlight: A Healthy New Year

Each week, we scout for great posts in the Typepad Showcase that fit a particular theme and are guaranteed to inspire. This week, we're rounding up some of the best of Typepad's healthy living bloggers and their tips for a healthy new year! Click over and visit, stay awhile, and get your health on.

Ready? Let's go!

The Healthy Schools Campaign discusses how high school culinary students can benefit from chef mentors:

Mindful Mama highlights eco friendly nurseries and dishes on detox diets:

Think Green looks at how to go green at the office:

And Dr. Ayala serves up some serious knowledge on the power of veggies:

We hope you enjoyed this week's roundup of fantastic Typepad blogs! Check out more great health and eco blogs right here. We'd love to see your blog in the Typepad Showcase, so go ahead and submit it today - you might just see yourself in the spotlight!

Featured Blog: Hopeful Leigh

NAME: Leigh Kramer
BLOG: Hopeful Leigh
TYPEPAD MEMBER SINCE: 2010
WHY YOU'LL LOVE IT: Leigh Kramer is a Yankee Social Worker turned Southern Dream-Chaser, writing her way through the in-between, and reveling in the now. Engaging and inspiring, her blog focuses on living with intention, and explores faith, grief, growth, singlehood, and everyday life.

FOLLOW: Typepad | Twitter

Typepad Master Class: Styling the Featured Post

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.

There are a variety of ways to style the Featured post, just as there are a variety of ways to make use of the Featured post itself. In today's Master Class, we will be covering a couple of basic steps you can take to make the Featured post pop, as well as a specific example of really making it stand apart from all other posts.

You'll need to have access to the CSS, either via Advanced Templates or the Custom CSS tool, in order to achieve the looks discussed below. We also recommend using a test blog to try out these ideas before applying any changes to your real blog.

Here are a couple of basic changes you can make to the Featured post:

• change the post title color
• add a shadow around the post
• add a background color to the post

Changing the Post Title Color

Changing the color of the title is as simple as calling the entry-header class and a (link) tag for the post title and assigning a hexadecimal value to it:

/* Assign color to linked post title of Featured post */
div.entry-featured .entry-header a { color: #c00000; }

Add a Shadow Around the Post

To add a shadow, you would apply a specific element to the post by calling to the entry-featured class:

/* Add shadow around Featured post */
div.entry-featured { box-shadow: 0 1px 7px hsla(0,0%,0%,.3); }

Add a Background Color to the Post

To add a background color, you would assign a hexadecimal value to the post via the entry-featured class:

/* Add background color to Featured post */
div.entry-featured { backround: #cccccc; }

Those are some of the basic changes you can make, and you can test each of them out by adding them to Design > Custom CSS. Make sure you've set a post to be featured, first, or you won't see it in action.

To really give the Featured post some styles to make it stand out, like our example below, we can combine some of the CSS offered above, along with some advanced CSS.

Give your Featured post a style boost with some advanced CSS

The above example makes use of the following items:

• a custom background color
• a shadow around the post
• changing the link colors of the featured post
• adding a custom image and rotating it to appear in the top right and top left corners

Here's the CSS we used to create that look:

/* Change link color to Featured post */
div.entry-featured a { color: #9B7F51; }

/* Set background color and shadow to Featured post */
/* Note: May need to adjust padding and margins for your blog's theme */
div.entry-featured {
        position: relative;
        background-color: #F4F1EB;
        box-shadow: 0 1px 7px hsla(0,0%,0%,.3);
        padding: 30px;
        margin: 0 auto 80px;
    }
   
    /* Create an element before and after the Featured Post */
    /* Add a custom background and other styles */
    .entry-featured:before, .entry-featured:after {
        background: transparent url(http://everything.typepad.com/images/tape.png)
                    repeat center;
        content: '';
        height: 40px;
        position: absolute;
        top: -10px;
        width: 100px;
        z-index: 10;
        box-shadow: 0 10px 9px -8px hsla(0,0%,0%,.75);
    }

    /* Position and rotate the element before (appears top left) the Featured Post */
    .entry-featured:before {
        left: -40px;
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

    /* Position and rotate the element after (appers top right) the Featured Post */
    .entry-featured:after {
        right: -40px;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
    }

Please read the notes with each of the items to help you understand what each section is meant to do. After that, you can add the above code to your Custom CSS (or stylesheet if you're using Advanced Templates) to see it all in action.

If you want to use your own image, in place of the old masking-tape like image we use and provide, then you would upload it to your File Manager, copy its URL and replace our background URL with the one you copied.

Let us know what you think of this Master class by sharing your thoughts in your community forum! We'd love to see your own take on this as well, so make sure to share what you've tried or improved upon.

Spotlight: Golden Globes Recaps You'll Love

Each week, we scout for great posts in the Typepad Showcase that fit a particular theme and are guaranteed to inspire. This week, we're rounding up some of the best of Typepad's pop culture and fashion bloggers as they recap the Golden Globes! Click over and visit, stay awhile, and soak up the atmosphere in these great Typepad blogs.

Let's roll out the red carpet!

Esther Kustanowitz keeps it short, sweet, and snappy with a Twitter recap at Urban Kvetch:

Me In Melange and From Hello to Hitched highlight some of the evening's best fashion moments:

And designer Chris Olson sketches her own unique recap over at Momathon:

We hope you enjoyed this week's roundup of fantastic Typepad blogs! Check out more great fashionistas right here. Interested in joining the Typepad Showcase? Submit your blog today - you might just see yourself in the spotlight!

Featured Blog: Lara Kimmerer, Photographer

NAME: Lara Kimmerer
BLOG: Lara Kimmerer | Photographer
TYPEPAD MEMBER SINCE: 2008
WHY YOU'LL LOVE IT: Award-winning photographer Lara Kimmerer specializes in capturing the big (and small) moments in peoples' lives, most often shooting weddings and engagements. Her photography is at once classic, modern, and absolutely stunning. Her inspiring blog features highlights from her recent work, and stories from her own life.

FOLLOW: Typepad | Twitter

From SAY Daily: Forget Mobile First, 2013 Is the Year of Tablet First

It’s the greatest canvas for media ever invented. It’s colorful, tactile, powerful, and programmable.

Robin Sloan, Author and Media Inventor

Plenty of people have said it before, but this time it’s official - 2013 really is the year of the tablet. And if you’re in the content business (meaning you’re a publisher or marketer), this is the year you need to be thinking tablet first.

The newest numbers for tablets tell the story: Apple has sold over 100 million iPads to date. Amazon, Google, Microsoft, Samsung and others have competitive tablet products in market and tablet traffic grew 300 percent in 2012. In fact, tablets will surpass smartphone traffic in early 2013, and will account for 10 percent of all Web traffic in 2014. And this percentage is higher for content-specific traffic (i.e. reading, watching and engaging). Despite the fact that only 23 percent of companies design their sites specifically for a tablet and only 33 percent test their sites on tablets, consumers are taking to tablets like fish to water. These numbers alone should spark CEOs and CMOs to get their teams thinking tablet first when designing new products and marketing campaigns.

As impressive as the numbers are, the real thing driving this growth is design: tablets can deliver wonderful content experiences. The Web has changed the world in thousands of ways, but print has remained one of the best ways to get truly wonderful editorial experiences - thoughtfully laid out magazine covers and article pages, large high-quality images, a human touch when integrating advertising, a tactical experience in turning a thick shiny page and, yes, even the smell. By contrast, old-school online content is typically crammed in a box with small pixelated images, stuffed unreadably with search-friendly keywords, and surrounded by distracting blinking ads. The content seems secondary to the noise that surrounds it.

[READ MORE AT SAY DAILY]