Carbonby Codestag

Getting Started

With Carbon, your blog will look stunning out of the box. If you’d like to tweak its appearance, the theme’s settings are accessible via the Customizer.

Featured Images

The most important image in your post is the Featured Image, the full-width image that serves as your post’s “cover.” It’s the first thing your readers see, so it should convey the message of your post.

cover_2

Featured Images will also show on your blog and archive pages, so Carbon looks best when you have selected one for each of your posts. The Featured Image scales to fit the browser window, and we recommend using images sized at 1600 x 1600 pixels.

Excerpts

If you look at the Carbon demo you will see that the posts have a subtitle under the post title, which is a great way to let your readers know what the post is about. You can achieve this by adding an Excerpt when creating your post.

excerpt

Widgets

To add widgets to the sidebar, go to Customize → Widgets and drag any of the available widgets to the Main Sidebar widget area. Leaving this widget area blank will result in a full-width site, without sidebars.

widgets

Theme Options

Set up your overall blog layout and other options via Customize → Theme Options.

Posts Layout

Carbon lets you change the layout of your blog and archives, and choose one of four options for your posts grid appearance. Select the desired layout and preview its effect in the Customizer.

Posts Grid Titles Visibility

This option lets you decide whether the titles of your posts are shown by default, or if you prefer to show titles on hover. This setting will not have any effect on the mobile version of the theme, where the post titles are always visible.

If the titles visibility is set to "Visible on hover" your posts will only show the titles on hover (right post).

If the titles visibility is set to “Visible on hover” your posts will only show the titles on hover (right post).

Sticky Post Label

This option allows you to customize the label for the Sticky Post. For example, on the demo, we use the word “Featured.”

Post Details Options

This section allows you to choose whether to show an author avatar and / or the reading time on the post cover.

Author avatar and reading time in the post details

Author avatar and reading time in the post details

Footer Text

Here you can add some text to your footer, like a copyright notice.

Header Image Text and Description

If you have set a Header Image on your homepage, you will see these two fields. The Header Image Text displays a nicely styled title over the header image, and the Header Image Description field adds some text underneath it. Use these to create an introductory section on your homepage to let your readers know what your blog is about!

A header image with a custom message

A header image with a custom message

Custom Menus

Carbon has three menu locations: the Header and Footer areas are best for navigation, while the Social menu at the footer includes links to your social media profiles. Follow the instructions for adding a custom menu to set these up.

The Primary Menu Location at the frontend

The Primary Menu Location is located at the very top, next to your logo

bottom menus

The Social menu location (bottom right) resides below the Footer menu location.

Social Links Menu

social

Add as many custom social links you wish and the corresponding social icons will appear in the footer. Here is the list of all supported social icons:

  • digg.com
  • dribbble.com
  • dropbox.com
  • facebook.com
  • flickr.com
  • foursquare.com
  • github.com
  • plus.google
  • instagram.com
  • linkedin.com
  • path.com
  • pinterest.com
  • getpocket.com
  • polldaddy.com
  • reddit.com
  • RSS Feed
  • skype
  • spotify.com
  • stumbleupon.com
  • tumblr.com
  • twitch.tv
  • twitter.com
  • vimeo.com
  • vine.co
  • wordpress.com
  • youtube.co

Read more about how to set up your Social Links menu here.

Header Image

Carbon offers the ability to add a Header Image to your homepage with a custom message for your readers. To add a Header Image, go to Customize → Header Image and select an image.

headerimg

Once you have added a Header Image, you can edit the title and description that will appear over it by going to Customize → Theme Options and editing the Header Image Title and Header Image Description fields.

title

Custom Logo

You can choose to use a custom logo by going to Customize → Site Identity and following these instructions.

crbn6

Content Options

crbn2

Customize → Content Options allows you to edit the appearance of your content:

  • Display an author bio at the end of each post.
  • Choose to show or hide the Post Publish Date, Category, or Tags.

Read more about Content Options here.

Extra Styles

Carbon comes with some CSS styles you can add in the HTML Editor. These classes are optional and add a nice touch to your stories.

Intro Text

intro

You can stylize introductory text for your post or page by wrapping the text in a span tag with the class: “run-in”.

<span class="run-in">This is your introduction text.</span>

Drop Caps

screen-shot-2016-09-15-at-19-13-12

Give visual emphasis to the first character of your post by wrapping it in a span tag with the class: “dropcap”.

<span class="dropcap">D</span>rop caps are awesome.

Two-column text

You can split a piece of content in two columns by wrapping a div element with the class of “twocolumn” around it:

screen-shot-2016-09-15-at-19-14-31

This text would appear in two columns.