Ultrici - Documentation

Support Forums More Themes

Thank you for purchasing one of our products. If you have any questions that are beyond the scope of this help file, please feel free to visit our Support Forums and we will be more then willing to guide you through. Also when you've found a bug or any sort of issue, visiting the Support Forums is the fastest way to receive support. Thanks so much!

× Heads up! Be sure to unzip the file "ultrici.zip" you've downloaded from your download page at ThemeForest before uploading. Uploading the ThemeForest ZIP file directly will result in a "Missing Style Sheet" error.

Installing the theme can be done two ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

WordPress Upload

  1. Login to your WordPress admin.
  2. In the "Appearance → Themes" menu click the tab "Install Themes"
  3. At the top of the page click, "Upload", then click the file input to select a file.
  4. Select the zipped theme file, "ultrici.zip", and click "Install Now"
  5. After installation you will receive a success message confirming your new install.
  6. Click the link "Activate"

Ultrici is using TimThumb among others to resize the images. TimThumb requires the GD library, which is available on any host sever with PHP 4.3+ installed. Use absolute paths for your script and images, if the images are not showing please set the cache folder permission to 777. Still encountering problems with your images, then please visit this post

Uploading by FTP

  1. Login to your FTP server and navigate to your WordPress themes directory. Normally this would be "wp-content/themes"
  2. Unzip the files from the zipped theme.
  3. Copy the folder "ultrici" to your "wp-content/themes" directory.
  4. Check if the cache folder permissions are set to 777.
  5. After the files finish uploading, login to your WordPress admin.
  6. In the "Appearance" menu click "Themes"
  7. Click "Activate" for the theme "ultrici"

Using the TitanInstaller

When you have a fresh install of WordPress your able to skip all steps and just follow this explanation. The installer is the perfect solution for all who's in a hurry and doesn't have time to read the docs or wait for support. With a few steps your new theme should look exactly like the demo.

The installer is the perfect solution for everybody who's in a hurry and doesn't have time to read the docs or wait for support. With a few steps your new theme should look exactly like the demo. There are a few thing you need to consider before using this great and powerful function. Each section has it's own explanation, useful links and warnings. Please read them carefully before clicking on any buttons ;)

First thing you need to do is to click on import theme content. Click on this button and wait a few second. When it takes longer then 5 a 10 second then you didn't prepare yourself properly. But you have to wait until you receive the message All Done

When the message "All Done" appears you've successfully imported the theme's content. Now click the "Activate all Settings" button to activate all options. That's it, all that's left is to ad your own images and text.

Ultrici is using TimThumb to resize the images.TimThumb requiresthe GD library, which is available on any host sever with PHP 4.3+ installed. Please use absolute paths for your script and images and if the images are not showing please set the cache folder permission to 777. Still encountering problems with your images, then please visit this post for help about this topic.

Heads up! The homepage has to be set up with the different helpers, like slider manager, layout manger, widgets and custom menu. We will explain the complete process here. Remember that you don't have to create a home page, it's all automated and managed through the aforementioned elements.

Make sure your latest posts is selected

Our themes uses default WordPress front page for showing home content, so make sure to leave this option as default.

if you want to edit the code for home page, please goto theme folder and open index.php file. It generates Home Page. Do this only if you are comfortable with handling code and have knowledge of WordPress.
Always make sure before starting that Your Latest Posts is selected since many are used to other themes which are using a static page to display the home page.

Custom Menus

When you've installed the theme with the titan installer then the menu is already active and populated. If not then it's real easy to add your own.

  1. Go to Appearance → Menus
  2. Enter Main Menu inside the Menu Name field and click save.
  3. Next select Main Menu from the theme locations dropdown.
  4. Now all you need to do is to drag the menu items from the left side to the main menu stage.
  5. Need the mega menu then open the Menu item and select the "mega menu" option. Column title is directly below mega menu item and requires only a label, then drag your menu items below this column.
  6. All that's left is to create a new menu for your footer and that's it.

