Thank you very much for your interest in our template. In this document, we will try to cover the installation and customization of the theme. If you encounter yourself having a trouble with something that is beyond the scope of this help file, please feel fry to use our support system at support.udesign.sk. You can shoot us a message anytime through out profile page at http://themeforest.net/user/uDesignStudios. Please make sure you follow our item feed as well.
[divider]

Table of contents

  1. Installation of the theme
  2. Achieving the correct page structure
  3. Working with billboard
  4. Shortcodes manager and instructions
  5. Content layouts
  6. Setting up the homepage, different variations of homepages
  7. Setting up the portfolio
  8. Changing the backgrounds
  9. Adding pages
  10. How to add a full-width page?
  11. Setting up contact form
  12. Setting up google map
  13. Custom fields
  14. Logo upload
  15. Favicon upload
  16. Widget Areas
  17. Custom widgets
  18. Ads management

[divider]

Installation of the theme

If you want to install Colosseum WP Premium Theme properly on your server:

  1. First of all, your server should support PHP. You will also need an installation of WordPress. If you dont have one, download it from here and follow instructions on wordpress site to install it correctly.
  2. Once you have a running installation of wordpress, place the theme files from download into “themes” folder. The path to this folder should be something like http://yourdomain.com/wp-content/themes/. Make sure that all theme files (without PSDs and help files !) are in the separate folder called “colosseum”. The path to the theme files should be http://yourdomain.com/wp-content/themes/colosseum upon completition of this step.
  3. Enter you WordPress Admin Interface. It should be available at http://yourdomain.com/wp-admin.
  4. In the left menu, find appearance tab. Click it. Submenu should appear. Click themes.
  5. Next screen should show all of your installed themes. Find Colosseum 1.0 by uDesignStudios.
  6. Click Activate.

Congratulations! You’ve just successfully installed Colosseum for wordpress on your server!

[divider]

Achieving the correct page structure

One of the most common question that we have to answer over and over is: How do I achieve the same structure of homepage, blog page etc on my server as it is shown in your live preview?. If this is your case, read the following instructions carefully.

  1. Login to your wordpress admin interface
  2. In the left menu, click settings, then reading.
  3. For Front page displays, select static page.
  4. If you haven’t already added page titled “home” yet, do it now (pages >> add new)
  5. Pick “home” from the first drop down list.
  6. Pick “blog” from the second dropdown list.

This way, your homepage will show no posts whatsoever, and your posts will appear under separate “blog” page. Pretty neat. Now, lets move on to some more interesting stuff.

[divider]

Working with billboard

Billboard in this theme consists of image slideshow combined with textual information. Effects are carried out by jQuery and some CSS3 transitions (these effects are not available in IEs for obvious reasons). To change billboard slides:

  1. Login to the wordpress admin interface
  2. Appearance -> colosseum
  3. Click on Billboard settings tab.
  4. Click on the grey space, upload your image (choose insert into post button, make sure that url field is empty). Size should be 940x380px
  5. Add descriptive heading and text of your choice.
  6. Fill the link field with url of the page or post that you want the slide to link to.
  7. Click update options after you are satisifed with the featured content.

[divider]

Shortcodes manager and instructions

In order to enhance the theme and make it even more useful for you, we incorporated a big number of  supported shortcodes. These shortcodes can be used to do a lot of things – you can use them to organize your content, create info, affirrmative, warning or error boxes, create buttons, download buttons, slideshows, pullquotes, lists and a lot more.

We also incorporated our own toolbar into wordpress edit interface – see screenshot below. Now, all you have to do is click the button and select the content, you dont have to type the shortcode in manually. Pretty neat, right?

Lets go through all the shortcode options (they will be divided into several groups due to their different nature):

1. Shortcodes that control layout

(1) 1/3 layout button – this will create a div with width of 1/3 of the content width. Ideal way to use this is to select you text and the press it. It can be combined with another two 1/3s or one 2/3.

(2) 2/3 layout button – this will create a div with width of 2/3 of the content width. Ideal way to use this is to select you text and the press it. It can be combined with one 1/3.

