Created: 04-June-2011
By: Andon
Email: use my ThemeForest profile page
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email me via my ThemeForest profile page here. Thanks so much!
To install the U-Design Theme you need WordPress 3.0 or later.
IMPORTANT: Make sure you unzip the downloaded file from ThemeForest first (DON'T upload it to your server yet). The content of this file contains the actual theme zip file called "u-design.zip". This is the theme file. Now, to install the theme follow one of the following two methods:
Once the upload is complete go to the WordPress administrator backend and activate the theme (the theme should appear now under Appearance --> Themes)
The theme's options page should appear now near the bottom of the sidebar under the name: U-Design Options:
IMPORTANT: Once you've installed the theme successfully you will need to install some recommended plugins (please refer to the next section: Recommended Plugins) necessary to get the most functionality for the theme.
The U-Design theme has been prepared to work with the following plugins to enhance its functionality. The theme will function without these plugins, however to get the most out of the theme in terms of user experience I strongly recommend installing.
Without any content the Front Page will only display the default slider and the footer.
To get some content into the Home page go the admin backend Appearance --> Widgets and drag-and-drop widgets to the Widget Areas associated with the Front Page. Those are:
For example, if you would like to add some text to a Widget Area, drag-and-drop a Text Widget, put some text into it, save it, go to the Front page of the site and Refresh to reflect the changes. The above listed widget areas will automatically resize to extend the full width of the page. Only the "Home Page Column 1" has the option to stay fixed width. You could set that under the U-Design -> General Options -> Home Page Column 1. By default fixed width for "Home Page Column 1" widget area is disabled. The idea behind this options is that in some cases you might want to have this widget area to serve as a left sidebar on the home page, or display the latest posts in it, etc. and use the remaining space for wider content, I'm sure you could put your creativity to good use here.
For your reference, the "Home Page Before Content" widget area in the theme's demo site, for instance, I used a Text widget without a title, and I used some inline styling to get the look I wanted for that widget area. I have also provided the code used in the demo in the Get the Code page. Here's a map of all the Widget areas available in the Front page (darker grey represents the widget areas):
To be able to take advantage of the above shown widget areas make sure you have the Home Page setup in the following way:
Settings → Reading → Front page displays and select "Your latest posts"
Note: The above configuration should be like this by default, so you wouldn't have to do anything.
The U-Design theme comes with five sliders: Flashmo (Flash based), Piecemaker (Flash based), Piecemaker 2 (Flash based), Cycle 1 (full width image) and Cycle 2 (smaller image with text and button). The three sliders could be configured from the theme's options page, for that go to U-Design Options --> Front Page Sliders.
<break>special_break</break>
"A Picture's worth a thousand words...":
Custom Logos: Using the "Top Area Height" setting you can resize the top area of the site to accommodate your custom logo size. Depending on your logo, you might have to nudge the slogan position a bit to fit perfectly with the logo. Use the Slogan Position fields for that.
Logo Dimensions: Just a quick note about the Logo width and height. What is important to understand is that by specifying the width and height of the logo it will not change or crop your logo, the two settings are used to define the logo link click-able area. Generally those should match your actual logo image width and height. In some cases if you need to lower the logo a bit from the top, you can do that be giving a greater value for the height.
To setup Portfolio Section(s), start with creating a new page, e.g. Portfolio, or Videos. You can call it anything you like. As you have the page open for editing, choose one of the available portfolio templates as shown below:
Save the page(s) and go to U-Design --> Portfolio Section and follow the instructions there:
Before you get the page above you should setup your Portfolio categories make sure that they are not empty, each category needs to have at least one Post assigned to it, WordPress will hide a category if it's empty, that's why it's important to have at least one Post assigned a category. Then you can come to the Portfolio section shown above and as described in the image above, you need to associate a page with a category.
At this point you're almost done, the last thing would be to setup the Portfolio thumbnails. There are several ways to accomplish that.
One and easiest would be to use the "Get The Image" Plugin. This plugin will greatly simplify the task of grabbing the thumbnail images for your Portfolio items.
It was designed to make the process of things such as adding thumbnails, feature images, and/or other images to your blog much easier, but it's so much more than that.
If you prefer to use the custom field method add a new custom field named: portfolio_item_thumb. In the Value field, you’ll need to add the URL path to the image. Example: http://www.yousite.com/wp-content/uploads/2011/01/image-file-name.jpg
For the Preview image or video or flash of your portfolio item you can use a custom field portfolio_item_preview. Here's a full list of the available Portfolio section custom fields:
Note: If you don't see the custom fields area, you need to make it visible by going to the "Screen Options" tab located in the top right corner of the post edit page:
Note: The Custom Fields' names are case-sensitive.
To pull all images attached to a single post to be added to the portfolio you will need to use the following two custom fields:
Use the custom field portfolio_item_image_attachments with value 'yes' (without the quote). Optionally you can offset the number of images to be pulled from the post by specifying the custom field portfolio_item_offset_image_attachments and specify any number as value. Optionally you can disable the linking of Portfolio page items when opened with prettyPhoto lightbox, the option for this is located under the theme's "Portfolio Section":
The Post's title could be positioned either above or below each thumb. This is convenient in case that you have really long titles which could push the thumb image down a bit and misalign the thumbs horizontally. In this case the solution would be to place the titles below the thumbs.
You cold also add a "Read More" button or list styles from the theme's typography by using shortcodes or plain HTML.
The Posts used to hold each individual Portfolio item have a sidebar when viewed in the browser as posts. The sidebar displayed could be changed to be either left or right side position. You can set the position from the U-Design --> Portfolio Section. Also the sidebar could be customized further by adding various widgets to it from Appearance --> Widgets and drag-and-drop widgets into the "PortfolioSidebar" widget area like so:
Back to the U-Design --> Portfolio Section. As shown in the image below in this section the postmetadata, author name and the comment area could be excluded from the single view post:
To setup a Blog or News Section, create a Page called Blog or News or whatever you would like to call it, give it just a title and no content, and assign the template "Blog page" to it like so:
You can also change the sidebar position for the Blog pages to be either left or right. You can do that from the U-Design --> Blog Section
To customize the Blog pages' sidebar, go to Appearance -> Widgets and drag-and-drop widgets you'd like to use into the "BlogSidebar" widget area, here's an example:
By default the blog posts displayed under the Blog section will exclude all posts that are in some way related to any of Portfolio section(s). If you would like to include them uncheck the "Exclude Portfolio(s) from Blog" option.
By default the Blog section will display the posts with short excerpts and a "Read more" button. However to show regular post content (not the excerpt) uncheck the checkbox "Show Excerpt" shown in the image above to accomplish this. To display a post with an image on the Blog page you need to add a Post specific image. Use the Custom Field post_image (case-sensitive) to specify the url to the image (see below for example). For best results you might want to upload a larger image. The theme will crop and resize the image to 570px by 172px (width by height). Here's an example of a post with custom excerpt and a post image. You don't have to fill in the "Excerpt" field, if you leave it empty the theme will automatically generate the excerpt for you:
To setup a Contact page, create a Page called Contact and assign the template to it called "Contact page":
The content you enter under the Contact page will always show first in the page.
You can setup business contact information under U-Design Options --> Contact Page, that will be displayed in a table-like nicely formatted way, the configuration for that and other options could be seen here:
The bottom part of the Contact Page Options allows you to enable ReCAPTCHA for extra security. To use reCAPTCHA you must get an API public and private key from http://recaptcha.net/. For the rest follow the instructions on the screen:
For more information on how ReCAPTCHA works please visit http://recaptcha.net/
The Contact Page template comes with its own sidebar called ContactSidebar. To add Google Maps in the sidebar use the U-Design: Google Map widget. This widget displays a location map without the need to have a Google API Key. Please, view the images below for further instructions as to how to use this widget:
Now set the width to maximum 280 and the height could be as long as you like. Then get the code and paste it into the U-Design: Google Map widget:
This theme has been implemented as a fixed width layout with the 960 Grid System. The full width of the template is 960px. For more information as to how the 960 Grid works, visit the 960 Grid System website.
All CSS files are located in the <themes-directory>u-design/styles/ subdirectory. The css files are registered and included in the <head> via my_init_styles() function located in the functions.php.
All JavaScript are registered and included in the <head> via my_init_scripts() function located in the functions.php.
The directory common-css/ and common-images/ stores all the css and images that apply to all styles and colors. Most of the 960 Grid System css files are in that directory.
More information and examples could be found at the U-Design demo site.
Typography and Shortcodes examples could be found under the Features menu on the demo site.
If you have any further questions, please don't hesitate to ask at the theme's Support Forum.
If your hosting provider is HostGator, you will need to contact them to request "mod_security whitelisting", you just need to mention to them that a theme you're using is running a timthumb script, they'll know what to do.
For "U-Design: Recent Posts" Widget Usage Instructions please refer to THIS discussion in the support forum.
On how to setup the 'Top Area Social Media' Widget Area, please refer to THIS discussion in the support forum.
In the PSD_files.zip I've included subdirectories containing all the PSDs necessary to produce the corresponding theme styles.
All PSD files contain slices of the required images. In Photoshop you just have to go File --> Save for Web & Devices... select the slices you'd like to generate (Shift+click to select multiple slices), hit "Save", at the next "Save Optimized As" dialog box under Slices dropdown select "Selected Slices" and "Save".
Choosing fonts for your website using the U-Design theme is rather intuitive. I've added Google fonts as an alternative to Cufón fonts. One of the advantages of using Google fonts is that the actual fonts are served from an online directory the first time the users browser requests them and then cached locally. This eliminates the requirement to have the fonts available on the user's machine in the first place. Another advantage of Google fonts is that they are not JavaScript dependent and they are selectable as opposed to non-selectable for Cufón fonts. As new fonts are being added by Google to the online directory I will be updating the theme's list of fonts over time.
The Custom Colors is a very powerful feature of the U-Design theme. It allows you to customize the colors of all elements from backgrounds, links, text and menu links by section. Many of the theme's elements are designed with certain opacity so that no matter what color the background they will stay visible.
You can also upload images as backgrounds on per section bases to replace solid background colour:
In addition, you will be able to save your custom color schemes (including any background images) that you create for future use, especially if you like to experiment with colors or like to change the look and feel of your site frequently..
I've used the following images, icons, fonts or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Andon