Some Useful Menu Tutorials

It's really easy, only thing to keep in mind is to stay focused and don't go over it when your in a hurry since it's a rather complex and time consuming process to fill in all your menu items.

Home Slideshow

With our slider manager your able to create as many sliders as you need with different structures and formats. Only for the homepage we've got a fixed tab since we don't want anything to go wrong with it.

There are a few functions inside the homepage slider which where not possible to recreate on the other pages and vice versa.

Features available to home slideshow tab only

Because Home page needs to be spiced up more than other pages , there are certain features changed than rest of the tabs. We will show you the features, so that you don't get confused.

  1. Staged Slider - This is a special slider available for Home Page only , it allows you to show images with side description. This is extremely useful for showing products.
  2. No height & width options - Since Home page needs to be pixel perfect, home slideshow does not have any width or height options, that is internally controlled by the theme.
  3. No Image Gallery - No gallery option has been provided for home page because it is very rarely used on the front page.
  4. No Slider Option - Slider can be disabled by going to Slider Type dropdown and selecting it to none !
Click on Slider manager in the side menu and then click on the blue Home Slideshow to open up the homepage slider settings and image upload section.

Slider Settings

With our slider manager your able to create as many sliders as you need with different structures and formats. Only for the homepage we've got a fixed tab since we don't want anything to go wrong with it.

There are a few functions inside the homepage slider which where not possible to recreate on the other pages and vice versa.

  1. Enter Time in Seconds - Enter seconds of duration in between slides
  2. Responsive Slider - Yes/No
  3. Slider Type - Fade/Staged/jQuery
  4. Show Description - Yes/No, Disable the description. Only counts for fade and jQuery
  5. Autoplay - Yes/No, decide if you want your slider to autoplay or manual
  6. Arrow Controls - Yes/No, choose between arrows or bullets
  7. Bullet Controls - Yes/No, choose between arrows or bullets
  8. Styled - Yes or No, for homepage we don't need the styling, rest of pages is advised to turn it on.

Upload Media

All that's left is to upload your images/videos and then the homepage slider is automatically activated and populated.

  1. Add images
  2. Add Videos
  3. Edit your slide
  4. Drag your slide
  5. Delete your slide
Lot's of new features such as drag and drop functions, activate bullet/arrows or not, responsiveness or not, slider type and more.

Layout Builder

With our latest addition you'r able to create almost any type of structured page with all kinds of elements inside. Working with this is really simple.

The layout builder is pretty straight forward. The homepage layout is a fixed tab because we don't want cause any confusions. The other pages like about us, services etc. can be added by clicking on Quick Start.

To populate the homepage all you need to do is to select the Home Page tab and then select an element from the drop down and by clicking on Add Element it's added. Add the elements you need and start populating them. No need to explain this since it all speaks for it selves, all text areas accepts short-codes and html.

When your done and your not happy with the placement of the elements inside the homepage then simply come back here and drag them to a different position.

Click on the edit icon to open a element to start adding content. Don't forget to hit save when your done, there's a autosave function present but it's always best to hit save to be sure.

Footer

The footer isn't really that difficult and therefore we keep it short. It works just like any other footer area. We have a footer tab inside the option panel from where your able to select if you want to show the footer or not. And your able to select the layout of the footer.

When you select for example the 2 column layout, two extra widgets areas will be created for you. When you select 5 columns layout for example then 5 widget areas will be created for you. Just populate them through the "Widgets" area and when your not happy with the layout then you can come back here and select a different column structure.

You can decide if you want a footer menu or not and your able to ad the footer copyright text in here.

Be warned! Wordpress saves sidebars by number instead of name, so when dynamically new sidebars or footer areas are added or deleted it's possible that WordPress swaps or deletes widgets.

Adding a slider through shortcodes

On the right you will see a video which demonstrates how to create and add slides through shortcodes.


Adding a slider through pages

Watch the video on the right to find out how to add the sliders through the default pages.


