By content Column, I mean the portion of your theme that will hold all the post text and comment text. The other columns will be sidebar and additional sidebar. Other columns will have their own typography setting so this should not be confusing.

You can format all headings (h1, h2, h3, h4,h 5..) , links (visited, active, hovered), un-ordered lists, quoting style etc.

1. In themebuilder, open content column
2. Click on More options tab
3. You can select a pre-defined typography style from typography button. These typography styles can be used for both simple and dark colored themes.
4. You can also apply your own typography to content elements. Whatever manual style you’ll apply, it will override the previous style.
5. To define your custom typography styles, click on Manual Typography button.
6. In the opened pop-up box, Click on the element from left side.
7. In the right box, select appropriate formatting settings and save changes.
8. Your formatting will be applied on the content column.

Click on the following picture to view a full screenshot of typography formatting

Video Guide to this tutorial

Lets get started

In this tutorial we’ll add few home page widgets to customize our home page. By default home page have the same look as the archive pages does have. You need to first enable home page customization. Follow these steps

1. Go to home page tab and enable home page customization.
2. After checking this box, all of home page sections will be cleared out.
3. Now you need to add a default archive listing style. You can skip this widget if you don’t need it. It will simply display most recent posts like the archive pages does.
4. Now we’ll add a content slider. Click on Content Sliders button and then horizontal content slider.
5. In the opened pop-up, enter the widget name as you always need to name your widgets. This is important for back-end administration.
6. Select a slider style and hit Add Widget button
7. The slider will be added to your home page
8. Now we’ll add a heading (Welcome to WPThemeBuilder). Click on Add Heading button and add your text.
9. Now we’ll add a text widget and display an introduction text to this widget. You can write text now or later. It is editable and you can always change its content.
10. After adding the text widget simply drag it and place it below the heading at a proper location.
11. You’re done

Video Guide for ThemeBuilder Custom home page

Now we need to administrate

Once theme is built and activated on your wordpress installation, you can edit the setting and contents of widgets we add previously.

1. Go to Theme options pages.
2. Click on Home page widgets to list all of your widgets added on theme home page.
3. Find out your text widget with its name. And edit its content then save it.
4. Similarly find out the slider content widget settings by its widget name you used previously.
5. You can add/remove slider sections as many as you want with a rich text editor.
6. Save and view the changes on your theme pages.

Video guide for administrating the widgets

WPThemeBuilder have a list of pre-defined comment styles. All you have to do is to select a style that match perfectly with your theme coloring.

To change the comment styles

1. In WPThemeBuilder, go to Content Column tab
2. Click on More Options tab in right
3. Click on Comment styles button
4. Select a comment style from dropdown list. You can also click previous or next buttons to preview the comment.
5. Once you’re done with selection, simply click on apply style button.
6. Your’re done, new comment style will be visible in your content column.

Video Guide

By default the resizing panels are not visible and you have to mouse over on very left or right corner of sidebar to re-size it. Similarly very bottom of theme header to re size it.

To Resize with the visual resizing panels,

1. In WPThemeBuilder, go to Addons tab
2. Click on Show/Hide Resizing Panels button
3. You’ll see a yellow border below the header and with the sidebar.
4. Drag these yellow borders to increase the height of your headers. You can drag up/down
5. Increase/decrease the width of your sidebar or content column by dragging the yellow resizing panels left or right side.

You can add/remove as many widgetized sections as you want above or below the static sidebar but the default static sidebar will not be widgetized and display widgets added through WPThemeBuilder

In order to widgetize your sidebar so you can add/remove widgets from wordpress widgets page, follow these steps.

1. Once you’ve installed and activated the theme go to Theme Options page
2. In the main setting panel, click Yes in front of Widgetize default sidebar? option. (by default it is always no)
3. Now your sidebar is widgetized and you can add/remove widgets from wordpress widgets page.
4. You can also reverse this action by selecting No and the sidebar will again show the widgets you added though WPThemeBuilder.

Here is a screenshot of it.

• Theme Header
• Theme Footer
• Theme Content Wrapper OR Theme Overall Wrapper

You can make them rounded corners easily with few clicks and make your theme looks more beautiful.

Compatibility Level

Rounded Corner option is compatible with all browsers. The browsers which support CSS3 will use a CSS3 rule and the browsers which does not support CSS3 will use a jQuery library called Curvycorners.  Hence the rounded corner option is supported for all browsers. (Note: jQuery library will only be loaded on non-CSS3 compatible browsers).

Creating Rounded Corners

1. Open ThemeBuilder from your profile page.
2. Apply some background effect in theme body tab so we can see how rounded corner will look like.
3. Select a container element, (e.g we have selected container which will contain everything including header, sidebars, content column and footer).
4. Now Select on More tab and then click on Rounded Corners button.
5. Now select a corner radius and if you don’t want a corner to be rounded simply uncheck it and hit Apply Rounded Corners.
6. Give some border and background color to the container.

You can also round the corners of header and footer. Similarly you can create different sets of rounded corner elements by enabling/disabling corners effect on different borders. You can round all corners or just 2 corners and so on. This option is very much flexible.

Video Guide