(3) 1/2 layout button – this will create a div with width of 1/2 of the content width. Ideal way to use this is to select you text and the press it. It can be combined with one 1/2.

(4) 1/4 layout button – this will create a div with width of 1/4 of the content width. Ideal way to use this is to select you text and the press it. It can be combined with three 1/4s or  one 1/2 and one 1/4.

(5) 3/4 layout button – this will create a div with width of 3/4 of the content width. Ideal way to use this is to select you text and the press it. It can be combined with one 1/4.

2. Box Shortcodes

(6) general box shortcode (advanced) – this will create a div with class property – give it a class defined in your css. You can use this to style some special content in the feature.

(7) info box – this will create a bluish info box around selected text with info icon. Ideal way to use this is to select the desired text and then press the button.

(8) OK box  – this will create a greenish ok box around selected text with success icon. Ideal way to use this is to select the desired text and then press the button.

(9) Warning box  – this will create a yellow warning box around selected text with warning icon. Ideal way to use this is to select the desired text and then press the button.

(10) Error box  – this will create a red erro box around selected text with error icon. Ideal way to use this is to select the desired text and then press the button.

2. List  Shortcodes

(11) Arrow list – Creates nice arrow list.

(12) Check list – Creates check list

3. Other shortcodes

(13) Button – inserts button -> has one attribute: link – fill this with url.

(14) Download button – inserts download button -> has one attribute: link – fill this with url.

(15) Left pullquote – inserts pullquote on the left side.

(16) Right pullquote – inserts pullquote on the right side.

(17) Divider – creates divider

(18) Contact form -inserts contact form shortcode

(19) Portfolio – inserts portfolio shortcode

(20) Content slideshow – inserts slideshow inside content.

Content layouts

This theme makes it absolutely easy for you to manage the layout options of your content. You can choose up to 4 columns, and combine different proportions as you wish. So how do you do that?

  1. When editing your content, make sure you are editing in the visual mode.
  2. Pay special attention to the toolbar line that is located at the last line of toolbar buttons. First 5 buttons are used to manage content layout.
  3. If you want to divide your content into three columns (each with width of 1/3 of the content width) select the text you want to put into the column, and press the button with your choice. It will put the shortcode in the correct place for you.
  4. Repeat the steps for the rest of content, just remember: the total sum always has to be 1.
  5. We enclose all the possible combinations that you can achieve:

Example of 2/3 + 1/3 layout

[two-thirds]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt nunc a magna elementum dictum. Integer convallis iaculis nibh, id consectetur tortor egestas sed. Sed elementum sem vitae erat iaculis eu dapibus mauris iaculis. Suspendisse id fermentum odio. Vestibulum consectetur congue sem, vehicula ornare leo tincidunt congue.[/two-thirds] [third]Curabitur nisi mauris, ultrices ut auctor at, vehicula et leo. Vivamus nec adipiscing nibh. Praesent enim est.[/third]

Example of 1/4 + 3/4 layout

[fourth]Curabitur nisi mauris, ultrices ut auctor at, vehicula et leo. Vivamus nec adipiscing nibh. Praesent enim est.[/fourth] [three-fourths]Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Donec bibendum turpis vitae metus iaculis ullamcorper. Morbi rhoncus, dui eu mollis iaculis, quam tellus iaculis elit, vitae faucibus massa est quis magna. Aliquam et posuere nibh. Vivamus ac arcu ut sem rhoncus scelerisque id id risus. Nunc ac ligula nisi, vitae faucibus nunc.[/three-fourths]

Example of 1/2 + 1/2 layout

[half]Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed sem risus, egestas ut tincidunt et, iaculis vel augue. Sed in magna elit. Praesent vitae sem sit amet orci fermentum rutrum id sed massa. Aliquam quam tellus.[/half] [half]Molestie molestie elementum at, lacinia id metus. Nulla dignissim quam velit. Duis pretium iaculis magna id convallis. Etiam rutrum, quam id gravida egestas, ligula dui vestibulum mauris, in auctor massa mauris a arcu. Sed pretium, dolor eu tristique.[/half]

