Online documentation: Carbon Light WordPress theme

Table of Contents

Spread the word, like and share – top

If you like this theme please don’t forget to spread the word, like it, share it so other people can try it too. Thanks in advance!

Description – top

Carbon Light is a fully responsive HTML5/CSS3 WordPress theme. Suitable for Business, Service, Portfolio websites. It has clean and minimalist design that is very easy to customize. It comes packed with a whole lot of code-snippets.

Check out Carbon light demo site for more ideas and better understanding the features.

Installation- top

Install this theme like a standard WordPress theme. Check the manual on WordPress theme installation.

Once installed the theme will automatically install the WooSlider plugin and will ask you to activate it. More on the slider see bellow in the Slider section.

Recommended plugins – top

Here is a list of plugins we recommend:

The theme comes with two menus Primary menu and Footer menu that you can set up in Appearance -> Menus.

More info on how to manage menus in WordPress is available in the codecs.

Primary menu is displayed in the header section next to the logo. Each menu element has a few properties that you can use:

WP administration:

Your site:

  • Navigation label – the label that appears in the menu. It can be different form the original page title.
  • Title attribute – this will appear on hover. It is optional.
  • Description – this is the description bellow the Navigation label. It is available for sub-menu items as well. If this is not available when you first install your theme you can enable it by clicking on the Screen options button on the top right corner of Appearance -> Menus page.

Footer menu is displayed in the footer section on the left side next to the copyright text.

By default both menus – Primary menu and Footer menu will display the list of pages if you haven’t set up any menus in Appearance -> Menus. We recommend you set this up to have more control on what you display in your site.

Page templates – top

You can check out all templates in action on the theme’s Demo site, see the link in the description above. You can also check out Demo pages section bellow to see how we have build some of the pages and get the codes.
More info on what are Page templates and how to use them is available in the WordPress codex.

Here is a list of the page templates:

  • Default template – it will display the content you put in the editor and it will place the default sidebar(Sidebar Widgets) on the right.
  • Blog 1 column – it will display the blog posts from all categories and tags sorted by date in a nice way with a big image, title, meta and excerpt. It will also place the default sidebar on the right.
  • Page Contact – you can change the map, all contact info by editing this file page-contact.php.
  • Page full width – it will display the content you put in the editor. It will be full width with no sidebars. Use this page to display content full width or to widgetize it and create whatever layout you like by using custom sidebars. Here is more info on how to create widget areas in WordPress and how to widgetize a page

The following two come with the free OTW Portfolio Light plugin via shortcodes.

  • Portfolio Filterable – this template will display all your portfolio items. It will add a filter on top of it that will let your users choose items by portfolio category. It will change category listing with a cool animation. More on how to set up the portfolio bellow in the Portfolio section.
  • Portfolio Paginated – this will display all portfolio items and it will add pagination bellow. The number of items per page can be set up in Settings -> Reading -> Blog pages show at most. Note that this setting is also valid for all blog archives and the Blog 1 column page template.

Codesnippets – top

Lots of codesnippets with tons of customization options come available with this theme. Copy the HTML code, modify it and then you can paste it in any page, post or template file you like. Check out the Codesnippets page on the Demo site. Here is a list of all snippets available:

  • Welcome text
  • Info box
  • Icon links – font icons
  • Buttons
  • Dropcaps
  • Quotes
  • Tab layout – horizontal and vertical
  • Content toggles
  • Accordions
  • FAQ section
  • Services – with image, font icon or image icon
  • Table
  • Price table
  • Price boxes
  • Clients

A copy of the codes that are in the Codesnippets page on the demo site can be downloaded in a text file: codesnippets-page-codes.txt.

Layout – top

Responsive grid system
The layout is based on a 24 columns responsive grid system. This makes it very flexible and powerful. Works on all kinds of modern browsers and devices.
Here is an example of 3 columns:

<div class=”otw-row”>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
<div class="otw-eight otw-columns"><p>Column 1/3</p></div>
</div>

Here is how the responsive grid works:

  • Large screens – above 960 px – the width of the site is fixed
  • Medium – 768 – 960px – the site scales down. No content is rearranged.
  • Mobile bellow 768 px – by default it all goes in one column. You can use the mobile grid if you’d like it different.

Mobile grid
For mobiles by default the grid will make everything in one column. If you want to have more control we have made available a mobile grid too. It is based on 6 columns – allows division by 2, 3. The mobile grid has similar classes structure:

.mobile-one
.mobile-two
.mobile-three
.mobile-four
.mobile-five
.mobile-six

Header width
The header is by default full width. It can be made fixed width (site width – 960px) by adding class fixed-width in the <header> tag.
Example: <header id=”top” class=”fixed-width”>
This modification can be done in the header.php file.

Static header
By default the header will scroll with the page. You can make it always stay on top of your site and scroll the rest of the site by adding class fixed-position-menu to the page-content div wrapper
Example: <div id=”page-content” class=”fixed-position-menu”>
This modification can be done in the header.php file. The page-content div wrapper is right before the header wrapper.

