Oodles of gorgeous WordPress themes for your blog

You can change the look of your blog with over 200 attractive WordPress themes ranging from professional to fun to crazy, and you can switch themes instantly with just a click of a button. Each theme allows you to customize your sidebar using widgets, and several themes let you upload your own photo or image for the header bar.


Widgets & Sidebars


Widget is a fancy word for tools or content that you can add, arrange, and remove from the sidebar(s) of your blog. Widgets make it easy to customize the content of your sidebar(s). You can learn more about the widgets we offer by checking out the Related links on the right.

You can access your widgets from the Appearance -> Widgets screen in your Dashboard.

Adding Widgets

To add a widget, drag the widget from the Available Widgets or Inactive Widgets area on the left into the Sidebar area on the right. When you see a dashed line appear, you can drop the widget into place.

You can also change the order of the widgets by dragging and dropping them around in the sidebar.

↑ Table of Contents ↑

Configuring Widgets

Each widget has configuration options. To make changes to a widget in the sidebar, click on the triangle on the right side.

This will open up the options for the widget. Each widget will be different. Here is an example of the Archives widget.

After you have have configured the widget, click the Save button. Clicking the Close link will minimize the configuration options again.

↑ Table of Contents ↑

Removing Widgets

If you would like to remove a widget from the sidebar, click the Delete link in the configuration options as show above.

↑ Table of Contents ↑

Accessibility Mode

If you need a more accessible way to add widgets, click Screen Options -> Enable accessibility mode to turn off the drag and drop feature.


In accessibility mode, you can add widgets to your sidebar using the Add links next to each widget name


and you can modify widgets using the Edit links.


↑ Table of Contents ↑


Why are there widgets showing up on my blog that aren’t listed under my sidebar on the Appearance -> Widgets screen?
With some themes if you haven’t added any widgets to your sidebar(s), the theme will show a default set of widgets, which will not be listed in the Sidebar area.

When you add widget(s) to a sidebar the default set of widgets will no longer be used. Try adding a blank Text Widget if you don’t want anything to show up in a widget area.


Themes » Custom Header Image

Customization is a good thing. Many of the themes on feature an option which allows users to upload their very own custom image header to obtain a much more personalized look and feel. The use of this option is completely free, and you do not need to purchasethe Custom Design upgrade in order to change your header (as long as you’re using one of the themes that includes the option, of course).

Uploading a Custom Header Image

Go to Appearance -> Header in your blog’s dashboard. If you do not see the option, this means that your current theme does not support the use of a custom image header. Please refer to the list of supported themes at the bottom of this page.

You can either browse for the file on your computer and then click the Upload button.

Or you can choose an existing image from your Media Library.

Important: Only .jpeg, .gif, and .png files can be used. All cropped images will be converted to jpegs. Using an image of exactly the right size will produce the best results, and this is certainly recommended. To preserve transparency in an image use a .gif or .png image of exactly the right size.

If you uploaded an image that doesn’t match the exact dimensions of your current theme’s header, you will need to crop it.


Just select the portion of the image that you’d like to use for the header, then click Crop and Publish.

Once you see the Header Updated message below, you can visit your site to see how it looks.

The image should appear immediately. If it does not, please contact Support. Be sure to provide a detailed description of the header image that you attempted to upload and/or attach the image file so that we can take a closer look.

↑ Table of Contents ↑

Other Options

Many of the themes have other customization options. If you wish to remove the blog title (and tagline, if it appears) from the header, you can select uncheck the Show header text with your image option.

If you wish to show the blog title and tagline, you also have the option to change the text color using the Text Color option.

↑ Table of Contents ↑

Deleting Header Images

If you decide you want to delete one of your custom header images, you can do so by going to your

Media -> Library and clicking on “Delete Permanently” underneath the image.

↑ Table of Contents ↑

Flexible Headers

To add a header image without cropping, first you must use a theme with Flexible Header support (check the list below). Once you’re sure you are using a theme that has flexible header support, go to Appearance → Header → upload an image and click the “Skip Cropping, Publish Image as Is”button. The header image will be added without any cropping so you can use one that is taller or shorter than the size defined by the theme when you crop.