Adding a slider through the layout builder

Watch the video on the right to find out how to add the sliders through the layout editor.

The layout builder is something new we've build. It let's you build almost any page structure with pre-made and pre-designed elements. Watch the two videos below to find out it works and how to create a page with the layout builder.

If you'd like to change the main image in the header, open "header.psd", make the necessary adjustments, and then save the file as "headerBG.png". Do the same for the buttons.

1. Custom Post Manager

Custom Post manager allows you to create custom posts on the fly, creating them is very easy. Let's get started on it.

Be warned!Please keep in mind that this is something for the advanced user, you need to know how to use the custom post types and for what reason. Don't you know what it is or what it does then don't touch it because then it's just to complicated for you and you don't need it.

  1. Go to CustomPost manager in theme options menu and click on it.
  2. The interface is fairly simple , it will ask for the custom post type name, enter it. Let's say you want to create a Book custom type that will keep a collection of book posts. Enter Book and click on create, then check all the setting and hit save. You custom post type is now ready.
  3. When you know what this add-on is for then you already know what to do next. This far to complicated to explain it when you never have used it. This addon is built for those who know what it for, if you don;t know what it is for then don't touch it.


2. Sidebar Manager

The Sidebar Manager allows you to create dynamic sidebars on the fly, creating them is very easy. Let's get started.

Be warned!One important thing to note here is to keep sidebar name meaningful and do not add numbers or special characters as FIRST LETTER.

  1. First goto options panel menu and click on sidebar manager.
  2. Now enter sidebar bar name and click on create and a bar will be added in the bottom dashed area which represents a sidebar.
  3. When you are satisfied hit save and that's it. Now go to widget panel and after the footer widget holders you will see the dynamic sidebars.
  4. The sidebars can be arranged and if you want to deactivate a sidebar for some time and do not wish to delete it drag it to the right dashed area and hit save. Now they will be present but won't appear in WP widget panel.

All that's left is to populate the sidebars you've created and assign them to the appropriate page. For example, I'm creating two new sidebars and name it right sidebar and Page right sidebar. Then i ad widgets to these sidebasr and create a new page. Now you need to select the options below the page editor and select the sidebar placements. Check the image below where i selected a double right sidebar and selected these two sidebar.


3. Pricing Table Manager

The pricing table manager is something new we're using inside our themes, we've got plenty of experience with this add-on since we're selling this pricing table as a plugin for quit some time now. And more then 450 happy customers can confirm this.

It's made out of two parts, a list manager and a table manager. We will cover both of them so you know what each of these two sections can do for you. Check the screenshots or visit the option panel to find them.

Table Manager

  • Table name - Enter the name of the table, which will used for the create the id.
  • Table title - Enter the title of the table.
  • Featured - Select which Column should stand out of the rest to be featured.
  • Currency - Select the currency.
  • Add row - Click on add row to add the rows you need for your table.
  • Add column - Add columns by clicking on add column, be careful and don't ad 10 columns because content will break. The amount of columns depends on content width, 5 columns is fine for full width.
  • Plan name - The name of the pricing plan, basic, featured, advanced for example.
  • Pricing - Set the price for each column.
  • Link - Add the link to a Paypal payment screen for example, or a form or whatever payment method your using.
  • Description - Add the description of the column.
  • Button label - And the button label.
  • Row - Enter a description for each, for example. Email accounts, Domains, etc etc.

Table List Manager

The list manager is nothing more then a list of your tables in one overview. Easy to recognize and to remember which tables are present on your set-up. Clicking on edit takes you to the table manager edit section. Don't need a table anymore then simply remove it.

Then all that's left is to ad the pricing tables. Create a table and open up the page you want the table to show. Now click on the shortcode button to open up the pricing tables shortcodes list. Now simply select the table you need and add it inside the page by clicking on "Done". Or just use the following shortcode with your table's ID

[megatables id="A7X4GF58E4 "/]


Getting Started

