Editing CSS. The Custom Design upgrade comes with a CSS editor that you can use to customize the appearance of any WordPress.com theme. It works by allowing you to add CSS to override parts of the theme’s stylesheet bit by bit or start fresh by turning off the theme’s CSS completely and building a new design from scratch. You may not edit HTML or PHP code, but there is an amazing potential to what you can do with CSS-only edits. To access the CSS editor, go to Appearance → Customize → CSS in your blog dashboard. If you have never added CSS before or if you have recently changed themes, you will see a placeholder comment in the editor enclosed in /* and */ with a welcome message.
The placeholder comment can be deleted and replaced with your custom CSS. /* This is a CSS comment, and anything inside the asterisks will be ignored ↑ Table of Contents ↑ Content Width This option should be used if you have modified the width of the primary content area using custom CSS. Theme’s Original CSS Preprocessor CSS Help. Custom Design. With the Custom Design upgrade, you can personalize the look and feel of your blog with intelligent color tools, custom fonts, and a CSS editor that can be used to make more advanced design updates. Custom Design is a paid upgrade that costs $30.00 per blog, per year.
It replaces the Custom CSS and Typekit fonts upgrades. All of the Custom Design tools can be accessed through the Appearance → Customize in your blog dashboard where you can use the right-side menu to open panels for Colors, Fonts, and CSS. You can also access the same tools by going to Appearance → Custom Design and using the tabs at the top of the page. Preview Custom Design Before Purchase Anyone can preview the Custom Design upgrade tools for free. If you haven’t purchased the upgrade yet and you would like to preview the tools, go to Appearance → Customize, click the Custom Design menu link, and click the Try Now button. ↑ Table of Contents ↑ How to Exit the Custom Design Preview Custom Fonts Custom Colors Custom CSS No. No. Uploading Custom Themes.
Because of the way WordPress.com’s technical infrastructure is designed, we are not able to support uploading of custom WordPress themes on our service. However, there are several options if you would like to change the theme of your blog: Several of the over 250 themes on WordPress.com have customization options to change the colors, backgrounds, layouts, and header images. Learn how to activate a new theme here.You can purchase a Custom Design upgrade for your blog, which allows you to edit the look and feel of any WordPress.com theme.You can move your WordPress.com blog to a web host that allows editing and uploading of completely custom themes.
You can find suitable hosts here. We are always looking to add new themes to WordPress.com. Please feel free to suggest the addition of any theme. Help us improve: We're always looking to improve our documentation. Avatars. An avatar is an important part of your online representation of yourself, usually a picture of you that shows up in places where you leave comments or forum posts.
What is a Gravatar? On WordPress.com, we use Gravatar to associate an avatar with a user’s account. If you’ve set up a Gravatar, it will be displayed when you post to the forums or comment on a blog, and it may also appear if your blog is featured on a tag page. Here’s an example: Until you upload your own Gravatar, your default one will look something like this: You also have the ability to choose what kind of default avatar you want to represent people without custom avatars who comment on your blog.
For more information on working with Gravatars please check out this support doc. ↑ Table of Contents ↑ What is a Blavatar? Blavatar is a term we came up with by combining Blog + Avatar. If you haven’t uploaded a custom Blavatar yet, the WordPress.com logo will appear as your favicon. Help us improve: Post Formats. Mobile Themes. When a visitor browses to a WordPress.com blog on a mobile device, we show special themes designed to work on small screens focusing on fast load times.
Depending on your current theme and the type of mobile device, you will see one of the mobile themes. Mobile-ready theme + rich browser on modern mobile devices: If you are using one of the themes that are smartphone-ready, that’s what you will see on rich browsers on iPhone, Android, and other smartphones and tablets.Non-mobile theme + rich browser on modern mobile devices: If your current theme is not smartphone-ready, the standard WordPress.com mobile theme is displayed on modern mobile devices.
Any theme + older devices: To all other devices, you will see a version of the WordPress Mobile Edition theme. The WordPress.com mobile theme features your header image and custom background. When viewing your blog on older phones, the focus will be on loading the blog quickly while displaying the important information about your content. Premium Themes. WordPress.com’s collection of beautiful and amazing themes continues to grow with the introduction of Premium Themes, featuring intricate designs, exciting options for customization, and exclusive support directly from the theme authors themselves.
Where to Find a Premium Theme You can find and preview Premium Themes in two spots: on our WordPress.com Theme Showcase and right in your WordPress.com dashboard. On the Theme Showcase you’ll find detailed information about the special features each theme offers along with a link to a special demo site that lets you cruise through it and get a feel for it. Check out our current stock of Premium Themes on the Theme Showcase. If you’re in your dashboard you can see all of our Premium Themes under the Appearance page by clicking on the Premium link above the Theme Viewer. ↑ Table of Contents ↑ How To Get a Premium Theme Activating a Premium theme is similar to activating a Free theme.
Can’t pick just one? How to Transfer a Premium Theme. Layout Issues. After publishing a new blog post, you may notice some strange formatting errors on your blog’s front page. Review the following article for how to identify the cause of the problem, and more importantly, how to fix it. If you are still having issues even after reviewing the following documentation, please feel free to Contact Support, and have us take a look. If your sidebar has mysteriously relocated to the bottom of your front page this most likely means that there is some extra HTML code in one of your posts breaking the layout.
This extra code is normally added when any content is pasted from another web page, source, or program. The most common culprits are Microsoft Word and Open Office, which will both add extra HTML tags to any pasted content. Here is an efficient way to diagnose for the issue: If this is all a bit too much for you, and you really don’t have the time to wrangle with your HTML, simply contact support, and we will be happy to fix it for you. ↑ Table of Contents ↑ Gravatars. WordPress.com associates an Avatar with your email address. Once you configure your avatar, you’ll see it when you post to the forums, when you comment on blogs, and with any post displayed in WordPress.com’s community features. Here are some examples of how we display avatars on WordPress.com: Forums Comments on a Blog Post Comments Administration Screen Gravatar powers the user avatars on WordPress.com.
Gravatar Hovercards Gravatar information also appears in Hovercards, which show when people mouse over the avatar image shown in comments and other places. ↑ Table of Contents ↑ Upload an Avatar Visit Your Public Profile and click on the link to Change your Gravatar. A popup will appear. Follow the on-screen instructions to set a new avatar for your account. Remove an Avatar Visit your public profile and click on the link to Change your Gravatar. A pop-up will appear. A list of each email address associated with your account will appear. Additional Information Help us improve: Custom Header Image. Customization is a good thing. Many of the themes on WordPress.com 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 purchase the 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. To get started, open the Customizer. Not familiar with the Customizer? Just hover over your blog’s name in the admin bar and click Customize. There, look for section Header. If you do not see this section, this means that your current theme does not support the use of a custom image header. Here, you may choose between your own images—if you have recently uploaded any—and a selection of suggested images for your current theme if it has any. Want to add a new image instead? Like what you see? The image should appear immediately. Important: Only .jpeg, .gif, and .png files can be used.
Editing Templates and Themes. Blavatars. Blavatar is a term we came up with by combining Blog and Avatar. Blavatars are used in a number of ways. It will be displayed as the favicon for your blog, which shows up in a browser’s address bar and on browser tabs. It will show up in the comments section of a blog if you send out any pingbacks. If you create a bookmark on your browser or shortcut on your iPhone/iPad home screen to any blog with a Blavatar, it will also be used as the icon. Here are a few of examples showing a Blavatar: Upload a Blavatar You can upload a Blavatar by visiting Settings → General in your blog’s dashboard. On the right side you should see the section for Blog Picture / Icon. Click on the button for Choose File or Browse depending on the browser you’re using. Blavatars look best if the image you’re using is square and at least 128 x 128 pixels in size.
Don’t worry if your image isn’t square, though. Move the crop area and change the size to match the area of the image you want to use. . ↑ Table of Contents ↑ Using WordPress.com to Create a Website. With WordPress.com, it’s easy to create your own website or blog in seconds. For definition’s sake, a blog is a type of website that shows the newest content at the top of the page. A blog can also be one part of a website with multiple pages. On WordPress.com, you can choose any of those options, easily adding pages and other goodies to your site, customizing the style and appearance to your needs. Here are some suggestions on how to get started: Find Inspiration Check out our theme showcase for some great examples of all the different blog/website styles that are possible with WordPress.com. Some themes are free, while others are premium and available for purchase.
. ↑ Table of Contents ↑ Create a Home Page With a default blog setup, your front page will display your latest posts. Add More Pages Many blogs have a single page or two, with one for posts and the other for an “About Me” section. If you have a theme that supports Custom Menus, you can: Your Website's URL Get More Help. Custom Menus. If you have a theme that supports the Custom Menus feature, you can create and arrange a group of navigation links for your visitors to find the important parts of your site faster. Most Custom Menus will show in the header area at the top of your site (the main navigation area), though this location can vary from theme to theme. With some themes, you may have the option to create and display multiple custom menus in different places on your site, such as the footer or special sidebar areas.
Creating a custom menu allows you to do the following things: Change the order of pages in your menu, or delete them! Create nested sub-menus of links, sometimes referred to as “drop-down” menusCreate links to category pages allowing you to collect together posts based on that categoryAdd custom links to other sites, such as a link to your Twitter or Instagram profile To create a custom menu, go to Appearance → Menus in your dashboard. ↑ Table of Contents ↑ Adding Pages Adding Category Pages Troubleshooting.
Themes. Overview A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying, unifying design for a blog. WordPress.com currently has a very diverse collection of over 250 gorgeous themes (and we’re always adding more!) , which you can browse in the Theme Showcase. To activate a theme, visit Appearance -> Themes in any blog’s dashboard. You can change your theme as often as you like. Here’s an example of a theme: The Coraline Theme To view all the themes available, visit the Theme Showcase or access the Appearance -> Themes menu option in your blog’s dashboard.
From Appearance -> Themes you can see your current theme. Please note that the currently selected theme will not appear in the results when browsing or searching for other themes. ↑ Table of Contents ↑ Browsing Themes Searching Themes Looking for a particular theme or a theme feature? Note that the search results will be sorted according to your viewing mode. Feature Filters Premium Themes. Custom Fonts. Custom Fonts are part of the Custom Design upgrade, at $30.00 per blog, per year, and it allows you to easily add Typekit fonts to your blog. You can customize the fonts on your blog in a few clicks—no coding required. Getting Started To select custom fonts, go to Appearance → Customize → Fonts in your blog dashboard and click the font name to see a list of available fonts. Fonts are set in pairs, one for headings and the other for body text.
Headings: Choose a font to use for all of the headings on your blog. Each time you change a font, the live preview will refresh so that you can see how that font will look on your blog. ↑ Table of Contents ↑ Adjusting Font Size and Style Font style To adjust the style of your heading fonts, click the option above and to the right of the font. Font size To adjust the size of your fonts, click the number option above each selected font. Saving Fonts Once you are satisfied with your font selections, click the “Save” button. Changing Fonts. Smiley on Your Blog.