Not all themes have support for flexible headers yet, but we are working to add support for as many themes as possible over time. You can see current list of themes that support flexible headers by looking at the table below or the flexible header filter in the Theme Showcase.

↑ Table of Contents ↑

Supported Themes

Here is the official, current listing of all themes that support custom header images, image dimensions, and the download link to the original header image (if there is one).

Theme Width Height Download
Academica 960 300
Adventure Journal 920 flexible
Ambiru 500 225 download
Andrea (Flexible Width) 1270 260
Andrea (Fixed Width) 690 145
Ari 240 75
Ascetica 660 flexible
A Simpler Time 963 200
AutoFocus 800 216
Babylog 920 flexible
Balloons 640 flexible
Blaskan 1120 160 Note: 2 & 3 column layout is 1120 and 1 column layout is 540.
Blog Simple 1000 flexible
Blogum 945 150
Bold Life 950 264
Bold News 940 200
Book Lite 1440 500
Bouquet (Responsive Width) 1100 180
Bueno 930 198
Benevolence 700 225 download
Black-Letterhead 760 200
Blix 690 115 download
Chaotic Soul 760 151 download
Chapters 960 100
Cheer flexible flexible
Chunk 800 140
Chateau 960 flexible
Clean Home 900 200
Comet 960 200
Confit flexible flexible
Connections 741 142 download
Contempt 750 140 download
Coraline 770 140 Note: Cutline image size was 990 x 180 (Coraline replaced Cutline)
Day Dream 527 273 download
Delicacy 980 250
Digg 3 Column 904 160 download
Dusk to Dawn 870 220
Duster 1000 300
Elegant Grunge 956 160
Elemin 990 flexible
Enterprise 960 80
Ever After flexible flexible
Everyday 250 flexible
Fresh & Clean 920 116
Fjords04 900 200 download
Forever 885 flexible
Fusion 980 148
Freshy 780 95 download
Gigawatt 940 250
Greenery 740 176 download
Grid Focus 970 175
Grid Focus 42 42 Note: Uses the blog picture on General Settings page
Gridspace flexible flexible
Grisaille 960 flexible
Hatch 640 or 940 flexible
Hum 188 flexible
Iceburgg 790 150 download
Just Desserts 920 flexible
K2-lite 780 200
K2-lite 780 200
Koi 980 200
Kubrick 740 192 download
Liquorice 900 235
Lovebirds 250 flexible
Luscious 960 100
Matala 940 250
Minimalizine flexible flexible
Minimum 960 100
Mixfolio 980 275
Modern News 960 110
Monster 1000 flexible
Motion 50 50 download
Misty Lake 1015 flexible
MistyLook 760 189 download
The Morning After 960 70
Mystique 940 200
Neat 700 200 download
Neo-Sapien 480 250 download
Newsy 1016 flexible
Next Saturday 615 85
Nishita 1024 295
Notepad 974 240
Nuntius 980 155
Ocean Mist 736 229 download
Origin 940 flexible
Oulipo 712 80
Oxygen flexible flexible
Parament 950 200
Petite Melodies 1000 flexible
P2 980 120
Piano Black 951 160
Pilcrow 770 200 download
Pinboard flexible flexible
Pink Touch 2 690 185
Pool 600 150 download
Prologue 726 150
Publish flexible flexible
Quintus 1100 250
Reddle 1120 252
Redoable-Lite 730 180
Regulus 730 140 download
Retro-fitted 980 150
Rubric 215 150 download
Runo Lite flexible flexible
Rusty Grunge 658 240
San Kloud 940 250
Sapphire 750 180 download
Selecta 940 150
Shaan 900 100
Sight 580 flexible
Skeptical 940 200
Skylark 920 flexible
Something Fishy flexible flexible
Spectrum 938 150
Splendio 990 400
Standard 940 250
Strange Little Town 950 200
Structure 960 120
Suburbia 155 155
Sundance 984 242
Sunspot 257 157
Tarski 720 180 download
ThemeMin 960 180
Titan 960 180
Triton Lite 960 270
Twenty Eleven 1000 flexible
Twenty Ten 940 198 download
Twenty Twelve 960 250
Under the Influence 980 180
Vertigo 960 240
Vigilance 920 180
Vintage Kitchen 580 140
Vostok 600 126 download
Widely 960 flexible
zBench 960 200

