Cloud Hoster WP Documentation


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please open a ticket describing your problem here. If you send an email with your problem you will be redirected to forum. Thanks so much!


Current Version: 1.1.0
WP Compatibility 3.5+
Created: 22-05-2013
Modified: 24-08-2013

Info: Only theme instalation is described. You need to have WordPress uploaded to your server, inastalled and working properly. If you need help installing WordPress, server or database setup etc. please visit this guide.

Upload via WordPress

This is the preffered method of instalation. Follow instructions below to install theme in your WP instalation.

  1. Unzip archive file that you have downloaded from themeforest. Inside you will find the cloudhoster-wp-X.X.X zip archive. The X.X.X will be the number of current version.
  2. In WordPress login to your armin panel. Go to Appearance Themes Install Themes Upload
  3. Follow instructions on screen: Choose the cloudhoster-wp-X.X.X zip archive and click Install Now button.
  4. Wait untill theme is uploaded. You will see Theme installed successfully message
  5. Go to Appearance Themes and click Activate below the new uploaded theme.

Upload Via FTP

If for some reason you cannot get the first method to work use this method instead (use only if necessary)

  1. Unzip archive file that you have downloaded from themeforest. Inside you will find the cloudhoster-wp-X.X.X zip archive. The X.X.X will be the number of current version. Unzip it to a folder with the same name.
  2. Use FTP program to log into your FTP account
  3. Browse to wp-content/themes
  4. Upload unzipped folder (not zip archive, but unzipped folder)
  5. In WordPress login to your armin panel. Go to Appearance Themes
  6. Under the new uploaded theme hit Activate link

Installed Theme

Installing plugins

When you activate the plugin you will be noticed about plugins that are needed for proper theme work. Click Begin isntalling plugins See the image below:


Installing plugins

  1. Select all plugins
  2. Choose Install and click Apply

Installing plugins


Installing plugins

After all plugins are installed go to Plugins and activate all plugins.



Info: XML demo content file is located in your downloaded cloudhoster-wp-theme zip archive. After unzipping the archive you can find it in the Demo Content folder. It is a one XML file. Demo content does not contain images and photos.

If you would like to get started fast a good idea is to import the Demo Content. It will provide you the content used in the demo page making your site look almost identical like the demo page. That will make your job easier as you will not have to set up everything by yourself but you will be provided with content that you will just have to modify/change.

To import Demo Content go to Tools Import WordPress. You will be asked to install a plugin. Click Install Now button. After the instalation is complete click Activate Plugin & Run Importer link (you can also get to the importer via Tools Import WordPress).

Choose the cloudhoster-content.xml file and click Upload file and import button. On the next screen you can asign (or create) authors to pages and posts. After you are done click Submit button.

After import is complete you will have one unnecessary page - Sample Page that was created by wordpress instalation. Simply open it and delete/move to trash.

To import the slider demo contetn go to Revolution Slider then create a new slider called homepage. Click on the new created slider and in its settings search for the Import Slider setting. Click choose file and choose the revolution_slider.txt file located in your Demo Content folder.


Info: This describes creation of Main Menu. On the top of page you have a darker bar that is a container for Top Menu. Top menu is a place for phone, support, mail, tickets, login to your services and mobile navigation links. Creating top menu is described later in theme options settings.

First go to Apperance Menus. In the Menu name input field write a name - for example main-menu - and click Create Menu. On the right in Theme Location Panel select from list your menu you have just created and click Save. In the Pages panel select all pages you want to add to you menu and click Add to Menu. Now that you have them added simply drag them arround to set them as you like.

Info: Menu for mobile devices is created automaticaly. You do NOT need to make any extra steps for mobile navigation.

Any top menu level navigation item can have an extra subtitle. You enter the subtitle in Description field of any top level menu item. For example you can create an item that says HOME and give it a subtitle of welcome. This would display like this:








Rows

Before you insert any content you need to create place for it. Create a row.


[row]
    
[/row]

Columns

