Documentation

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. Setting up the Ads panel via WP125 plugin

[divider]

Installation of the theme

If you want to install iMag 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 allredy dont have one, download it from here and follow instructions on wordpress site to install it correctly.
  2. If 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 “imagwp”. The path to the theme files should be http://yourdomain.com/wp-content/themes/kr 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 iMag 1.0 by uDesignStudios.
  6. Click Activate.

Congratulations! You’ve just successfully installed iMag 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

You can choose from 3 different billboards. First one  works as a horizontal accordion.  With this billboard, you can actually achieve some really stunning effects only with JS, no Flash is required. Second Billboard is uBillboard – again there are some really nice flash like transitions included. Third one is simple fading slideshow. Please make sure that your images are 940 x 360px. To change billboard slides:

  1. Login to the wordpress admin interface
  2. Appearance -> imag
  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)
  5. Add descriptive text of your choice.
  6. Click update options after you are satisifed with the featured content.
  7. Go to the first tab and select the slider of your choice from dropdown menu (uSlider, uBillboard, Cycle)

[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.

But that is not the part. 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.

[divider]

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 that lets you display your work in stylish and steal treat your portfolio entries as blogs, with all the advantages of them (comments, multimedia content etc).

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. Go to posts-> categories.
  5. Make sure  that category called portfolio exists.
  6. Add new post for each portfolio entry. First image inside the portfolio will be resized and will be used as a thumb in portfolio section. If you want thumb to show in blog section as well, you will have to do so via wp thumb upload function (in the right column)
  7. The portfolio gallery hover animation has various options and effects to choose from: name is always animation, effects to choose from: Value is one of these: left, right, up, down, curve, random (default is left)
  8. Also, make sure that the page which is used as a portfolio has its layout set to full width.

[divider]

Changing the backrounds

IMAG comes with 9 background and 2 color variations. They are:

  1. Clean
  2. Carbon
  3. Paper
  4. Dark stars
  5. Wood
  6. Dark Wood
  7. Vintage
  8. Stripes Vertical
  9. Stripes Angle
  1. Contrast white
  2. Dark

You can combine backgrounds and color options as you like –  18 combinations are available. To change backgrounds and color options:

  1. Login to Wp Admin interface
  2. From menu go to Appearance -> imag.
  3. Select first tab – general options.
  4. Take a look at the background option.
  5. Select the background that fits your needs.
  6. Do the same with theme option.
  7. Update options
  8. 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 – > iMag
  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]

Custom fields

We tried to make this theme as easy to use as possible, therefore we limited the amount of custom fields to a really small number (in fact, there are only 2 of them)

  • Name: heading, value: String of your choice. This is displayed as a page heading if turned on.
  • Name: animation, value: left, right, up, down, curve, random (default is left) – this custom field takes care of animation direction in portfolio section.

[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 -> iMag
  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

iMag 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 3 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).

[divider]

Setting up the WP125 ad

You can get WP125 here.

WP125 Plugin

WP125 Plugin manages your 125×125 adverts in sidebar. It is a really nice plugin, with a lot of features, like click trackings, displaying ads for limited time only etc. To install it, do following:

  1. Download the WP125 Plugin from the link above
  2. Copy the downloaded files into your plugins folder (http://yourdomain.com/wp-content/plugins)
  3. Enter WordPress Admin interface
  4. Select Plugins from the left menu
  5. Take a look at the list of available plugins, find WP125, and click Activate

Good job! WP125 Installed. However, we still have to set up a few things to make it work the way we want. But dont, worry. We are almost there.

  1. Take a look at left menu in your wp admin, especially the bottom part. There should be new Item called Ads. Click it.
  2. Select settings from ads submenu. You should see a list of settings for WP125. For our purpose, the most important are: Number of Ad Slots, Widget Titles, Ad Sales Page and Default Ad.
  3. Number of slots: This is the total number of square ads displayed in your sidebar. In our preview, we use 4, but feel free to add as many as you wish.
  4. Widget Titles: This is the title of the whole widget, the heading. In our live preview, we use “Our partners”.
  5. Ad sales Page: If you have special page with ads pricing and policy, you can put url link to it here. Available slots without Ad will link to that page
  6. Default Ad: This is the image that is shown at the slots with no ad. Again, to change it, put url of a new image into the field

Those were the general settings. Now, lets take a look at how we actually add the ads.

  1. Go to Ads -> Add / edit.
  2. Fill all the fields. Dont forget that image should be 125 x 125px. Also, pay attention to the Slot field. This defines the position of the Ad, with 1, being the top left position.
  3. When you’re done, click Save add button.
  4. Repeat the process for every other add that you wish to add.
  5. Once you’re done, you can swith to Ads -> Manage. All your ads are available at one screen there, you can edit and delete them as you wish.

Regarding WP125, thats about it. If you have any further questions about this plugin, check out its homepage.

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, or our private support ticket system. If you like our work, make sure that you follow our themeforest item feed and twitter.

buy zithromax where order generic viagra no prescription