Example of 1/3 + 1/3 + 1/3 layout

[third]Curabitur nisi mauris, ultrices ut auctor at, vehicula et leo. Vivamus nec adipiscing nibh. Praesent enim est.[/third] [third]Curabitur nisi mauris, ultrices ut auctor at, vehicula et leo. Vivamus nec adipiscing nibh. Praesent enim est.[/third] [third]Curabitur nisi mauris, ultrices ut auctor at, vehicula et leo. Vivamus nec adipiscing nibh. Praesent enim est.[/third]

Example of 1/4 + 1/4 + 1/4 + 1/4 layout

[fourth]Curabitur nisi mauris, ultrices ut auctor at, vehicula et leo. Vivamus nec adipiscing nibh. Praesent enim est.[/fourth] [fourth]Curabitur nisi mauris, ultrices ut auctor at, vehicula et leo. Vivamus nec adipiscing nibh. Praesent enim est.[/fourth] [fourth]Curabitur nisi mauris, ultrices ut auctor at, vehicula et leo. Vivamus nec adipiscing nibh. Praesent enim est.[/fourth] [fourth]Curabitur nisi mauris, ultrices ut auctor at, vehicula et leo. Vivamus nec adipiscing nibh. Praesent enim est.[/fourth]

[divider]

Setting up the homepage, different variations of homepages

We know that our customers may have different needs. Therefore, we tried to make this design usable for wide range of customers. Basically the homepage is a normal page with billboard inside. You can choose layout for it (full width or with sidebar) and it has its own widgetized sidebar that is not shared with any other page in the template. Combine this with the multiple layout options for maincontent and you have many possibilities to organize your content exactly the way you need.

[divider]

Setting up the portfolio

For those of you, who want a little space to showcase your work, we prepared a portfolio section. This portfolio is not a simple gallery – yet it is a powerful system that lets you display your work in stylish way.

Here is what you need to do to set up a portfolio:

  1. Log into your admin interface
  2. Add a new page (name it as you wish).
  3. Edit new page, in visual mode. Press “insert a nice portfolio” button.
  4. Choose Portfolio from the page layout dropdown in the right column.
  5. Now, select click portfolio in the wp admin menu (located in the left column of your admin screen).
  6. From here, everything is pretty straightforward. Each post that you add will be displayed in portfolio page. These posts will be also sorted by the tags that you give them. Good example of this can be seen in our live preview. So for example, if you give your portfolio entry tags “themes” and “html themes”, it will appear after clicking on both of these categories. Categories in the portfolio menu are generated from these tags.
  7. The thumbnail of your portfolio entry is generated from the standard featured image field (right column). Size of featured images should be 290x160px.
  8. As for the content of your posts, you can use pretty much everything. You can also choose whether you want to display content of your portfolio entry in a lightbox (default solution) or on the new page. If you want to choose this option, make sure you check the “do not open in lightbox” check box in add entry screen.
  9. Our portfolio also supports video entries. You can use videos from youtube and vimeo. You will need to copy embed code into the post to make it work.

[divider]

Changing the backrounds

Colosseum comes in 10 variations. They are:

  1. Dark (default)
  2. Red
  3. Brown
  4. Blue
  5. Purple
  6. Wood
  7. Dark wood
  8. Carbon
  9. Stripes
  10. Dark stars

To change variations:

  1. Login to Wp Admin interface
  2. From menu go to Appearance -> colosseum.
  3. Select first tab – general options.
  4. Take a look at the background option.
  5. Select the background that fits your needs.
  6. Update options
  7. Enjoy

[divider]

Adding pages

In order to add pages do following:

  1. Login into your WP admin interface.
  2. From the left menu: Pagess -> add new
  3. Fill the fields as you need to.
  4. Save the post by clicking the Publish button

If you want to add page as a subpage, be sure to add her a parrent page (right menu). You can also edit the order in which pages appear in the navigation. Take a look at the right menu in add page screen. You should see a box called order. Now, all you have to do is enter number. WordPress will then arrange the order of pages in the way that page with the lowest order value will be the first etc etc. So, for instance, if you have 3 pages called Home, About us and Service, and you want to show them in that order, Home should have order 0, About us 1 and services 3.