Ultrici provides lots of shortcodes to work with, all of them can be accessed via Shortcode Menu Button in the WP editor. We will go over each

All the shortcodes can be directly accessed from the Shortcode menu. On clicking the menu item the respective shortcode is inserted with some sample text and available options.

Icon Shortcodes

Icon are provided, you can select them from lightbox and insert them in editor.

  [icon name='icon-envelope' color='Black' /]   
All the shortcodes can be directly accessed from the Shortcode menu. On clicking the menu item the respective shortcode is inserted with some sample text and available options.

Layout Shortcodes

The theme provides standard variations of column shortcodes which can be used to create complex column layouts easily. The usage syntax is very easy, below table shows the list of available width shortcodes, the width is relative to the 980px box layout. Insert the shortcode in the editor and add your content in between them.

There are two ways of adding column shortcods

Through Visual Panel

Ultrici provides Visual layout shortcode manager, which enables you to add placeholders in editor for layouts. It can be accessed via layout menu item in shortcode. Usage is very easy -

  1. Click on layout menu item.
  2. Add the layouts you want in the manager.
  3. When you are satisfied click on Insert to Editor button.
  4. That layout will be added in the editor
All the shortcodes can be directly accessed from the Shortcode menu. On clicking the menu item the respective shortcode is inserted with some sample text and available options.

Through Shortcodes

The usage syntax is very easy, below table shows the list of available width shortcodes, the width is relative to the 980px box layout. Insert the shortcode in the editor and add your content in between them.

                   [one_half]  your content here .. [/one_half]	[one_half_last]  your content here .. [/one_half_last]
                   [one_third]  your content here .. [/one_third]  	[one_third_last]  your content here .. [/one_third_last]  
                   [one_fourth] your content here .. [/one_ fourth]  	[one_fourth_last] your content here .. [/one_ fourth_last]  
                   [two_third] your content here .. [/two_third]  	[two_third_last] your content here .. [/two_third_last]  
                   [three_fourth] your content here .. [/three_fourth]  	[three_fourth_last] your content here .. [/three_fourth_last]  
                   [one_fifth] your content here .. [/one_fifth]  	[one_fifth_last] your content here .. [/one_fifth_last]  
                   [four_fifth] your content here .. [/four_fifth]  	[four_fifth_last] your content here .. [/four_fifth_last]  
                   

Note: one important point to note here is, to avoid breaking the columns into next line make sure the logical sum of columns is 1 , like suppose you want to add 2 half width columns then ½ + ½ = 1

Then two columns will appear on same row, perfectly aligned. If you add columns whose sum exceed 1 then the last column will appear in next row.

The last column shortcode must have _last word appended in the shortcode. For example if the last shortcode is [one_third] then it should be [one_third_last] your content… [/one_third_last] .

Video Shortcode

Video shortcodes provide easy way to embedd youtube and vimeo videos. Syntax is

  [video width='300' height='250' /]your url here[/video]   

Tooltip Shortcode

You can add top tooltips on your content, usage is very easy add the tooltip text in tip data attribute and wrap it around the text you want to behave as tooltip

 [tooltip tip_data="your title" ] The Text [/tooltip] 

Popover Shortcode

Popover are advance form of tooltips, which gives you title and as well as text control.

[popover title="your title" data="your popver content here" ] THE TEXT [/popover] 

Button Shortcodes

The button shortcode allows to create a full fledge button within seconds, there is a robust panel which you can access from titan shortcode button -> UI -> button. The panel will do all the job, but incase you opt to go in for more details. Syntax is

            [button borderRadius='3px' background='#c9c9e0' border='#c9c9e0' color='#040429' link='http://' size='small'] test [/button]
            

We will now the see the attributes one by one –

  1. radius – defines the css3 border value in px ( does not works in IE 7,8 )
  2. background – the background color of the button.
  3. border – the border color of the button
  4. color – the color of the button text
  5. link – the url where the button should point too.
  6. size – the size of the button accept values are small, medium, big.
  7. window – if set to yes the link opens in new window.