Then you need to specify how much of space in this row your content should take. Any other shortcodes like alert boxes, tables, accordions etc will take up the space you specified by the column. Options you have makes you choose between: full width, half, one third, one fourth, two thirds, one sixth and three fourths.

You can for example choose your content to take half of space on the screen and two times one fourth (which would add to a whole). You can choose for example two halfs etc. You can mix and match the shortcodes but always remember that the space must add to ONE in a row. After you're done begin a new row.

  • [full_width] takes up the entire width
  • [one_half] takes up half of the screen width
  • [one_third] takes up third of the screen width
  • [one_fourth] takes up a quarter of the screen width
  • [two_thirds] takes up 2/3 of the screen width
  • [three_fourths] takes up 3/4 of the screen width
  • [one_sixth] takes up 1/6 of the screen width

Whatever shortcodes you use to devide your space on the page always remember to close the shortcode just the same way you opened it but with a backslash.

Example: You opened a shortcode [full_width]. Enter the content and close this shortcode by [/full_width]

Info: It's always a good idea to open and close a shortcode before you enter the content just so you don't forget it. So just start it, close it and then you are free to put anything you want inside.
[row]

[one_half]
This will take half of the screen. Remeber to close the column with the same shortcode you opened it but with a backshash at the beginning like so
[/one_half]

[one_half]
This will take the other half of the screen. This row is full so let us start another one.
[/one_half]

[/row]

[row]

[one_half]
No we started another row. This will take half of the screen.
[/one_half]

[one_fourth]
This content will just take a quarter of the screen width.
[/one_fourth]

[one_fourth]
This content will just take a quarter of the screen width. Now we have a full row. We can start another row.
[/one_fourth]

[/row]

You probably noticed there are some sections on the demo page that have blue background. For the blog page that is done automaticaly for every second post. As for the pages you of course need to tell WordPress where do you want this blue section to exist.


IMPORTANT: If you are not using two color page and you want everything to be on white background do not use those shortcodes. Just simply insert [row] etc. without wrapping it with any extra shortcodes just as shown above.
To create those blue/white pages you need first select the proper page template. If you don't doo that it will create extra containers and mess up the looks! More on page tamplates later but for now just know you need to select a Two color page template in order to make this work.

Everything you learned about rows and containers still apply. Just before you enter a row and its columns you need to tell weather it should be displayed on white or blue background. To do that wrap any content in [white_section] and [blue_section] shortcodes.


[white_section]
[row][full_width]
this will be on a white background
[full_width][/row]
[/white_section]

[blue_section]
[row][full_width]
blue background
[full_width][/row]
[/blue_section]

[white_section]
[row][full_width]
white again
[full_width][/row]
[/white_section]

To create a button use [button] shortcode. To specify the link add to attribute.

You can also specify the size attribute and set it to: small medium or large to determine how big the button will be.

style attribute lets you choose between a simple button or a shiny button that has a gradient background and boder and looks a little more fancy.

The last attribute you can add is pull which specifies if the button is floating to the left or right by pull-right or pull-left

Please note that all of those attributes are optional except to attribute. If they are not set the default button will be shown which is a simple, medium sized button with no float.

[button to="http://google.com" size="small" style="simple"] I am a simple small button that takes you to Google site when clicked! [/button]
[button to="#" size="medium" style="shiny"] I am a shiny medium sized button leading nowhere. [/button]
[button to="servers" size="large" style="shiny" pull="pull-right"] I am a shiny large button that goes to servers page on your site and I am pulled to the right. [/button]

This embed supports: YouTube, Vimeo, Blip.tv, Viddler and Kickstarter videos.

Jsut get the video embed code from the video (most likely it will be an infame code) and pull just the link from it (in the src attribute). Then use this link in the link attribute of video_embed shortcode.

You do not need to close this shortcode!

Remember to insert only the link from the iframe. Video will be fitted automaticaly.

This is the embed code from Youtube video:

<iframe width="560" height="315" src="http://www.youtube.com/embed/upVxefN5nWQ" frameborder="0" allowfullscreen></iframe>
Just use the src link:

[video_embed link="http://www.youtube.com/embed/upVxefN5nWQ"]