[divider]

How to add a full width page?

So lets say you want to display only your main content and no sidebar. How do you do that?

  1. Add a new page as always.
  2. Find Template dropdown in right column
  3. Select Full width.
  4. Update / publish your page.
  5. Done.

[divider]

Adding posts

In order to add posts do following:

  1. Login into your WP admin interface.
  2. From the left menu: Posts -> add new
  3. Fill the fields as you wish.
  4. Save the post by clicking the Publish button
[divider]

Setting up the contact form

iMag WP comes with built in contact form that can be perfectly manageable via admin interface. To set it up:

  1. Log in into your admin interface.
  2. Apperance – > Colosseum
  3. Click on the <b>Contact form options</b> tab.
  4. Recipient Email Address: your email for messages from contact form.
  5. Subject prefix: First words of your email.
  6. Success message: Message displayed to user upon successfully sent email.
  7. Show on Success: Tick this if you want to show message on success.
  8. To insert contact form into any page of your choice, plese insert the following shortcode into the desired page:  [ uds-contact-form ]. You can also press the button in the toolbar that will insert the shortcode for you.
[divider]

Setting up the google map

To make it easier for people around the world to find you, we incorporated a google map widget. To activate it:

  1. Login into your admin interaface.
  2. Appearance – > Widgets
  3. Locate the widget called <b>UDS Google Map</b>
  4. Drag into the sidebar of your choice.
  5. First of all, you need to provide your API Key: To make this map work, you will need your very own google api key. If you have one, paste it into the field. If you don’t, you can get one here:  http://code.google.com/apis/maps/signup.html . Insert this API key into the field called google api key in theme options (Apperance -> iMag, first tab)
  6. Lat, Leng: Coordinates of the desired location
  7. Zoom: Default level of zoom
  8. Done, you should have a working map by now.
[divider]

Logo upload

Changing your logo wont get any easier.

  1. Prepare your logo in image editor – use logo.psd to start with.
  2. Prepare an image with width of 940px, height is up to you.
  3. Login into your admin interface.
  4. Appearance -> Colosseum
  5. Localte logo upload line on the first tab, click the image. Follow the modal box and upload you own logo (press insert into post).
  6. Press update options once you are finished.
[divider]

Favicon upload

To upload your very own favicon:

  1. Login into admin interface and follow same steps as for logo upload, insted of logo, locate the favicon line.
  2. Click on the image, select new one, insert into post.
  3. update options.
[divider]

Widget areas

Colosseum wp comes with a lot of widget areas to choose from, so just for you information, here they are:

  • Sidebar widget area: There is one special sidebar for homepage (home). Common sidebar is for widgets that are supposed to be displayed both on blog and pages – the ones that should be displayed only on one of them can be put into Page or Blog sidebar.
  • 4 footer widget areas.
[divider]

Custom widgets

We deliver 5 completely custom widgets with this wordpress theme.

1. uDS Twitter Feed

This widget lets you show your visitors your latest tweets. All you have to do is to provide your username and tweet count (number of tweets you wish to show).

2. uDS Google Map

This widget is used to show a certain location on the map. Use of this widget is described above.

3. uDS Slideshow

This widget is a simple slideshow, that can be used to spicy up user experience a bit. You will have to provide this widget with url of images you’d like it to show to your visitors. (you can use wp media uploader to upload pictures, once this is done copy its url and past it into the empty line inside the widget settings – once you save it, line for new image appears).

4. uDS Contact Map

COntact widget that can be placed inside footer or sidebar. Same settings as for content contact form apply.

4. uDS Advertisement widget

Control widget for our our own ad management plugin, which is included with theme.

Once again, I’d like to thank you for purchasing (or at least thinking of it) our theme. If you need any help that is beyond the scope of this file, please feel free to use comment section at items page. If you like our work, make sure that you follow our themeforest item feed and twitter.