Documentation Page Also Available in Colours

Hello Mate,

Please see these documentation files, and look at the actual code in the editor in WordPress admin. These are the output created by some of the short-codes created in this theme. First, this is a link

Columns

Lets first look at the columns. There are three different templates in our theme. You may find them while creating pages in the WordPress admin. Look right, after the publish options block. You will see Page Attributes , from where you may choose the template. All your pages usually outputs in a default template, which is displayed in –content– –sidebar– manner, which means it will have its content section and a side bar. However, it is recommended to publish your pages in fullwidth page, as you will be able to utilise the whole area while creating less interference with the sidebar content, which is usually used by your blog posts. Leave the WHMCS template intact, and do not use them in your pages or posts, as it is specifically hand crafted for the WHMCS client area.

Now coming back to columns, I have created three types of column lay outs for you.

Two Columns One

You can accomodate two two columns blocks in a fullwidth page like this, but is not possible to hav the same effect in the blog template, as it uses content sidebar layout, and there is not enough space to accomodate this. This is an example of a two column block. Please look at the code for a sample. You can also insert images into these areas, and they automatically scaled down to fit the size the column they are placed in. Have a look at the next column for a sample.

Two Columns Two

484973_10151487913763676_1046634708_n

Three Columns Layout

In a fullwidth page, you can have three three columns (3 x three-col), and two three columns (2 x three-col) in a default template. This is an example showing three three column layouts in a fullwidth page

Three Columns Layout

In a fullwidth page, you can have three three columns (3 x three-col), and two three columns (2 x three-col) in a default template. This is an example showing three three column layouts in a fullwidth page

Three Columns Layout

In a fullwidth page, you can have three three columns (3 x three-col), and two three columns (2 x three-col) in a default template. This is an example showing three three column layouts in a fullwidth page

Four Columns Layout

Now, lets see how four columns differ in this case. You can have four of this type in a fullwidth page, and three of them in a default template, which is in blogs. Images are automatically aligned to meet this columns and arranged accordingly.

Four Columns Layout

Now, lets see how four columns differ in this case. You can have four of this type in a fullwidth page, and three of them in a default template, which is in blogs. Images are automatically aligned to meet this columns and arranged accordingly.

Four Columns Layout

Now, lets see how four columns differ in this case. You can have four of this type in a fullwidth page, and three of them in a default template, which is in blogs. Images are automatically aligned to meet this columns and arranged accordingly.

Four Columns Layout

484973_10151487913763676_1046634708_n

 Now Lets see some mixings

Two Columns One

You can accomodate two two columns blocks in a fullwidth page like this, but is not possible to hav the same effect in the blog template, as it uses content sidebar layout, and there is not enough space to accomodate this. This is an example of a two column block. Please look at the code for a sample. You can also insert images into these areas, and they automatically scaled down to fit the size the column they are placed in. Have a look at the next column for a sample.

Four Columns Layout

Now, lets see how four columns differ in this case. You can have four of this type in a fullwidth page, and three of them in a default template, which is in blogs. Images are automatically aligned to meet this columns and arranged accordingly.

Four Columns Layout

Now, lets see how four columns differ in this case. You can have four of this type in a fullwidth page, and three of them in a default template, which is in blogs. Images are automatically aligned to meet this columns and arranged accordingly.

You can always use the separator short code (see the page in WordPress admin) to make a division anywhere in the page

Colours

Now some stuffs you already know about. Using different colours in this theme is very easy. This theme natively support three colours – Green, Blue, and Orange

You can always use these Colours in long or short headings as well

Tick List Green

  • This is a list item
  • This is another list item
  • Short list
  • Another very long list item
  • Another example here

Tick List Gray

  • This is a list item
  • This is another list item
  • Short list
  • Another very long list item
  • Another example here

Arrow List Green

  • This is a list item
  • This is another list item
  • Short list
  • Another very long list item
  • Another example here

Arrow List Gray

  • This is a list item
  • This is another list item
  • Short list
  • Another very long list item
  • Another example here

Using Theme Buttons in the Page and blogs, and more importantly, generously anywhere you want them!

You can use our theme based buttons anywhere you want them, inline, blocks, tables… You name it. You can even include them in the text widget using this short code. So, the choice is always yours. I have included both Green and Blue buttons, but have deliberately avoided the gray buttons, as it wont go well with the them content and inline stuffs. Here is some example. Please look at the page content in the WordPress backend for more information on this short-code.

I am going to show you how to use the green button anywhere in your website. Go to Google Now. Now this is green, and this is what a blue button looks like Go to Google Now.

I also have small buttons. Go to Google Now. Now this is green, and this is what a blue button looks like Go to Google Now.

This is a Large Call To Action in Blue

This is a Large Call To Action in Green

So finally, this is how buttons in pages looks like

This is a Large Call To Action in Blue
This is a Large Call To Action in Green
Normal Blue Button
Normal Green Button
Small Blue Button
Small Green Button