Create an unordered list just as you would normaly do with WordPress and wrap it with [ul]shortcode with style attribute set to one of four to choose from:

  • check for a list with ticks
  • star for a list with stars
  • arrow for a list with arrows
  • bullet bor a list with bullets

If you do not wish to have any special style for your list simply do not use this shortcode. Your list will have standard browser bullets then.

List with stars example:

[ul style="star"]
<ul>
    <li>List item with a star</li>
    <li>List item with a star</li>
    <li>List item with a star</li>
    <li>List item with a star</li>
<ul>
[/ul]

To enter an alert box use [alert] shortcode. To determine the style of alert you can use the style attribute. You have four styles to choose from:

  • info for blue information box
  • success for green success box
  • warning for yellow/orange warning box
  • error for red error box
Example success box:
[alert style="success"]
    <strong>Success!</strong> <p>Account created!</p>
[/alert]

Example error box:
[alert style="error"]
    <strong>Fafal Error!</strong> <p>Terrible, terrible damage!</p>
[/alert]

Accordion is typicaly used for Q/A secion. This makes it a little more complex shortcode since you need a question and an anwser that are not only connected to each other but also connected to a specified accordion as a whole (since you can have multiple accordions on one page). Don't worry though - we'll get this bad boy down in a notime.

First lets make a container for you accodrion. Use [accordion] shortcode. If you are using more than one accordion on a single page you need to add an ID to it. Do that by adding an id attribute and give it a unique name of your choosing. If you are using single accordion you can omit it.

Now we can start adding accordion entries. For each Q/A use [accordion_entry] shortcode with attributes:

  • state optional and added only when you want the anwser to be opened. Set to opened if you do. If you want it to be closed omit it
  • q for the question (title) of accordion
  • id if you have more than one accordion on a page and you given the accordion container an ID use the same ID here to connect this accordion entry to that container. If you are using single accordion on a page you can omit it.
After you are done you can put the answer inside the [accodrion_entry] shortcode. See the example on the side.
Accordion container:
[accordion]
    your content goes here
[/accordion]

Accordion with entries:
[accordion]

[accordion_entry state="opened" q="Does this one should be opened?"]
Yes because it has a state attribute set to opened.
[/accordion_entry]

[accordion_entry q="So this one is closed right?"]
Yes it is.
[/accordion_entry]

[accordion_entry q="Why you do not use the ID attribute here?"]
There is only one accodrion on this page so it is not necessary. If you have more then add to each entry the id you have specified in the [accordion] container to link it to that container.
[/accordion_entry]

[/accordion]

Start with a container ot the tab. Ad [tab] shortcode.

Insider you need two more containers: for navigation and body (content). Add [tab_nav] and [tab_body]

Now you are good to go. Time to add some content. First let's add some navigation. In the [tab_nav] add the first link. Use [tab_link] with id attribute set to unique name (you will use that name to link this tab with it's content). Remember that for every link you need a new, unique name lo link it to new unique content.

There is no need to overcomplicate the id's. Just use simple names like: tab1, tab2, tab3 etc. for you own convinience.

If you want the tab to active (opened) add state attribute and set it to active. Otherwise you can omit it. Inside the shortcode add your link name/title.

No when we have the link it's time to create come content for it and connect this content to that link. In the [tab_body] shortcode add [tab_content] and place your content inside it. As previously you should add the id attribute and match it with the id you gave the link. If you previously set the state attribute to active do it here as well. Otherwise you can omit it.

Add container and inside add navigation and body containers:
[tab]
[tab_nav]
    navigation links goes here
[/tab_nav]
[tab_body]
    content linked with links goes here
[/tab_body]
[/tab]

Time to add some content:
[tab][tab_nav]
    [tab_link id="tab1" state="active"]Is this one active?[/tab_link]
    [tab_link id="tab2"]Why there is no state here?[/tab_link]
[/tab_nav]
[tab_body]
    [tab_content id="tab1" state="active"]Yes because it has active state attribute.[/tab_content]
    [tab_content id="tab2"]No need. This one should be closed.[/tab_content]
