Blogger Theme Designer and What Each Setting Changes

You want to change your blog's colors and fonts, but the Edit HTML screen looks like a wall of code you are afraid to touch. The Blogger theme designer is the safer route for most of those changes, and it is built right into the dashboard. The catch is that half its settings are vague about what they really do, and a few can quietly undo work you did elsewhere.

I customize Blogger templates for clients every week, and this is the tour I wish someone had given me when I started: what each panel changes, which settings are safe to play with, and where the designer stops being the right tool.

How to open the Blogger theme designer

From your Blogger dashboard, choose Theme in the left menu. Under the preview of your current theme you will see a Customize button. Click it and the designer opens with a live preview on the right and the settings panel on the left.

Before you change anything, click the small arrow next to Customize and choose Backup to download a copy of your theme file. It takes ten seconds and turns any mistake into a two minute restore. Our checklist on what to back up before changing your Blogger theme covers the widgets and gadgets the file does not include.

What each setting in the theme designer changes

The exact menu names vary slightly between the official themes such as Contempo, Soho, Emporio, Notable and Essential, but the structure is the same.

Theme

This panel shows the official theme families and their color variants. Clicking one switches the whole template. On a blog with custom code, this is the most dangerous button in the designer, because switching discards edits you made in Edit HTML. Only use it when you truly want a fresh start.

Background

Here you can set a background image or a solid main color. Many themes also tie the accent color to this setting. If you upload an image, keep it under about 300 KB, since a heavy background slows the first load on mobile more than almost anything else on the page.

Adjust widths

Some themes show sliders for the overall page width and the sidebar width, in pixels. A content width around 700 to 760 pixels keeps lines comfortable to read. Pushing the whole layout past 1,200 pixels makes text lines too long on large monitors.

Layout

This chooses where the sidebar sits and, in some themes, how many footer columns appear. It changes the arrangement of sections, not the gadgets inside them. You still add and remove widgets from the separate Layout page in the main menu.

Advanced

This is where most of the useful work happens. A drop down list lets you pick an element group, such as page text, blog title, links, post title or sidebar, and then set its font family, size and color. Each change appears in the preview instantly.

Add CSS

At the bottom of the Advanced list sits a box for your own CSS rules. Anything you put here loads after the theme's own styles, so it overrides them without touching the template code. It is the cleanest home for small tweaks.

When you are happy, click Save in the lower corner. Close the designer without saving and your changes are gone.

A safe order for customizing in the designer

1. Back up the theme file first.
2. Set widths and layout, since they affect how everything else looks.
3. Choose fonts for body text and headings under Advanced. Keep to two families at most.
4. Set text and link colors, checking contrast against the background.
5. Upload any background image last, then preview on a phone.
6. Save, then open the live blog in a private browser window to confirm.

Working in this order means you are not repainting colors after a width change has shifted things around.

The common advice I disagree with: do everything in Edit HTML

A lot of tutorials tell you to skip the designer and change colors and fonts directly in the template code, on the grounds that the designer is limited and real customization happens in HTML.

For official Blogger themes, I think that is backwards. Those themes store colors and fonts in variables that the designer controls. When you hard code a new color into the CSS below, you create two sources of truth. Six months later you change the link color in the designer, nothing happens, and you spend an hour finding the line you edited and forgot. Use the designer for anything it offers, and the Add CSS box for the rest. Save Edit HTML for structural changes the designer cannot touch.

The exception is third party templates. Many free templates downloaded from outside Blogger do not wire their styles to the designer's variables at all, so the Advanced panel shows options that change nothing. If you click a setting and the preview does not move, that is why, and code editing becomes the right tool. Our guide on customizing a template without breaking the layout covers how to do that carefully.

Checking your changes on a phone before you save

The preview panel inside the designer shows a desktop view by default, which hides most of the problems readers actually meet. More than half the visits on a typical hobby blog come from phones, so check there before you commit.

• Toggle the mobile preview icon at the bottom of the designer if your theme offers one.
• After saving, open the blog on a real phone and read one full post from top to bottom.
• Look for body text smaller than about 16 pixels, links that are hard to tap, and a header image that crops off the blog title.
• Check a page with a long table or image, since width changes show up there first.

If something looks wrong, go back into the designer and adjust one setting at a time. Changing four things at once makes it impossible to tell which one caused the problem.

When the theme designer is not enough

• Moving the position of the post date or author line inside a post
• Adding a new section or widget area that the template does not have
• Changing how the mobile menu behaves
• Removing template scripts that slow the page down

Those all need template edits. Everything about color, type, width and the background usually does not. More step by step guides sit in our template customization section.

Frequently asked questions

Why is the theme designer not changing my Blogger template?

Your template probably does not use Blogger's design variables. This is common with free third party templates that hard code their colors and fonts in CSS. Check by changing a single setting, such as link color, and watching the preview. If nothing moves, you will need to edit the CSS directly or use the Add CSS box with stronger rules.

Will changing my Blogger theme delete my posts?

No. Posts, pages and comments are stored separately from the theme and are not touched. What you can lose are gadget settings and any custom code added in Edit HTML. Download a backup of the theme file before switching so you can restore it.

Can I use custom fonts in the Blogger theme designer?

The Advanced panel offers a fixed list of web fonts that load automatically. For a font outside that list, you need to load it through the template and then set it with CSS. Keep it to one or two families so the page stays fast.