Version 1.1 · Updated on May 28th, 2012 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 an email to support@serifly.com or 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.
Please be extra careful when updating to a newer version of this theme when you already edited a file listed under "changes". You might forget something and it could break the layout.
This theme is a fixed layout optimized for resolutions starting from 1024 pixels in width. Its own width is 960 pixels so it provides a little left and right space for the minimal resolution.
The layout uses a common way to float and clear containers and elements. If you ever notice a weird behavior of alignment or spacing (e.g. margin not working) you probably forgot to clear floats. To do that either add the class "clearfix" or "clear" to an element containing floats or in a new empty "div" tag after an element where the problem seems to start.
The header starts within the container with the given class "siteWrapper" and ends right before "contentSlider" on the home page and "contentHeader" on any other page.
<!-- Site Header --> <div class="siteHeaderShadow"> </div> <div class="siteHeader"> ... </div>
You can easily set the header to be fixed within the layout. To do that just add the following code to the very end of "css/rackhost.css". You might have to customize it further depending on which color scheme you are using.
.siteHeaderShadow,
.siteHeader
{
position: fixed;
}
.siteHeader
{
background: transparent url(img/layout/siteFooterPattern.png) left top repeat;
}
In case you want to preserve the transparency of the site header you can also add this instead.
.siteHeaderShadow,
.siteHeader
{
position: fixed;
}
.siteHeaderShadow
{
background: transparent url(img/layout/siteHeaderShadowDark.png) left top repeat-x;
}
The maximum logo size should not exceed 200 x 60 pixels and be saved as a PNG with transparent background. It is located in the folder "/img/logos/". You can find a photoshop template in the folder "psd".
The header navigation is implemented as a list with anchor items inside. The dropdown functionality is achieved by adding the class "dropdown" to the anchor tag and a new "ul" item with the same class name.
<li> <a class="dropdown" href="link.html">Link<br /><span>Label</span></a> <ul class="dropdown"> <li><a href="sub.html">Sub Link 1</a></li> <li><a href="sub.html">Sub Link 2</a></li> <li><a href="sub.html">Sub Link 3</a></li> </ul> </li>
The content header is used as a secondary header for all your content pages except for the homepage. It starts right after the class "siteHeader" and ends before "contentWrapper". You should include it in your header template and change the headline programmatically when using a dynamic system.
Everything that changes besides the content header is supposed to be inserted in the container "contentWrapper". You can choose between a normal full width or two-column layout as shown below. The sidebar cannot be moved to the left.
<!-- Content Wrapper --> <div class="contentWrapper"> <div class="outerShadow"> </div> <div class="innerShadow"> </div> <div class="center clearfix"> <!-- Additional clearfix necessary for non floated objects --> <div class="clearfix"> </div> <!-- Content Starts - Header template should end here --> <div class="siteColumnLeft"> ... </div> <div class="siteColumnRight"> ... </div> <!-- Content Ends - Footer template should start here --> </div> </div>
The footer can hold any content you like but is especially qualified to show a site map and small description. It is aligned using the css "column" classes of which you can read more about in its own section.
The footer bar which is actually not in the same container is positioned right below and contains the legal information and a small grey logo. The footer logo should not exceed 34 x 24 pixels and can be found in the folder "/img/logos/".
<!-- Site Footer --> <div class="siteFooter"> <div class="center clearfix"> ... </div> </div> <!-- Site Footer Bar --> <div class="siteFooterBar"> <div class="center"> ... </div> </div>
This theme uses a single stylesheet for the complete layout except for two font imports. All definitions are grouped and labeled with a comment. If you have trouble finding a definition, try using an editor which provides you with a code navigator or contact the support.
You can easily cutomize the colors of this theme by either using one of our predefined alternatives (red, green and blue) or by creating your own. Just uncomment the color you want to be used on the site within the "head" element. If you want to create your own color set you should take a look at the predefined ones to understand what gets changed. The example code below would change the site colors to red.
<!-- Stylesheets --> <link href="css/rackhost.css" rel="stylesheet" type="text/css" /> <!-- <link href="themes/blue/css/custom.css" rel="stylesheet" type="text/css" /> --> <!-- <link href="themes/green/css/custom.css" rel="stylesheet" type="text/css" /> --> <link href="themes/red/css/custom.css" rel="stylesheet" type="text/css" /> <!-- <link href="themes/business/css/custom.css" rel="stylesheet" type="text/css" /> --> <!-- <link href="themes/blueHeader/css/custom.css" rel="stylesheet" type="text/css" /> --> <!-- <link href="themes/redHeader/css/custom.css" rel="stylesheet" type="text/css" /> --> <!-- <link href="themes/greenHeader/css/custom.css" rel="stylesheet" type="text/css" /> -->
You should always only set one custom stylesheet to prevent collisions. The only exception is the business theme which uses both the blue and the business stylesheet. The example code below would change the site colors and header to blue. The footer would appear in a lighter version as well.
<!-- Stylesheets --> <link href="css/rackhost.css" rel="stylesheet" type="text/css" /> <!-- <link href="themes/blue/css/custom.css" rel="stylesheet" type="text/css" /> --> <!-- <link href="themes/green/css/custom.css" rel="stylesheet" type="text/css" /> --> <!-- <link href="themes/red/css/custom.css" rel="stylesheet" type="text/css" /> --> <!-- <link href="themes/business/css/custom.css" rel="stylesheet" type="text/css" /> --> <link href="themes/blueHeader/css/custom.css" rel="stylesheet" type="text/css" /> <!-- <link href="themes/redHeader/css/custom.css" rel="stylesheet" type="text/css" /> --> <!-- <link href="themes/greenHeader/css/custom.css" rel="stylesheet" type="text/css" /> -->
The Javascript code of this layout is depending on the jQuery library and needs to be included. All functions are defined in the file "/js/rackhost.js". Please don't edit the code unless you are an experienced user.
The content slider is used on the front page to display an overview of the products or services you offer. The left part with the class "information" holds details while the right part shows an image. The image should always be 480 x 350 pixels in size and have a transparent background.
Everything the slider does is controlled via Javascript. If it is disabled only the first slide will be shown without the option to navigate. That is also the case when only one slide was added to the template.
Adding a slide is easy. Just take a look at the "index.html" template file and you will see how it works. Important to say is that the navigation is generated via Javascript so you need to specify a label for each button. If you don't do so the slide number will be displayed instead.
<div class="slide clearfix"> <div class="slideSwitchLabel"> This is the button label </div> <div class="information"> </div> <img src="image.png" alt="image" /> </div>
Slides are changing to the next one every 5 seconds until a user clicks a specific slide. This period is specified in the Javascript file "/js/rackhost.js" and is set in milliseconds. Change the interval to something you see fit or increase it by a lot to disable the auto rotation.
var contentSliderSpeed = 5000;
Almost every content of this layout is arranged by a set of column classes which come in four different sizes - large (2/3 or 625px), medium (1/2 or 458px), small (1/3 or 290px) and tiny (1/4 206px). Please note that these sizes may differ in certain situations, for example when using the sidebar, tabs or hosting plan layouts. Please check the file "/css/rackhost.css" if you need a specific size.
It is very important that your last column will always have the class "last" assigned to prevent it from breaking the layout. Additionally you will need a "clear" or "clearfix" after most column rows to prevent collapsing margins or invalid floats. The class "separatorShadow" acts as a "clear" as well.
<div class="column tiny"> ... </div> <div class="column tiny"> ... </div> <div class="column tiny"> ... </div> <div class="column tiny last"> ... </div> <div class="clear"> </div>
The hosting plans layout is achieved by using the column classes already defined for the page layout. Create a "div" element with the class "hostingPlans" and put the number of columns you want inside. Each column then holds a "h1" which acts as the plan name in which you can add a "span" element to display additional information. Important details about your service should be put into an "ul" list with the class "keyFeatures", the less important ones into "additionalFeatures". In case you have a feature that is not available with all plans you can add an empty "li" element with the class "unavailable".
<div class="hostingPlans clearfix"> <div class="column medium"> <h1>Plan 1<br /><span>Beginner</span></h1> <ul class="keyFeatures"> <li><strong>2 Domains</li> </ul> <ul class="additionalFeatures"> <li>Feature 1</li> <li class="unavailable"></li> </ul> <div class="price"> <strong>$10</strong><br /><span>monthly</span> </div> <a class="colorButton" href=""><span class="pointer">Order</span></a> </div> <div class="column medium"> <h1>Plan 2<br /><span>Professional</span></h1> <ul class="keyFeatures"> <li><strong>20 Domains</li> </ul> <ul class="additionalFeatures"> <li>Feature 1</li> <li>Feature 2</li> </ul> <div class="price"> <strong>$20</strong><br /><span>monthly</span> </div> <a class="colorButton" href=""><span class="pointer">Order</span></a> </div> </div>
Other than the normal column layout hosting plan columns do not need the class "last" applied to the last element.
The hosting header is a simple description container above the hosting plans and comes with three custom created icons for shared hosting ("shared"), virtual servers ("virtual") and dedicated servers ("dedicated").
<p class="hostingHeader shared">Description</p>
In case you need more than four columns you can easily use a normal "table" layout which has been styled as well. To view an example please check the file "layout.html".
Images which are inside a "p" element will automatically be styled with a little box. This means that for every image you should subtract 22px (20 padding + 2 borders) from its size.
You can add a Javascript based image zoom easily to every "img" in your layout. Just wrap the picture with an anchor pointing to the image you want to zoom and add the class "imageZoom".
<a class="imageZoom" href="image.jpg"><img src="image-thumb.jpg" alt="image" /></a>
Images with a "p" element can be aligned left or right by adding the class "alignLeft" or "alignRight" to its tag.
<img class="alignRight" src="image.jpg" alt="image" />
Tabs are created in a similar way as the content slider. You just have to add your content to a "div" with the class "tabContent" inside the element "tabWrapper". The name of each tab is set inside each content element with the class "label". Your tabs will then be generated via Javascript. In case it is turned off your users will see all elements in one box.
<div class="tabWrapper"> <!-- Tab 1 --> <div class="tabContent"> <!-- Set label for tab --> <div class="label"> Tab Label </div> <div class="column"> ... </div> </div> </div>
This theme comes with a handful of custom created icons which can be assigned by predefined CSS classes. Please check "layout.html" or "/css/rackhost.css" to get the class names for all icons. If you want to use regular "img" elements instead just browse all icons in the folder "/img/icons".
The Twitter widget retrieves the latest tweet of the profile you specified and prints it on the page. This is done via Javascript and the Twitter API which is limited to 150 requests per hour. Please keep that in mind in case you have a high rate of page views per user.
To use the widget just add it right after the content wrapper and change the username of the "a" tag to yours. The text in the "p" element will be shown when Javascript is disabled or no tweet could be retrieved.
<!-- Twitter Widget --> <div class="twitterWidget"> <div class="center"> <!-- Simply change the href to your username --> <a class="profileLink" href="http://twitter.com/username"></a><p>Loading</p> </div> </div>
As an addition this themes comes with a customization for business purposes. It is built upon the blue color layout and can be easily modified further. Check "business.html" and "themes/business/css/custom.css" to see how things are done.
The background of the content slider and content header is handled a little differently. It is achieved by using a regular "img" element instead of the CSS "background" option so it can be scaled to the users monitor width on every browser. The new CSS3 option "background-size: cover" could be used as well but is only supported on newer browsers.
Just add an "img" element with the class "background" applied to the top of either the content header and content slider.
<!-- Scaled background --> <img class="background" src="themes/business/img/layout/scaledBackground.jpg" />
The content slider has been modified to only show a headline, slogan and a button. Additionally no labels are shown for the slide switch. Dimensions, paddings and margins are all defined in the custom CSS file.
<div class="slide clearfix"> <div class="information"> <h1>Headline</h1> <p>Slogan</p> <a class="colorButton" href="contact.html">Button</a> </div> </div>
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.