[/tab_body][/tab]


Remember that (just as with any element) you can control the width of a pricing table by columns width. So for example a pricing table in [one_third] will take up 1/3 of width making you put for example 3 tables in a row (or for example 2 tables that takes up together 2/3 of space and you can put some other content in the remaining space)

As with any element start with a container - [pricing_table] with attributes color to set one of three colors: green, blue or black. If you don't specify it it will be default color which is blue. You can also add an optional attribute state and set it to featured to make the table stand out a bit (it will be set highet than others).

No inside add [pricing_content] shortcode for content. Set it's attributes as follows:

  • title for the name of pricing plan
  • subtitle for extra info like "best plan"
  • price to set price (add the currency also for example 99$)
  • price_subtitle to set extra info on price like "per month"
  • icon oprional and if set to cloud will add a cloud icon to table header

When you are done just add an unordered list inside. Each list item is an item in the pricing table. Also remember to add some Call to Action at the end for example a button (you can use shortcode of course)

Start with container (green and featured in this example)
[pricing_table color="green" state="featured"]

[/pricing_table]

/Add content:
[pricing_table color="green" state="featured"]
[pricing_content title="Sweet treat" subtitle="mix of candies" price="5$" price_subtitle="for 100 grams"]
<ul>
    <li>Gummy bears</li>
    <li>Chocolate candies</li>
    <li>Landrines</li>
    <li>Razins in chocolate</li>
</ul>
[button to="#"]Buy now![/button]
[/pricing_content]
[/pricing_table]


Well can be used as a box to bring user attention. You can add any content inside a well.

If you want us bring any element to left or right in a well (for example pull button to right of the well while the text stays on right) use pull-right or pull-left on the element inside the well.

[well]
If you need a custom plan just write to us:
[button to="/contact" pull="pull-right"]Get a custom plan now[/button]
[/well]

For a feature box use a [feature_box] shortcode. Any content can go inside.

[feature_box]
<img src="some-image.jpg" />
<h1>Website hosting</h1>
<p>Lorem ipsum dolor sit amet, cons ectetur adipisicing elit. Ipsam eos iste vel fuga laboriosam deleniti comodi.</p>
[button to="#"]View our hosting[/button]
[/feature_box]

For a testimonial box use a [testimonial] shortcode. You can add by attribute to set the author of the testimonial. If you add an image make sure it goes first inside the shortcode. It will be det automaticaly on the left side of the comment. Any content can go inside.

[testimonial by="John Doe, Awesome Inc."]
<img src="testimonial-picture1.jpg" width="140" height="140" />
The Service here is great. I would highly recommend Cloud Hoster to anybody wanting their own domain and webpage.
[/testimonial]

If you would like to display a row of images - weather it is a set of logos of you customers, technologies you use or just a set of your work images - use the [logos] shortcode.

Inside just put an unordered list of your images.

[logos]
<ul>
    <li><img src="/logo1.png" /></li>
    <li><img src="/logo2.png" /></li>
    <li><img src="/logo3.png" /></li>
    <li><img src="/logo4.png" /></li>
</ul>
[/logos]

To display a raound background and an icon on it use a [round_icon] shortcode with a icon attribute set to one of over 300 icons you can find in the Font Awesome collection. So for example to display a cloud icon use icon="icon-cloud"

You can find the full list of icons and attributes to use the icons here Font Awesome Icons

Example of cloud icon:
[round_icon icon="icon-cloud"]

Choose between a light and dark color theme. After you choose Save the setting.

Setting logo

Post Format: Standard. Setting Featured image.

On every post you create you have post formats on the left to choose from. A Standard post format is for a normal blog post - like an image and text. You also have Quote, Link, Gallery, Video and Chat post formats which we'll describe later on. If you want to insert an image that will be a featured image and will act as a link to this post you have that option in the right bottom of the screen. Also please remember that you can set featured image for any post format you wish.

Post formats Featured image

Post Format: Quote

Select Quote on the right panel and in the content area add a blockquote wit the quote. You can add a cite inside it to specify who said it. You can also add a featured image if you want.