Page title width
The page title will come by default with fixed width. You can make it full width by removing the class fixed-width from the page title div wrapper.
Example: <div class=”page-title-wrapper”>
This modification can be done in the header.php file. The page-title-wrapper div wrapper is right after the header wrapper.

Footer width
The footer by default comes full width. You can make it fixed width by adding a class fixed-width to the footer wrapper.
Example: <footer id=”page-footer” class=”fixed-width”>
This modification can be done in the footer.php file.

Site width
By default the theme is 960px. You can change that easily by using some custom CSS. All you need to do is set both of the following to whatever width you like:
.otw-row { width: 960px }
.fixed-width { width: 960px; }
All content is pretty flexible and should shrink or stretch normally. Just have in mind not to use too small or too big values.

Boxed layout
The theme by default will not come boxed. But it can be easily turned into boxed layout theme. In the header.php file there is an empty div wrapper right before the page-content wrapper. You need to add id=”boxed-layout” to that empty wrapper to make the whole theme boxed layout.
Once you have this set up you can do some custom css modifications on the #boxed-layout to add a custom background outside of the box, to add padding no top and bottom of your box.

Portfolio – top

When installed the theme will recommend the free OTW Portfolio Light plugin. Once you install it and activate it, it has its own custom post type for portfolio. In the left WordPress menu you will see a new tab called OTW Portfolio

Please refer to OTW Portfolio Light documentation for more info on how to set up the portfolio.

Blog – top

The theme basically works just like any other WordPress theme. Add some posts from the posts menu. Categorize them, add some tags too. Find more info on managing posts in WordPress in the codex.
Add featured images to your posts. The images will be displayed in all kinds of post lists. The images will be cropped automatically.
Once you have some posts, categories, tags the theme will automatically create archives for your posts – category archives, tag archives, monthly archives, author archives, latest posts for home page. All with sidebar on the right.
You can create a page of posts that looks a bit fancier. Create a new page, choose page template Blog 1 column and you will have a beautiful page of posts with a sidebar on the right.
You can set up how many items you want to have per page/archive in Settings -> Reading -> Blog pages show at most. Note that this settings applies for both Portfolio lists and Blog lists/archives.

Check out the Demo site for blog examples.

The theme comes with too sidebars by default – Sidebar widgets, Footer widgets. For more info on how sidebars and widgets work please refer to WordPress codex.

Sidebar widgets
This sidebar is displayed on the right side on all pages except the portfolio templates, and page template Page wide.
Footer widgets
Footer widgets is a sidebar displayed in the footer area on all pages. This sidebar works a little different than default WordPress sidebars. It will arrange widgets horizontally(one next to another) instead of vertically(one bellow another). Imagine that the footer area is divided in 4 equal boxes:

When you have your Footer widgets sidebar empty you have the boxes empty. When you drop one widget in the sidebar it displays in the first box on the left. The second widget will go in the second box. And so on.

For more control over sidebars and widgets – replacing sidebars for a set of pages/posts, setting widget visibility, as well as creating widgetized pages (custom layouts using sidebars) please refer to Recommended plugin section above. You can easily be able to tweek your theme however you like by using some of the plugins in the list.

Slider – top

Once installed the theme will install the WooSlider plugin and will ask you to activate it. Once you do you will be able to use the plugin to create slideshows and blogrolls. Bellow we will briefly show you how to use the slider in the cases we have used it for the Demo site, which basically covers most of it.
According to the WooSlider license terms we are free to distribute it with this free theme or change it however we like because it is GPL licensed. You are free to do the same. If you require further assistance or you have any issues with the slider please note that you need to contact the Woothemes and most probably need to purchase a copy so you can get support and updates. Other than that you are free to use it.

Slideshows
There is a Slideshows menu available in the WordPress left menu. You can add as many slideshows there as you like. You can also group the slideshows which we recommend. A slideshow is basically a slide that the slider can slide. A slideshow can be any HTML code. You can place images, texts, links, embed videos, etc.
Once you have the slideshows set up you can create a new page, click on Add Media, then on the Slideshows tab. In this tab choose Slides in the Slideshow Type dropdown. Then do the settings bellow, most importantly select the Slide Groups you want your slider to display. Once you are done with that click on Insert slideshow button. This will generate a shortcode based on the settings you have selected. Once the shortcode is in your page content editor, save the page and see the result.
Some examples can be seen on the Demo site under the Home menu – Business home page, Services home page and Slideshow sliders.

Here is how we have set up some of the pages on the Demo site:
Business home page
We’ve created 4 slideshows, grouped in one slideshow group. The recommended size for the images is 940x420px when you use the slider without a border around the slider(see bellow), and 930x416px when you use the border around the slider option. Here you can download an example in a txt file. This is the code we have in the content editor for the slideshows, you can modify it however you like: business-home-page-slides.txt
Then we have created a new page an inserted a slider shortcode for our slideshows group the same way as described above. You can see the code example for the business home page bellow in the Demo pages section.