To download any of the original files linked above:

  • Internet Explorer: right-click download and “Save Target As”
  • Opera: right-click download and “Save Target As”
  • Firefox: right-click download and “Save Link As”
  • Chrome: right-click download and “Save Link As”


Custom Menus

If you have a theme that supports the Custom Menus feature, you can customize your navigation menu. This allows you to:

  • Change the order of pages
  • Nest pages to create sub-menus
  • Display posts on multiple pages by creating category pages
  • Add posts, tag pages, and custom links to your navigation menu

Below is an example of a navigation menu on a blog running the Twenty Eleven theme:

To create a custom menu, go to Appearance -> Menus in your blog’s dashboard. If you do not see the Appearance menu option, you are not an administrator on the blog.

Creating a Custom Menu

To create a custom navigation menu, type in a name for it (only you will see this) and click Create Menu.

↑ Table of Contents ↑

Adding Pages

Adding pages to your menu is as simple as checking the proper boxes for the pages you want and then clicking Add to Menu.

↑ Table of Contents ↑

Adding Category Pages

All posts will appear on your main posts page, but you can also create category pages that only display posts that you’ve designated with a specific category.

Simply check the box of the categories for which you want to create a page, and click Add to Menu.

Be sure to click Save Menu each time you make changes to your custom menu.

↑ Table of Contents ↑

Adding Tag & Post Format Pages

You can also add tag and post formats pages (if your theme supports them) to your custom menu. To display these modules in the custom menu editor, click the “Screen Options” drop down at the top right of your screen:

Check the boxes for the module you want to display, and the module will appear in the custom menu editor:

↑ Table of Contents ↑

Want a menu tab to link directly to another website? No problem! Type in the URL, the label name, and then Add to Menu.

↑ Table of Contents ↑

Changing Menu Item Titles

You can also change the label and the hover-over text of menu items independently from the page name itself. To edit a page or category title, click the down arrow to the right of the item.

Once expanded, enter the new label name and any desired hover-over text. The underlying page will always show its name in the Original section of the menu item.

Your menu item will now look something like this:

↑ Table of Contents ↑

Removing Menu Items

Expand the item you are going to remove by clicking the down arrow to the right of the item.

Once expanded, click on the Remove link.

That’s all! Don’t forget to save your changes.

↑ Table of Contents ↑

Changing the Order of Menu Items and Creating Sub-Menus

At any time, you can change the order and placement of menu items. Drag and drop the items up and down to change the order of menu items. Drag and drop the items left and right (as shown below) to create sub-menu items.

The final product from the customized menu:

↑ Table of Contents ↑

Adding Static Top-Level Tabs

Here’s a nifty way to add static top-level tabs that you can use to organize your content. These tabs are basically place holders – they don’t link to any content, but are there to add structure to your menu items.

Check out the screenshot below: the top-level tab “Music” doesn’t actually link to anything. You can click it, but nothing will happen. It’s solely there to organize links the various music-related menu items.

Here’s how you can add Static Top-Level Tabs:

  1. Go to your Menus page (Appearance -> Menus)
  2. Add a Custom Link and set the URL as #. Using # will prevent the page from refreshing when you select the tab.
  3. Label your link and hit the “Add to Menu” button.
  4. Organize your menu items like you would normally do, hit the “Save Menu” button, and you’re done!

↑ Table of Contents ↑

Activating Your Menu

In the Theme Locations module, under Primary Menu, select the title of the custom menu you want to activate and click Save.

↑ Table of Contents ↑

Multiple Menus

Most themes have one menu. Some themes, such as the one in the screenshot below, support more than one menu. In both cases, you can create several different menu layouts and independently set the active menu.

If you’ve created more than one custom menu, be sure to activate the right one by selecting it from the drop down menu and clicking Save.

To edit your various menus or create new ones, click the relevant tab:

↑ Table of Contents ↑