<blockquote>“Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn’t really do it, they just saw something. It seemed obvious to them after a while.”
<cite>Steve Jobs</cite>
</blockquote>                 

Post Format: Video

Select Video on the right panel and in the content area add a [video_embed] shortcode with a link attribute pointing to the iframe source. After that you can add any text you wish to describe the video if you want. You can also add images or a featured image if you want.



[video_embed link="http://www.youtube.com/embed/hsEUBLIJvmE"]
Clearly amazing. The quad-core A5 chip delivers even more power. The laser projection keyboard liberates your thumbs. The new iClear Retina display presents sharp graphics and stunning images.      

Post Format: Link

Select Link on the right panel and in the content area add a link with an a tag. After that you can add any text you wish to describe the link. You can also add images or a featured image if you want.



<a href="http://themeforest.net/"> ThemeForest - Premium Mobie, HTML and WordPress Themes</a>
<p>ThemeForest is an Envato Marketplace. At ThemeForest you can buy and sell HTML templates as well as themes for popular CMS products like WordPress, Joomla and Drupal</p>           

Post Format: Chat

Select Chat on the right panel and in the content area jsut write each statement in a separate line. It will be autamaticaly transformed into a chat psot. You can also add a featured image if you want.



Just select the chat post format and write a post  - each line will be transformed in a separate statement.

No Way! It cannot be that simple!

It sure is...          

Default template

When you create a page you can choose a template for it. Default template is for a standard page with white background. You will probably use it at most of your pages.

Two Color Page

Two color page template is used when you want the page to be separated in white/blue blocks. When you select this template you will use shortcodes to specify what background you want to use. See above in the shortcode section to learn more.

Contact template

Contact template is used for contact page. It has built in contact form, google map and contact information. You can specify those in theme settings. You can also add standard text on this page.

Left/Right sidebar template

This is practicaly a standard template page with a left or right sidebar. You can add content to sidebar in the widget section. Because it has sidebar it is obvious that this page can only be white - not two color white/blue page.

Featured image

Setting up the slider

Slider will show up on the page you set to be displayed as a home page in wordpress settings. Start by going to Slider Revolution tab on the right of wordpress admin panel and click the Create New Slider button.

Info: You are free to use slider revolution in any way you wish. Below I am going to give you preffered settings that makes it look best in my opinion and to look just as in the demo. Go ahead and experiment with it to get nice, different results.

Fill the slider basic settings as follows:

  • Slider title: homepage
  • Slider alias: homepage
  • Slider type: Full Width
  • Grid Width: 940
  • Slider Max Height: 350

Click Create Slider. You will be redirected to sliders list. Click the name of slider we have just created. We need to set some more things here before we start. On the right you have some tabs. Set thigs as listed below:

  • Apperance tab Shadow type - no shadow, Show Timer Line - hide, Background color - select the color and click delete to set it to transparent, Padding (border) - none
  • Navigation tab Navigation Type - none, Left Arrow Horizontal Offset - 0, Right Arrow Horizontal Offset - 0

After you are done click Update Slider in the left bottom corner.

Creating slides

Now it's time to create some slides. Click edit slides and on the new page that openes New slide

Choose an image to start with. Click edit slide. The image we have choose have been set as a background. In this example I am not using background so in Slide Image and Layers: I will choose Transparent BG. Now you are free to add layers, text, images and other elements to the slide. Drag them around and set them as you wish. You can set transitions and delays for each element. Create as many slides as you wish.

Featured image

Footer newsletter

Info: This plugin was automaticaly installed and activated when you installed the theme.

For the newsletter we are using the most popular service - MailChimp. If you don't have an account go to maichmp site and create one - it's free. After that create a form with single field and single button to subscribe. You will find instructions hopw to do that on mailchimp site.

Got to Appearance Widgets. On the right you will find a place for the newsletter widget. Drag the Mailchimp widget over there. Next go to Settings MailChimp Setup and enter your Mailchimp API code. After that simply choose you form from the list. Now your newsletter is working and it is connected to your mailchimp account.



Featured image