All the shortcodes can be directly accessed from the Shortcode menu. On clicking the menu item the respective shortcode is inserted with some sample text and available options.

Notification Shortcodes

Usage is pretty straight forward, title is the heading and inside the shortcode you can add the content. You can find it in Shortcodes Menu -> UI sub menu

            [error_box title="your title"] your message here … [/error_box]
            [information_box title="your title"] your message here … [/information_box]
            [success_box title="your title"] your message here … [/success_box]
            [warning_box title="your title"] your message here … [/warning_box]       

Separator Shortcodes

this shortcode adds a visual break with a horizontal line and a button with label TOP, which on click scrolls to top. You can find it in Shortcodes Menu -> UI sub menu

        		  [separator full=true /]       

Tabs Shortcode

First you will need to create a parent [tabs] shortcode inside that you will add the actual tab. The tab shortcode will contain title which will appear on tab and the content inside the tab.

 [tabs][tab title="your tab1 title"] your content here... [/tab]  [tab title="your tab2 title"] your content here... [/tab] [/tabs] 

Accordion Shortcode

The accordion is the main shortcode, inside that you can add sections with title and content between the section shortcode.

 [accordion][section title="your tab1 title"] your content here... [/section][/accordion] 

Google Shortcode

You can create google maps easily, to create the map follow the syntax –

[map address='' width='300' height='' /]

In the address attribute add your address and add width and height for google map in width and height attributes.


Typography Shortcode

1. Dropcaps – This shortcode makes the letter stand out usage is simple
[dropcap1] 1 [/dropcap1]
2. If you want to stand out the text, you can use the quotes , usage is
[quotes]your text here …. [/quotes]

Similarly if you want the quotes to be aligned left, use this

[quotes_left] your text here [/quotes_left]

Similarly if you want the quotes to be aligned right, use this

[quotes_right] your text here [/quotes_right]

Social Shortcode

Ultrici Supports all major social addons.

Twitter

Twitter – to add the tweet button, use the following syntax –

     [tweet name="wptitan" hashtags="test1,test2,test3" text="exicting offers" /]
     [tweet name="wptitan" hashtags="test1,test2,test3" type="horizonal"/]
     [tweet name="wptitan" hashtags="test1,test2,test3" type="vertical" /] 

There are 4 parameters ,

  1. name which appears at @yourname in the tweet
  2. hashtags – appearing #keyword for search related purposes. Use comma for multiple keywords
  3. text – you can add your own default tweet text.
  4. type – there are 3 types of button layouts available - none (by default present), horizontal and vertical.
Facebook – to add a facebook like button to the page use the following syntax –
[facebook/]
     [facebook layout="button_count"/]
     [facebook layout="box_count"/]

There is only one option , layout which specifies the like button it has 3 types – standard ( by default present ) , button count and box count.

To Add a Google +1 button use the following syntax –
[google/]
     [google size="medium"/]
     [google size="standard"/]
     [google size="tall"/]

There is only 1 option present that is the size. By default it is small other options are medium, standard and tall.

To Add a digg button use the following syntax –
[digg]
     [digg size="Compact"]
     [digg size="Medium"]
     [digg size="Wide"]

There is only 1 option present that is the size. By default it is Icon other options are Compact, Medium and Wide.

To Add a stumble button use the following syntax –
     [stumbleupon/]
     [stumbleupon layout=2 /]
     [stumbleupon layout=3 /]
     [stumbleupon layout=4 /]
     [stumbleupon layout=5 /]
     [stumbleupon layout=6 /]
                   

There is only 1 option present that is the layout. By default it is 1 other options are numbers till 6.

We also have Pin Interest support, usage is very simple use the follow syntax -
[pinterestfollow user="" /]
     [pinterestfollow_small user="" /]
     [pinterest on_url="" to_url="" /]

Misc Shortcode