Watch a video

This video will take you through the basics on working with Custom Menus:

Creating Custom Menus in

Creating Custom Menus in

↑ Table of Contents ↑

Additional Info

Why am I getting a warning that says ‘The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.’?
Not all themes support custom menus for navigation. You can find themes that support menus for navigation in Appearance →Themes by choosing “Custom Menu” from the Feature Filters menu. If your theme doesn’t have the navigation support, you can use the Custom Menu Widget.

Can I create a sub-menu custom link?
Yes, you sure can. You are free to drag and drop any of the menu item types in any order or hierarchy you’d like.

Can I configure link targets?
Yes indeed. Expand the “Screen Options” drop down at the top right of your screen and check the“Link Target” advanced property.

Writing & Editing

Featured Images

With custom header images, you can display your own photo on your blog’s page headers. Featured images allow for even greater customization, giving you the option to display unique custom header images for specific posts and pages.

Note: This feature only works with themes that allow custom header images and have featured header images enabled.

For example, your custom header may look like this:

But if you want to customize your About page, you can change the header image for only that page:

↑ Table of Contents ↑

In addition to featured header images, a variety of themes also support alternative featured images, such as slideshows, post thumbnails, and images attached to featured posts.


  • Featured Images will appear above the post on all views and fill the maxium width of the content area.


  • For best home page results, upload large featured images into your single posts. This will always ensure the presence of form-fitting featured images on the home page. There’s no magic bullet for perfect home page thumbnails; you’ll need to experiment with sizing and thumbnail cropping to find what works best for your photos.
  • 800 x 1200 max on single posts (will be displayed above post title and post content)
  • 600 x 211 on archive (category, tag, date-based, author) pages
  • 595 x 211 on search archives

A Simpler Time

  • Featured Images will appear above the post on all views and fill the maxium width of the content area.


  • Featured Images will appear above the post on all views and fill the maxium width of the content area.

Bold News

  • 216 x 100 on featured posts slider
  • You are able to set sizes for the rest in Appearance → Theme Options → Featured Images

Book Lite

  • Featured Header Image: 1440 x 500, displays as a background image to the header


  • Large: 490 x 200 on archive and index
  • Thumbnail: 70 x 70 in Bueno Featured Posts widget


  • The max size of a featured image for a page specific background image 1600px wide
  • A featured image for blog posts works best with images at least 618 wide
  • A featured image for food menu items works best with images at least 138 wide, 104 height.


  • A featured image that is at least 990 x 180 pixels will be used as the header image for that post/page (if the featured image is smaller than these dimensions, then the theme will display the custom header image, if one has been added).


  • Featured Content Section: 588 x 289


  • Sticky Posts Featured Image: 880 x 390

Dusk To Dawn

  • An image that works best with images at least 588 wide.

Ever After

  • Sticky Posts Featured Image Slider: at least 850 pixels wide, 400 pixels height.
  • Thumbnail works best with 850 pixels wide.

Fresh & Clean

  • Sticky Posts Featured Slider: 840 x 280
  • Thumbnail: 160 x 120


  • Sticky Posts Featured Image Slider: at least 888 pixels wide


  • Horizontal Featured Images: 384 x 285
  • Vertical Featured Images: 248 x 330
  • Square Featured Images: 384 x 384
  • Logo: 180 pixels wide, flexible height


  • Sticky Posts Featured Images: 590 x 275
  • Thumbnail: 250 x 200


  • Blog/Archive pages: 220 x 150
  • Single Posts: 640 wide, flexible height
  • Logo: 115 wide, flexible height


  • Showcase page large feature: 740 x 288
  • Showcase page small feature: 500 x 300

Imbalance 2

  • An image that works best with images at least 210 wide.

Inuit Types

  • Thumbnail: 90 x 75 for non-featured posts on index
  • One-column feature: 594 x 250
  • Two-column feature: 278 x 150

Just Desserts

  • Featured images are 920 x 280 pixels


  • Thumbnail: 150 x 100 on home page and archive pages


  • Featured images are 520 x unlimited height on home page and archive pages


  • Thumbnail: 300 x 200 on home page and archive pages