Services home page
This is created just like the above example but with 2 slideshows. The content for the slideshows is just an image, a transparent png file with all the titles and images in it. You can create one like that in photoshop for instance. The recommended size for the image is 940x420px since this slider is without a border around the slider.

Blogrolls

This is when you want to create a slider that slides posts. Images that are used are the featured images for the posts. The titles used are the post titles. And the text used is the post excerpt text.
To create a slider like that create a new page, click Add Media button, go to Slideshows tabs and select Posts in the Slideshow Type dropdown.
Some examples can be seen on the Demo site under the Home menu – Blogroll home page and Blogroll sliders.

Border around the slider

To add the border around the slider you need to add id=”bordered-slider” in the slider shortcode.
Example: [wooslider slide_page=”business” slider_type=”slides” limit=”4″ id=”bordered-slider”]

Customization
We have kept the original slider files unmodified so it can be easily updated. In the folder \sliders\flexslider-custom\ we have added our custom stuff that overrides the original files to get the styles needed for our theme. There are a few images and a css file.
If you decide to further customize the slider we recommend you do your customization only by using CSS. Insert your CSS codes in the custom.css file. Then you can keep the original slider files, our modifications unchanged and still have your changes.

Demo site pages – top

Here are the codes and a little details on how we have created some of the pages on the Demo site:

The rest of the pages on the Demo site have a page template you can use when creating a new page or have a template with auto-generated content like post archives.

Theme customization – top

Custom CSS
To add custom css we recommend you edit the custom.css file. This can be done in Appearance -> Editor -> custom.css. Keep a copy of that file before you update your theme so you don’t loose the changes on update.

Change logo
The logo can be changed from the interface in Appearance -> Header.

Upload fav icon
You need to add the following line in your header.php file:
<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/favicon.ico”>
Where /images/favicon.ico is your fav icon file uploaded in the images folder of the theme.

Change copyright text
The copyright text can be edited in the footer.php file.

Contact page – how to edit the info
See the Page Templates section -> Page Contact.

Theme URLs
To have nice URLs you can set them up in Settings -> Permalinks -> Custom settings. We recommend you use Post name.

Enable page/post/portfolio sub-titles
When you add or edit page/post/portfolio there is a metabox called Page title settings. If this is not visible enable it from Screen options button on top right corner of the page. Then enter the sub-title in the field. It will be displayed in the Page title area right next to the page title.

Hide page title area
When you add or edit page/post/portfolio there is a metabox called Page title settings. If this is not visible enable it from Screen options button on top right corner of the page. If you want the whole page title area hidden check the checkbox.

How to set up a home page
Create a page and then go to Settings -> Reading. Choose A static page under Front page displays, then select a page in the Front page dropdown.

This will make your page a home page for your installation and it will remove the breadcrumb bellow the header.
You can also remove the whole page title area – see “Hide page title area” above.

Sidebars and Widgets management
Check out the Recommended plugins section above.

Create post lists
Check out the Recommended plugins section above.

Localization/Internationalization – top

This theme comes Localization/Internationalization ready. It is following WordPress I18n standards.

Source and credits – top

Scripts, plugins, icons, fonts
– Foundation framework – http://foundation.zurb.com/
– HTML5 Shiv – http://code.google.com/p/html5shiv/
– jQuery – http://jquery.com/
– jQuery UI – http://jqueryui.com/
– Footable – https://github.com/bradvin/FooTable
– WooSlider – http://www.woothemes.com/products/wooslider/
– Tinynav – http://tinynav.viljamis.com/
– Jquery animate shadow – http://www.bitstorm.org/jquery/shadow-animation/
– Quicksand – http://razorjack.net/quicksand/
– Fonts – Open Sans, Open Sans Condensed – http://www.google.com/webfonts

Images used for the Demo site
– http://dribbble.com/shots/443234-MDH-Macro-Eye-II
– http://dribbble.com/shots/408941-Nova
– http://dribbble.com/shots/343232-Magnetic-Ball-s
– http://dribbble.com/shots/497193-Metalflowers-Teaser
– http://dribbble.com/shots/514052-Scratch-Reflex-Out-of-Doom
– http://dribbble.com/shots/594945-Metalflowers-A-very-short-film
– http://dribbble.com/shots/588139-SameMistake-de-Soon
– http://dribbble.com/shots/477901-Head-React
– http://dribbble.com/shots/464838-Icefall-Teaser-Upcoming-AV-Project
– http://dribbble.com/shots/485626-Not-a-vCard
– http://dribbble.com/shots/508922-Arrows
– http://dribbble.com/shots/625703-Type
– http://dribbble.com/shots/346307-MDH-Stadt
– http://dribbble.com/shots/313083-CG-Reality
– http://dribbble.com/shots/313083-CG-Reality
– http://dribbble.com/shots/238763-Angry-String
– http://dribbble.com/shots/234282-Max-4-Live
– http://dribbble.com/shots/618595-Torch
– http://dribbble.com/shots/515629-April-Bird

Spread the word, like and share – top

If you like this theme please don’t forget to spread the word, like it, share it so other people can try it too. Thanks in advance!