You can also insert slider manager and pricing table through shortcode menu, usage is very easy when lightbox opens select the item and click on done it will be insert.

In this Section we will go over all the tabs and the settings they have.

General Tab

General Tab contains all the settings which are common in all pages. These includes logo , favicon, analyics related settings. You can also add social links which are shown at top right place of the theme here. Breadcrumbs and pagination type can also be set here.


Typography Tab

This tab conains all the font and title related settings. In the first section you can set font related settings which includes font families , font weights and body font size. The rest of the panels in this tab have font size related settings for each major modules like portfolio , blogs and generic heading settings.

Note : The Heading font size settings applies only for the content coming from WP editor.

Image Resizing Tab

This tab keeps check of which resizing method is used. By default and recommended resizing is timthumb because it is memory and speed friendly. But sometimes there are circumstances when you are not able to use it, in that case you can switch to wordpress core resizer. It will work same as timthumb. If both do not work which is very rare set the resizing to none and no resizing will be applied .

Note: When you use wordpress core resizer, always make sure that height and width of images are greater than the place you are using it. Like if you are using for front page slider make sure image sizes are greater than 980 x 350 else wordpress won't resize it.

Portfolio Tab

This tab conains all the settings related to portfolio templates and single portfolio posts. You can select the number of portfolio items to show on a portfolio template here , set the character limits of description being showed. You can also create extra portfolio fields here.

In Advance portfolio options you can add your work related fields like Starting date, Assignment type etc. These will appear in portfolio edit/new posts as input fields ( at Bottom Right place under publish button section) . You can enter data there and they will automatically appear in front end.


Layout Tab

This tab conains all the layout related settings. You can switch on/off responsive layout , set boxed template mode on . You can also set the default layout mode for posts and pages.


Blog Posts Tab

This tab conains all the blog and single posts related settings. Here you can select use of excerpt or framework's default content limiter. Number of blog posts , meta info that appears under posts title in blog template. This tab also contains single posts settings which are self explainatory.


Visual Panel Tab

This tab conains all styles and box template background related settings. Here you select styles or switch to default style which enables use of style.css only so you can easily make your css changes.


Advanced Tab

This tab advanced settings like wp admin login screen logo and not found input details.


To create the mega menu followe the steps -

  1. First goto Wordpress Menu page in wp admin.
  2. Now first add an menu item.
  3. Expand the menu item, check the checkbox Mega menu. Now that menu is in mega menu mode.
  4. Now to add the columns, add menu items to the mega menu. The immediate menu items behaves as columns. So each menu item add directly under mega menu is a column. The 2nd and 3rd images show the backend and front end view of the menu.
  5. Now to add menu items under the columns, create the menu items and add them under those columns and they will be placed under the column. GO through the images you will understand.
Points to Note -
  1. If you want no title in the column, add http://no-title to the link of the column menu item and it won't show in the front end.
  2. You can also add text to columns, just goto the column menu item and tick on Enable Text box , a textarea will appaer you can add text here. HTML tags are supported !

We would love to thank everybody for their great work and for letting us use the resources. All resources are GPL , Commercial licensed or we have written permission for usage.

None of the images inside the demo are included inside the download package. The download package contains a single demo image.

JavaScript

  1. Galleria — Responsive JavaScript Image Gallery
  2. Bootstrap — Bootstrap, from Twitter

Icons

  1. VIVID ICON SET V1.0 — Created by Pawel Kadysz
  2. HTML5 Icons — by w3.org
  3. GLYPHICONS — library of precisely prepared monochromatic icons and symbols.
  4. Imac icon — by Svengraph

Demo Images

  1. PhotoDune — High Quality Royalty-Free Stock Photography
  2. fotolia — Royalty Free Stock Photos

Once again, thank you for purchasing one of our products. If you have any questions that are beyond the scope of this help file, please feel free to visit our Support Forums and we will be more then willing to guide you through. Also when you've found a bug or any sort of issue, visiting the Support Forums is the fastest way to receive support. Thanks so much!