Misty Lake

  • Thumbnail: 619 x unlimited height on home page and archive pages

Modularity Lite

  • Large: 950 x 425 for home page slideshow
  • Thumbnail: 150 x 150 on archive and search

Modularity Lite

  • Large: 950 x 425 for home page slideshow
  • Thumbnail: 150 x 150 on archive and search


  • Featured Images will appear above the post on all views and fill the maxium width of the content area.


  • Thumbnail: 128 x 128 on archive pages


  • Sticky Posts Featured Slider: 640 x 430


  • Post thumbnails are 154 pixels wide
  • Sticky post thumbnails are 640 pixels wide


  • Sticky post thumbnails are 750 pixels wide in the featured slider
  • Regular post thumbnails are 450 pixels wide


  • Thumbnail: 250 wide on index and single

Petite Melodies

  • Sticky post thumbnails and Standard Blog Style featured thumbnails are 660 wide by 360 tall
  • Showcase Blog Style small thumbnails are 145 wide by 110 tall


  • Featured Images will appear above the post on all views and fill the maxium width of the content area.


  • Large: 600 x 150 on single posts and pages as well as for sticky posts in the blog.
  • Small: In category, tag, archives and search pages, the “thumbnail” size will be used.


  • Large: 640 x 290 in the Sticky posts slider
  • Small: 290 x 290 thumbnails are used on the home, category, tag, archives, and search pages.


  • Sticky post thumbnails are 500 pixels wide in the featured slider
  • Featured category thumbnails are 213 x 136.
  • Thumbnails on the Portfolio page template are 280 x 207.
  • Regular post thumbnails are 664 x 170.

Something Fishy

  • Post thumbnails are 750 x 250.


  • Sticky Posts Featured Slider: Featured image must be at least 180 pixels wide
  • Featured images will appear above the post on the regular blog view and fill the maximum width of the content area.


  • Small: 440 x 240 on the home page for featured posts
  • Medium: 620 x 380 on the home page for latest feature post
  • Large: 640 x 392 on single posts


  • An image that works best with images at least 350 wide and 248 height.


  • Featured image thumbnails are displayed on the double-column front page layout. With the right sidebar active, the thumbnails are: 260 wide x 160 high. If the right sidebar is not active, the thumbnails are 367 x 160.


  • An image that works best with images at least 830 wide.


  • Thumbnail: 250 wide on index and single

Triton Lite

  • Featured Post Slider: 950 pixels wide by 270 pixels tall; posts must be Sticky and have a featured thumbnail assigned to them in order to show up here

Twenty Eleven
Twenty Eleven has a special Showcase template which takes advantage of Featured Images when used on sticky posts:

  • An image with a minimum height of 300 pixels and a maximum width of 500 pixels will display next to the post.
  • An image that is at least 1000 x 288 pixels will be displayed instead of the post with a title over the image.

Twenty Ten

  • An image that is at least 940 x 198 pixels will be used as the header image for that post/page.

Twenty Twelve

  • An image that is at least 624 pixels wide will be used as the featured image on posts in the “standard” post format—aka, normal posts.


  • Thumbnail: 250 wide on index and single


  • Featured Images will appear above the post on all views and fill the maxium width of the content area.

↑ Table of Contents ↑

Open the editor of the post or page where you want to display a unique custom header image, and locate the Featured Image module in the bottom right corner under Page Attributes. Click Choose a Featured Image.

If you don’t see the Featured Image module on your Add New or Edit Post page, please make sure you’ve selected Featured Image in your Screen Options.

You will see an uploading screen identical to that used when inserting an image into a blog post. Follow the on-screen prompts to choose the image from your computer and upload it or choose it from one of the images already in your Media Library.

Once the image has successfully been uploaded, you’ll see one or more images displayed as thumbnails. Click on the one you want to use as a featured image. It will then appear outlined in blue with a checkmark. If desired, you can add a caption and alt text under the Attachment Details area (optional).

Next, click the button Set Featured Image:


Don’t forget to click Update on your post/page to save your changes. Your featured image is now set!

