Version 1.4 · Updated on January 22nd, 2014 by Serifly
Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please don't hesitate to send me a message via the user page contact form.
This theme is using the newest HTML5 and CSS3 standards and will therefore not work with Internet Explorer 6. Everything up from Internet Explorer 7 and all major browsers like Firefox, Safari, Chrome and Opera have been tested successfully. It is however possible that minor glitches will appear in older versions of these browsers. The functionality however should always be given. Please also keep in mind that a few visual effects were made in CSS3 so the viewing experience might differ in older browsers. This theme will furthermore only work with Wordpress 3.4 or higher.
Please be extra careful when updating to a newer version of this theme and only do so if it includes something you require.
In order to install this theme you must have a working version of Wordpress 3.4 already installed. For information on how to install Wordpress please read the codex http://codex.wordpress.org/Installing_WordPress.
Use a FTP program of your choice to upload the non-zipped folder "rackhost" from the theme package to "/wp-content/themes/". After that just navigate to "Appearance → Themes" and activate the theme.
Navigate to "Appearance → Themes → Install Theme → Upload", click on "Choose File" and choose the file "rackhost.zip" from the theme package. If the upload and installation was successful you will be able to activate the theme instantly.
Please note that the theme will look quite empty with the placeholder content provided by Wordpress. Don't worry though, as long as you follow this guide it will look exactly as in the theme preview.
At first navigate to "Appearance → Theme Options → General" in order to set up some basic information about your new site like logo, twitter profile and footer text.
In the next step we can already set up the content slider for the homepage. Switch the category to "Content Slider", upload your slides, insert its full size and enter the features of your plans. You will have to come back to link the buttons to your correct product pages later. For now we need to enter a placeholder like "link" in the text boxes so the buttons will show up. If you are unsure what to put, just have a look at the screenshots and you should get an idea. The pricing label should not be more than two words.
If required you can already set up the support navigation used in the content header, via widget and shortcode. You are required to provide links as well or otherwise the support items won't be displayed. Put a placeholder if you don't have the correct links yet.
The category "Styling Options" gives you a few possibilities to easily change the appearance of the theme.
Navigate to "Pages → Add New", insert a title and choose the template "Home" from "Page Attributes". Content is not required yet so just click on "Publish".
If you however want you can import the content seen in the theme preview. Navigate to the folder "templates" in the theme package folder and open the file "home.txt", select all and copy the content to your clipboard. Change the edit mode of Wordpress from "Visual" to "HTML" and paste the selected text from the template file into the text field. After pressing "Publish" you should see the same page layout as provided in the theme demo. Don't forget to switch back to the edit mode "Visual" and start entering your own content.
Now we have to tell Wordpress that this is the new homepage. Navigate to "Settings → Reading" and select the page you just created under "Front page displays" as a static page. Entering the base url of your Wordpress installation should now show the page you just created.
You will see some empty spaces if you didn't set up the slider and support navigation yet.
Again navigate to "Pages → Add New", insert a title and choose the template "Full Width" from "Page Attributes". Insert your own content or repeat the step of importing a template as described before.
Add a new page and this time choose the template "Default Template" from "Page Attributes". This template will display the sidebar "Page Sidebar" which can be set up in the widget area of your Wordpress installation.
Navigate to "Pages → Add New", enter a title and choose the "Default Template" from the "Page Attributes". Navigate to "Settings → Reading" and select the page you just created under "Front page displays" as a static page to show your posts.
If you want to customize the sidebar used for the blog, navigate to "Appearance → Widgets" and set up the "Main Sidebar".
To create a contact page navigate to "Pages → Add New", enter a title and choose "Contact" from the "Page Attributes". All content entered on this page will be displayed above the contact form.
Now that we created a few pages we can set up the navigation. Navigate to "Appearance → Menus" and create a new menu. Add the pages you want for the main navigation excluding the homepage. Now click on "Screen Options" in the upper right corner and check "Description" under "Show advanced menu properties" and enter a description for each element. This description will be shown as a subtitle so keep it short. Finally we just have to select our new menu as "Primary Menu".
If your menu has a lot of drop down items you should create another smaller menu which we can use in the next step for the large footer.
The large footer shown below the content area can be set up in the widget options. Navigate to "Appearance → Widgets" and add a "Custom Menu", the "Support Navigation" and a "Text" widget to the sidebar called "Large Footer".
Please contact me if you have any more questions or problems setting up your site and I will be happy to help. Please remember that support requests may take a day or two for me to read and reply.
To create a new page navigate to "Pages → Add New", insert a title and choose the template you want to use.
The default template should be choses for your blog and every content page you want to display the "Page Sidebar" on. Please be careful when choosing the column sizes. The columns won't be adjusted when a sidebar is used, meaning "small" should be used instead of "medium" when you need to columns.
You always have to choose "Full Width" if you want to display pricing tables as they are not working with a sidebar. No sidebar will be called when using this template.
Those two templates are content specific and should only be choses one time around your complete site. "Home" will display the content slider on the top while "Contact" will display a message form below your content.
Because every login form is different this page is only available as HTML code. Create a new site using the "Full Width" attribute and paste the code below using the edit mode "HTML" in the textarea. Add and adjust the values accordingly to your login system.
<form class="loginForm" action="login.html" method="post"> <div class="column"> <label for="email">Email Address</label> <input id="email" name="email" type="text" /> </div> <div class="column"> <label for="password">Password</label> <input id="password" name="password" type="password" /> </div> <div class="column checkbox"> <input id="save" name="save" type="checkbox" /><label for="save">Remember me on this computer</label> </div> <button type="submit" class="colorButton">Login</button> <div class="help"> <a href="contact.html">Forgot your password?</a> </div> </form>
If you are unsure about using shortcodes or just want to edit your own content in the pages shown in the the theme preview you can manually import templates. In your theme package download you will find a folder called "templates". Choose a template like "shared-hosting.txt", select all and copy it to your clipboard. Now edit or create a page, change the edit mode from "Visual" to "HTML" and paste the template code. Click "Publish" to see the new page content and change the edit mode back to "Visual".
Please note that some templates require the "Full Width" and some the "Default Template" attribute.
You can set up three different sidebars for this theme, one is the sidebar for the blog content, one for content pages and one sidebar is used for the large footer. Navigate to "Appearance → Widgets" to set up your sidebars.
When using this theme you should always create custom menus for each purpose. The main navigation can only display the small subtitle if you enter a description for each element.
Navigate to "Appearance → Menus" and create a new menu. Add the pages you want for the main navigation excluding the homepage. Now click on "Screen Options" in the upper right corner and check "Description" under "Show advanced menu properties" and enter a description for each element. This description will be shown as a subtitle so keep it short. Finally we just have to select our new menu as "Primary Menu".
Create different navigations for the footer or the sidebars - for example without drop down elements. Those navigations should not include a description as the theme won't be able to display them correctly.
The support navigation is not a real menu but a static feature which can be configured via the theme options panel.
The theme supports the basic Wordpress widgets and includes two new ones. The "Customer Review" widget will display the testimonial bubble which can also be called via a shortcode. The "Support Navigation" widget will display the support navigation which you can set up in the theme options.
Using the theme options panel you can easily customize your site. It includes basic functions like adding a logo, changing the footer text, setting up the content slider and some color modifications.
The "General" section lets you edit and modify things like your logo, a favicon, contact form email, tracking code and the small footer.
In the "Content Slider" section you can set up the slider used on the homepage. Start by uploading/selecting the first slide. Click "Upload Image" and choose the image you want to see as your first slide. Choose "Full Size" and "None" for alignment and click "Insert Into Post". You will now see a little part of the selected image in a preview box. Please note that your slide must always be 480x350 pixels in size and that some elements like the button only show up when all values have been entered.
The support navigation is mainly shown in the content header of your site but can also be called via a widget and a shortcode. Both values, "Label" and "Link" must be entered in order for the icon to be displayed.
In the section "Styling" you are able to easily modify the look and feel of your site by changing the color set, the button color and link color. Please note that some combinations might look terrible.
This theme has a variety of custom shortcodes to make the process of creating the pages easier. If you are not sure how to use those shortcodes you should import some of the templates located in the theme package folder "templates" to see them in action.
If required at some point of your content you can insert a break instead of entering a new line. This is especially helpful in text widgets.
[break][/break]
The separator is a horizontal space which equals a four line breaks spacing.
[separator][/separator]
The separator shadow is a horizontal space which equals a eight line breaks spacing while showing a small shadow.
[separator_shadow][/separator_shadow]
The negative separator removes automatically added spacing from tables or the hosting plans. Just put the following shortcode wherever a double space appears.
[no_separator][/no_separator]
Due to the functions of this theme you have to wrap a shortcode around every list you create.
[list] Visually created list [/list]
or for widgets
[list] <ul> <li></li> </ul> [/list]
You can choose from three different types of lists, the default look showing a small dot, a style with ticks and a style with crosses.
[list][/list] [tick_list][/tick_list] [cross_list][/cross_list]
This shortcode shows a little testimonial bubble with the customers name and information.
[testimonial author="John Doe, Example Inc"] Lorem ipsum dolor sit amet, consectetur adipisicing elit. [/testimonial]
The button color can only be changed globally in the theme options.
[button link="http://serifly.com"]Label[/button]
To show a map on your site use the following code. Be as precise as possible with your address.
[map location="New York"][/map]
Shows a little info box with border and shadow.
[info_box][/info_box]
Creates a navigation styled like widget navigation in your content area. Needs to be wrapped around a lists where items are links.
[navigation] List with links [/navigation]
Displays the support navigation which can be set up in the theme options.
[support_navigation][/support_navigation]
You can specify up to four columns next to each other. To do so use the appropriate size. The last column of a row must always have _last attached to its tag.
Please note that the columns used for the pricing plans don't have the _last attached to it.
[large][/large] [medium][/medium] [small][/small] [tiny][/tiny]
[large_last][/large_last] [medium_last][/medium_last] [small_last][/small_last] [tiny_last][/tiny_last]
You can use three different hosting headers with this theme. Icons are available for shared hosting, virtual and dedicated servers.
[hosting_header_shared]Your service description goes here[/hosting_header_shared] [hosting_header_virtual]Your service description goes here[/hosting_header_virtual] [hosting_header_dedicated]Your service description goes here[/hosting_header_dedicated]
To create a tabbed navigation and box use the following. You can put almost anthing inside the tab content (i.e. columns).
[tab_wrapper] [tab label="Tab 1 Label"] Content Tab 1 [/tab] [tab label="Tab 2 Label"] Content Tab 2 [/tab] [/tab_wrapper]
Using the column layout you can easily set up pricing table. Please have a look at the templates files included with this theme to learn more.
Use the column names "medium" for two plans, "small" for three and "tiny" for four plans.
[pricing_table] [medium] [pricing_table_header label="Plan Subtitle"] Plan Name [/pricing_table_header] [pricing_table_key_features] <ul> <li>HTML or visually created list</li> </ul> [/pricing_table_key_features] [pricing_table_additional_features] <ul> <li>HTML or visually created list</li> </ul> [/pricing_table_additional_features] [pricing_table_price label="monthly"]$199[/pricing_table_price] [button link=""]Order Now[/button] [/medium] [medium] [pricing_table_header label="Plan Subtitle"] Plan Name [/pricing_table_header] [pricing_table_key_features] <ul> <li>HTML or visually created list</li> </ul> [/pricing_table_key_features] [pricing_table_additional_features] <ul> <li>HTML or visually created list</li> </ul> [/pricing_table_additional_features] [pricing_table_price label="monthly"]$199[/pricing_table_price] [button link=""]Order Now[/button] [/medium] [/pricing_table]
If you want to use a regular table instead of the hosting plans you can use following shortcodes.
[table] [table_row] [table_cell_header]Plan Name[/table_cell_header] [/table_row] [table_row] [table_cell]Table Cell[/table_cell] [/table_row] [table_row] [table_cell_price label="Price Label"]Price[/table_cell_price] [/table_row] [table_row] [table_cell][button link=""]Button[/button][/table_cell] [/table_row] [/table]
You can insert 6 different medium sized icons with the following shortcodes. You can then easily style the text inside the shortcodes as headlines.
[icon_network]Network[/icon_network] [icon_cog]Cog[/icon_cog] [icon_stats]Graph[/icon_stats] [icon_help]Help[/icon_help] [icon_server]Server[/icon_server] [icon_control_panel]Control Panel[/icon_control_panel]
This theme was created using the following third party resources.
Anything else was custom created or doesn't require any attribution. If I missed to mention your resource please get in touch as soon as possible. I most likely just forgot it or your resource was published as public domain content.