Note: If your featured image doesn’t appear after following the instructions above, please make sure that it meets the size requirements outlined here.

↑ Table of Contents ↑

To remove or change a featured image, simply re-open the post or page editor and click Remove featured image in the Featured Image module. If you remove a featured image, your custom header image will be displayed.


Themes » Post Formats

Several of the themes at allow blog authors to decide what format each of their posts should be displayed as. The use of this option is completely free, and you do not need to purchase the Custom CSS Upgrade in order to change post formats.

Supported Themes

Here is the official, current listing of all themes that support post formats. To learn more about each format, visit the Post Formats support page.

Theme Name Supported Formats
Academica Aside, Gallery
Avid Gallery, Image, Link, Quote, Video
Beach Aside, Gallery, Quote, Status
Blogum Aside, Gallery, Image
Book Lite Aside, Image, Video, Quote, Link
Bouquet Aside, Gallery, Image
Bueno Aside, Image, Video, Quote, Link
Chalk Aside, Audio, Chat, Gallery, Link, Quote, Status, Video
Chateau Aside, Image, Video, Quote, Link, Gallery
Chunk Aside, Gallery, Image, Quote, Link, Audio, Chat, Video
Coraline Aside, Image, Video, Quote, Link, Gallery
Crisp Image, Link, Quote, Video, Audio, Aside, Gallery, Status
Debut Audio, Gallery, Image, Video
Duet Image, Gallery, Video
Dusk to Dawn Aside, Gallery, Image, Quote, Link, Chat, Audio
Duster Aside, Gallery, Link
Elemin Aside, Gallery, Link, Image, Quote, Audio, Status, Video, Chat
Ever After Gallery, Image, Status, Quote
Everyday Aside, Gallery, Image, Status, Quote
Forever Gallery, Image, Status, Quote
Fruit Shake Aside, Gallery, Image, Quote, Link, Status
Gigawatt Video, Image
Gridspace Audio, Chat, Gallery, Image, Link, Quote, Video
Hum Aside, Gallery, Image, Link, Status, Quote
Just Desserts Gallery, Image
Liquorice Aside, Gallery, Image, Quote
Lovebirds Gallery, Image, Status, Quote
Manifest Aside, Image, Video, Quote, Link, Gallery, Status
Matala Aside, Gallery, Image, Quote, Status, Video
Minimalizine Aside, Image, Video, Quote, Link
Mixfolio Gallery, Image, Link, Quote, Video
Modularity Lite Aside, Image, Video, Quote, Link
Monster Aside
Mystique Aside, Gallery, Image, Quote
Next Saturday Aside, Audio, Chat, Gallery, Image, Link, Quote, Video
On Demand Video
Pinboard Aside
Pink Touch 2 Aside, Audio, Chat, Gallery, Image, Link, Quote, Video
Publish Aside, Chat, Gallery, Image, Link, Quote, Status, Video
Quintus Aside, Link, Quote
React Gallery
Reddle Aside, Image
Runo Lite Gallery, Image, Quote
Rusty Grunge Aside, Gallery, Quote, Status
San Kloud Aside, Gallery, Image, Quote, Link, Chat, Audio, Video, Status
Selecta Aside, Audio, Chat, Gallery, Image, Quote, Video
Shelf Image, Link, Quote, Video, Audio
Skeptical Aside, Audio, Chat, Gallery, Image, Link, Quote, Video
Skylark Gallery, Image, Video
Something Fishy Aside, Status
Soundcheck Audio, Gallery, Image, Video
Spectrum Aside, Gallery, Link, Quote, Status
Standard Image, Link, Quote, Status, Video
Sundance Video
The Morning After Aside
Toolbox Aside, Gallery
Tapestry Aside, Audio, Chat, Gallery, Image, Link, Quote, Status, Video
Twenty Eleven Aside, Gallery, Image, Link, Quote, Status
Twenty Ten Aside, Gallery
Twenty Twelve Aside, Image, Link, Quote
Vertigo Aside, Audio, Chat, Gallery, Image, Link, Quote, Status, Video
Vintage Kitchen Aside
Widely Aside, Image, Video, Quote, Link, Gallery


Custom Design » Editing CSS

Once you purchase the Custom Design upgrade, it’s very easy to get started with editing your blog’s appearance. To begin, simply go toAppearance -> Custom Design in your blog’s dashboard.

Then click on the CSS tab:

The CSS Editor will then load:

If this is your first visit to the CSS Editor (or you have not yet added any custom CSS code), you will see a placeholder message in the editing window (enclosed in /* and */) . Please review the message, as it contains some important information about the upgrade. The message begins with…

/* Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. You may delete these comments and get started with your customizations.

When you’re ready to begin adding your custom CSS code, simply remove the message to get started.

Editing Options

You have a few options when editing your stylesheet:


  • Add-on CSS is the recommended option and is used to build on the existing theme stylesheet. You need to learn how to override the styles in the existing stylesheet to make any changes. Click on the “theme’s CSS” link to view all CSS code for your current theme.
  • Replace theme’s CSS is an advanced option and should only be used if you want to start adding CSS for your theme from scratch.

↑ Table of Contents ↑

Content Width


This option should be used if you modify the width of the primary content area using custom CSS. will use the “Content Width” to determine the default size for full-size images, videos, and some shortcode widths when they are inserted into your blog. This option will not change the width of existing images or videos that have already been embedded. Also, this option will not change the width of the blog.

Note: This option will only work with blogs that have the Custom Design upgrade.

↑ Table of Contents ↑

Previewing and Saving

When editing your CSS, it is a very good idea to always preview your changes before actually applying them – regardless of your skill level. After making some changes to your CSS, you can click the Preview button.

A new browser window/tab will open allowing you to view your blog as if the custom CSS code were applied. You will see a message at the top of your blog, directly underneath your gray admin bar:

If you like what you see and wish to save the changes, go back to your open CSS Editor window and click the Save Stylesheet button.

Note: If you have not purchased the Custom Design upgrade, you are still able to edit your CSS code; however, you may only preview the changes. The ‘Save Stylesheet’ option is only available to users who have purchased the upgrade.

↑ Table of Contents ↑

CSS Revisions

The CSS Revisions module shows any backup copies of your custom CSS. Each time you click Save Stylesheet a revision is saved. will store the last 25 revisions for each post on your blog. The CSS revisions allow you to look back at the recent changes and revert to an earlier version if you need to.

To compare CSS Revisions, select a revision date in the CSS Revisions section under the Editor. Select another date in the revisions list, click Compare Revisions, and you can check out the two versions of your CSS side by side, with changes clearly highlighted.

To restore a previous version of your custom CSS, click Restore for that date and the custom CSS is reverted back.

↑ Table of Contents ↑

Maintaining your Custom Header

If you copy and paste the entire original stylesheet into the CSS Editor (which many users will do), you will lose the custom header image that you uploaded previously from Appearance -> Header. This is due to the fact that when you copy the entire div which contains the header image directly, the image URL is no longer valid. As such, you will need to customize the header div so that it includes the updated URL (you can get this from your Media Library). Here is an example (using the Benevolence theme):

#masthead {
position: relative;
top: 0px;
background: url('images/masthead.jpg');
width: 700px;
height: 225px;
margin: 0px;
margin-top: 0px;

You would then need to update this to:

#masthead {
position: relative;
top: 0px;
background: url('');
width: 700px;
height: 225px;
margin: 0px;
margin-top: 0px;

Note: The div identifier will differ between themes. The above example uses the Benevolence theme, which identifies #masthead as its header area.

↑ Table of Contents ↑

CSS Help

Need CSS help? We’ve got you covered! Our support team can help you in the CSS Customization forum.

If you’re just getting started, there will be a learning curve, but CSS is a very valuable and reusable skill. There are a TON of great resources on the web to get you started with learning more about HTML and CSS.

Here are a few tips we live by:

  • Develop your stylesheets offline.
  • Use a CSS validator.
  • Take advantage of your browser’s developer tools. Under Firefox, install Firebug. For Internet Explorer, install the Developer Toolbar.


Books — if you’re old-school

May be useful XD !

Need some help?

Sumber :

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:


You are commenting using your account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s