Ultimate Pro Documentation

Thumb

Installation
Demos
The Shell
Hooks & Positions
Modules
Addons
Fonts
Other Options
More Information
Credits
About

Installation

Theme Garden (automatic)

Go to our home page and select a theme of your choice.
Click on the Install now or Purchase $XX button and you’ll be taken to the Theme Garden.
There on the top right corner click on Install (for free themes) or Purchase $XX (for premium themes), select your blog and the theme will be automatically applied.
After installation go to your customization page and scroll to the bottom until you see Advanced options – click on it and remove the check mark from Use default mobile theme.

Other Marketplaces (manual)

After purchasing one of our themes, you’ll be given a download link to an archive containing all necessary files. Download and extract that archive.
Now go to your theme customization page and near the top hit the Edit HTML button and clear all the code you see there.
In the archive you downloaded earlier locate the latest theme file named themename-vX.X.txt and copy/paste its content into the vacant code space, then hit Save and return to Theme options.
After that scroll to the bottom until you see Advanced options – click on it and remove the check mark from Use default mobile theme.

Demos

We’ve made step-by-step guides on how to setup your theme options to achieve the looks of our demo blogs. Select the one you like and click on “setup guide” next to it to start.

Modern blog – setup guide
Minimal blog – setup guide
Stylish blog – setup guide
More demos coming soon!

The Shell

At the very basic level Ultimate Pro is a simple shell with major containers storing different components.

img_shell

Body – Change the settings of the body element

Option	Default	Description
Body Background Image		Choose a background image for the body element.
Body Background	`#ffffff`	Change the background color of the body element.

^{The body element might not be always visible (e.g. if all containers are set to fluid)}

Hero Header – The Hero Header is a full screen image with text that welcomes the visitors

Option	Default	Description
Hero Header Background		Choose a background image for the Hero Header.
Hero Header Overlay	`#282d33`	Select the overlay color of Hero Header.
Hero Header Text	`#ffffff`	Select text color for Hero Header.
Hero Header Background Style	`Cover`	Select the style of Hero Header’s background image `[ Cover \| Repeat \| Contain ]`.
Hero Header Text Align	`Center`	Change the alignment of Hero Header’s text `[ Center \| Left \| Right \| Justify ]`.
Hero Header Visibility	`Hidden`	Change when Hero Header is going to be visible `[ Hidden \| Index \| Permalink \| Both ]`.
Hero Header Max Height	`450`	Set maximum height for Hero Header in pixels e.g. `450` (no suffix). If the field is empty the height will be 100% of viewer’s screen.
Hero Header Overlay Opacity	`0.5`	Change Hero Header overlay opacity e.g. `0.5`. Max value `1.0`, min value `0`. Set to `0` to disable the overlay.
Hero Header Title	`[dummy text]`	Set a title for Hero Header e.g. `The Hero Header`.
Hero Header Text	`[dummy text]`	Set a description text for Hero Header e.g. `This is an image/background accompanied by title and information text`.
Hero Header Link Title	`Read More`	Set the Hero Header link title e.g. `Learn more`.
Hero Header Link	`#`	Set a link for Hero Header e.g. `http://example.com`.

Header – The header container that contains the header hook

Option	Default	Description
Header Background Image		Choose a background image for the Header container.
Header Background	`#ffffff`	Change the background color of the Header container.
Header Text	`#282d33`	Change the color of text inside the Header container.
Header Link	`#11a0f3`	Change the color of links inside the Header container.
Header Boxes Shade 1	`#ffffff`	Change the first color shade for the Header container.
Header Boxes Shade 2	`#f8f8f8`	Change the second color shade for the Header container.
Header Boxes Shade 3	`#ebebeb`	Change the third color shade for the Header container.
Header Boxes Text	`#282d33`	Change the color of text wrapped in a box inside the Header container.
Header Boxes Link	`#11a0f3`	Change the color of links wrapped in a box inside the Header container.
Header Size	`Fluid`	Change the maximum width of the Header container `[ Normal \| Narrow \| Tight \| Fluid ]`.
Header Content Size	`Normal`	Change the maximum width of the content inside Header container `[ Normal \| Narrow \| Tight \| Fluid ]`.
Header Visibility	`Visible`	Change the visibility of the Header container `[ Visible \| Hidden ]`.
Header Background Style	`Repeat`	Change the background image style of the Header container `[ Repeat \| Cover \| Contain ]`.

^{Always check the layout by resizing your browser window to make sure everything looks great on any screen size.}

^{The Header Content Size MUST always be smaller or equal to the Header Size.}

Main

Option	Default	Description
Main Background Image		Choose a background image for the Main container.
Main Background	`#f8f8f8`	Change the background color of the Main container.
Main Text	`#282d33`	Change the color of text inside the Main container.
Main Link	`#11a0f3`	Change the color of links inside the Main container.
Main Boxes Shade 1	`#f8f8f8`	Change the first color shade for the Main container.
Main Boxes Shade 2	`#ffffff`	Change the second color shade for the Main container.
Main Boxes Shade 2	`#ebebeb`	Change the third color shade for the Main container.
Main Boxes Text	`#282d33`	Change the color of text wrapped in a box inside the Main container.
Main Boxes Link	`#11a0f3`	Change the color of links wrapped in a box inside the Main container.
Main Size	`Fluid`	Change the maximum width of the Main container `[ Normal \| Narrow \| Tight \| Fluid ]`.
Main Content Size	`Normal`	Change the maximum width of the content inside the Main container `[ Normal \| Narrow \| Tight \| Fluid ]`.
Main Visibility	`Visible`	Change the visibility of the Main container `[ Visible \| Hidden ]`.
Main Background Style	`Repeat`	Change the background style of the Main container `[ Repeat \| Cover \| Contain ]`.

^{Always check the layout by resizing your browser window to make sure everything looks great on any screen size.}

^{The Main Content Size MUST always be smaller or equal to the Main Size.}

Footer

Option	Default	Description
Footer Background Image		Choose a background image for the Footer container.
Footer Background	`#282d33`	Change the background color of the Footer container.
Footer Text	`#ffffff`	Change the color of text inside the Footer container.
Footer Link	`#2bd696`	Change the color of links inside the Footer container.
Footer Boxes Shade 1	`#394048`	Change the first color shade for the Footer container.
Footer Boxes Shade 2	`#31373e`	Change the second color shade for the Footer container.
Footer Boxes Shade 3	`#1f2327`	Change the third color shade for the Footer container.
Footer Boxes Text	`#ffffff`	Change the color of text wrapped in a box inside the Footer container.
Footer Boxes Link	`#2bd696`	Change the color of links wrapped in a box inside the Footer container.
Footer Size	`Fluid`	Change the maximum width of the Footer container `[ Normal \| Narrow \| Tight \| Fluid ]`.
Footer Content Size	`Normal`	Change the maximum width of the content inside the Footer container `[ Normal \| Narrow \| Tight \| Fluid ]`.
Footer Visibility	`Visible`	Change the visibility of the Footer container `[ Visible \| Hidden ]`.
Footer Background Style	`Repeat`	Change the background style of the Footer container `[ Repeat \| Cover \| Contain ]`.

^{Always check the layout by resizing your browser window to make sure everything looks great on any screen size.}

^{The Footer Content Size MUST always be smaller or equal to the Footer Size.}

img_backgrounds

Sidebar

Option	Default	Description
Sidebar Size LG	`4/12`	Choose the width of the sidebar hook for large (desktop and bigger) screens `[ 1/12 \| 2/12 \| 3/12 \| 4/12 \| 5/12 \| 6/12 \| 7/12 \| 8/12 \| 9/12 \| 10/12 \| 11/12 \| 12/12 ]`.
Sidebar Size MD	`4/12`	Choose the width of the sidebar hook for medium (landscape tablet and bigger) screens `[ 1/12 \| 2/12 \| 3/12 \| 4/12 \| 5/12 \| 6/12 \| 7/12 \| 8/12 \| 9/12 \| 10/12 \| 11/12 \| 12/12 ]`.
Sidebar Size SM	`12/12`	Choose the width of the sidebar hook for small (portrait tablets and smaller) screens `[ 1/12 \| 2/12 \| 3/12 \| 4/12 \| 5/12 \| 6/12 \| 7/12 \| 8/12 \| 9/12 \| 10/12 \| 11/12 \| 12/12 ]`.
Sidebar Position	`Left`	Switch the position of the Sidebar compared to the Content `[ Left \| Right ]`.
Sidebar Visibility	`Both`	Change the visibility of the sidebar `[ Index \| Permalink \| Both \| Hidden ]`.

^{Always check the layout by resizing your browser window to make sure everything looks great on any screen size.}

^{The Content Size and Sidebar Size should always equal 12. If you disable the sidebar, the Content Size should be 12/12. Otherwise the containers will be off-center.}

Content

Option	Default	Description
Content Size LG	`8/12`	Choose the width of the content hook for large (desktop and bigger) screens `[ 1/12 \| 2/12 \| 3/12 \| 4/12 \| 5/12 \| 6/12 \| 7/12 \| 8/12 \| 9/12 \| 10/12 \| 11/12 \| 12/12 ]`.
Content Size MD	`8/12`	Choose the width of the content hook for medium (landscape tablet and bigger) screens `[ 1/12 \| 2/12 \| 3/12 \| 4/12 \| 5/12 \| 6/12 \| 7/12 \| 8/12 \| 9/12 \| 10/12 \| 11/12 \| 12/12 ]`.
Content Size SM	`12/12`	Choose the width of the content hook for small (portrait tablets and smaller) screens `[ 1/12 \| 2/12 \| 3/12 \| 4/12 \| 5/12 \| 6/12 \| 7/12 \| 8/12 \| 9/12 \| 10/12 \| 11/12 \| 12/12 ]`.

^{Always check the layout by resizing your browser window to make sure everything looks great on any screen size.}

^{The Content Size and Sidebar Size should always equal 12. If you disable the sidebar, the Content Size should be 12/12. Otherwise the containers will be off-center.}

Hooks & Positions

Theme hooks are places where modules are hooked/positioned. Currently there are 6 hooks in Ultimate Pro.

img_hooks

^{Not all modules can be hooked to every hook}

Modules

Modules are major components that can be hooked to different sections.

img_modules

Posts – The actual content on your blog/website

Option	Default	Description
Post Columns LG	`1`	Choose the number of columns for this module on large (desktop and bigger) screens `[ 1 \| 2 \| 3 \| 4 \| 6 \| 12 ]`.
Post Columns MD	`1`	Choose the number of columns for this module on medium (landscape tablet and bigger) screens `[ 1 \| 2 \| 3 \| 4 \| 6 \| 12 ]`.
Post Columns SM	`1`	Choose the number of columns for this module on small (portrait tablets and smaller) screens `[ 1 \| 2 \| 3 \| 4 \| 6 \| 12 ]`.
Post Style	`Spacious`	Select a style for posts `[ Spacious \| Minimal ]`.
Post Photoset Caption Style	`Bottom`	Select a style for Photoset captions `[ Bottom \| Hidden \| Snapchat \| Hover ]`.
Post Footer Visibility	`Visible`	Change the visibility of the post footer `[ Visible \| Hidden ]`.
Post Footer HR Visibility	`Visible`	Change the visibility of the horizontal rule before post footer `[ Visible \| Hidden ]`.
Post Footer Icons Style	`Boxed`	Change the style of post footer’s icons `[ Boxed \| Unwrapped ]`.
Post Reblog Visibility	`Visible`	Change the visibility of post reblog button `[ Visible \| Hidden ]`.
Post Likes Visibility	`Visible`	Change the visibility of post like button `[ Visible \| Hidden ]`.
Post Tags Visibility	`Visible`	Change the visibility of post tags `[ Visible \| Hidden ]`.
Post Tags Style	`Popover`	Change the way post tags are displayed `[ Popover \| Pills ]`.
Post Permalink Visibility	`Hidden`	Change the visibility of post permalink `[ Visible \| Hidden ]`.
Post Sharing Visibility	`Visible`	Change the visibility of post sharing `[ Visible \| Hidden ]`.
Post Author Visibility	`Hidden`	Change the visibility of post author `[ Visible \| Hidden ]`.
Post Source Visibility	`Visible`	Change the visibility of post source (do you really want to do that?) `[ Visible \| Hidden ]`.
Post Date Visibility	`Visible`	Change the visibility of post publish date `[ Visible \| Hidden ]`.
Post Notes Visibility	`Visible`	Change the visibility of post notes count and post notes list on permalink `[ Visible \| Hidden ]`.
Post Related Posts Columns	`2`	Select the number of columns for Related posts `[ 2 \| 1 \| 3 \| 4 \| 6 \| 12 ]`.
Post Photoset Grid	`ON`	Switch photoset grid `[ ON \| OFF ]`.
Post Related Posts	`ON`	Switch related posts `[ ON \| OFF ]`.
Post Photoset Gutter	`5`	Change the gutter between photoset grid columns e.g. `5` (no suffix).
Post Related Posts Title	`Related Posts`	Change the title of related posts addon e.g. `Related Posts`.

^{Using too many columns on the wrong screen can look bad. Make sure you test the layout by resizing your browser window.}

Pagination – The primary navigation of your blog/website

Option	Default	Description
Pagination Hook	`Content`	Choose the module hook `[ Content \| Sidebar \| Disabled ]`.
Pagination Hook Order	`5`	Choose the module position inside the hook `[ 5 \| 1 \| 2 \| 3 \| 4 ]`.
Pagination Type	`Normal`	Change the type of pagination from “1, 2, 3″ to infinite/automatic or infinite/”load more” `[ Normal \| Infinite \| Trigger ]`

^{The Sidebar hook for the pagination should only be used when the Pagination Type is Normal or it will be a huge pain for the viewer to always scroll to the top to load more content and then get back down to see it.}

^{Even though it is an option, there are very few cases when you’d want to disable the pagination.}

Navbar – The primary navigation of your blog/website

Option	Default	Description
Navbar Hook	`Header`	Choose the module hook `[ Header \| Content \| Sidebar \| Footer \| Disabled ]`
Navbar Hook Order	`1`	Choose the module position inside the hook `[ 1 \| 2 \| 3 \| 4 \| 5 ]`
Navbar Style	`Fixed Top`	Change the style and position of the Navbar `[ Fixed Top \| Fixed Bottom \| Inline \| Pills \| Slide \| Fixed Slide ]`
Navbar Margin	`Normal`	Change the margins of Navbar (e.g. so it can stick to another element seamlessly `[ Normal \| No Top Margin \| No Bottom Margin \| No Margins ]`.
Navbar Content Width	`Normal`	Set the maximum width of the contents of Navbar `[ Normal \| Fluid \| Narrow \| Tight ]`.
Navbar Slide Add Avatar	`True`	Adds Avatar to the sliding navbar `[ True \| False ]`.
Navbar Slide Add Title	`False`	Adds Avatar to the sliding navbar `[ False \| True ]`.
Navbar Home Button	`ON`	Adds a home button to the Navbar `ON \| OFF`
Navbar Dropdown Pages	`OFF`	Stack custom pages in a dropdown menu `ON \| OFF`
Navbar Random Button	`OFF`	Adds a random post button to the Navbar `ON \| OFF`
Navbar More Button	`ON`	Adds a “more” button to the Navbar containing the RSS, archive and search `ON \| OFF`
Navbar Height	`60`	Set the height of the navbar e.g. `60` (no suffix). Does not affect Pills and Sliding navbar types.
Navbar Tags Title	`Tags`	The title of the navbar Tags dropdown
Navbar Tags List	`[dummy tags]`	Adds a dropdown menu with custom tags of your choice separated by comma followed by space `,` e.g. `USA, New York, Murray's, Bagles! :)`

Carousel – A simple slider for images and text

Option	Default	Description
Carousel Slide `X` Image		Choose a background image for that specific slide
Carousel Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Content \| Sidebar \| Footer ]`.
Carousel Hook Order	`2`	Choose the module position inside the hook `[ 2 \| 1 \| 3 \| 4 \| 5 ]`.
Carousel Visibility	`Index`	Choose when this module is going to be visible `[ Index \| Permalink \| Both ]`.
Carousel Style	`Normal`	Choose the background image style `[ Normal \| Seemless ]`.
Carousel Transition	`Fade`	Change the transition effect ot the Carousel `[ Fade \| Slide ]`.
Carousel Navigation	`Both On Hover`	Choose which and when each part of the navigation would be visible `[ Both On Hover \| Controls \| Controls On Hover \| Indicators \| Indicators On Hover ]`.
Carousel Background Style	`Cover`	Choose the background image style `[ Cover \| Contain \| Repeat ]`.
Carousel Margin	`Normal`	Change the margins of this module (e.g. so it can stick to another element seamlessly `[ Normal \| No Top Margin \| No Bottom Margin \| No Margins ]`.
Carousel Height	`400`	Set the Carousel height in pixels e.g. `400` (no suffix, just a number).
Carousel Overlay Opacity	`0.2`	Set the overlay opacity of the background image e.g. `1.0` or `0.1`. Set to `0` to disable the overlay.
Carousel Slide `X` Title	`[dummy text]`	Set the Title (if any) of that specific slide e.g. `Ultimate Pro`.
Carousel Slide `X` Text	`[dummy text]`	Set the description (if any) of that specific slide e.g. `The most powerful Tumblr theme!`.
Carousel Slide `X` Link Title	`[dummy text]`	Set a title for that particular link e.g. `Learn More`.
Carousel Slide `X` Link	`#`	Set a link (if any) of that specific slide e.g. `https://cubthemes.com/ultimate-pro`.

^{There are automatic functions that track the slides structure, so always set them in order – 1, 2, 3, 4. e.g. if you have 3 slides, set slides 1, 2 and 3; if you have only a single slide – set it to slide 1; etc.}

^{Carousel Slide X Image must be set in order for that specific slide to show.}

Logo – The logo of your blog/website

Option	Default	Description
Logo		Choose a Logo image for your blog/website `[ .png \| .jpg \| gif ]`.
Logo Hook	`Disabled`	Choose the module hook `[ Disabled \| Navbar \| Header \| Sidebar \| Footer ]`.
Logo Hook Order	`1`	Choose the module position inside the hook `[ 2 \| 1 \| 3 \| 4 \| 5 ]`.
Logo Style	`Square`	Choose the the shape of the Logo `[ Square \| Circle ]`.
Logo Container	`False`	Select whether the module will be wrapped in container `[ True \| False ]`.
Logo Link	`#`	Choose the link (if any) e.g. `http://example.com/`

Title - The title of your blog/website

Option	Default	Description
Title	`[inherit]`	The title of your blog
Title Hook	`Navbar`	Choose the module hook `[ Navbar \| Header \| Sidebar \| Footer \| Disabled ]`
Title Hook Order	`2`	Choose the module position inside the hook `[ 2 \| 1 \| 3 \| 4 \| 5 ]`
Title Style	`Medium Bold`	Choose the font style of the Title `[ Small \| Small Bold \| Small Italic \| Small Bold Italic \| Medium \| Medium Bold \| Medium Italic \| Medium Bold Italic \| Large \| Large Bold \| Large Italic \| Large Bold Italic ]`
Title Container	`False`	Select whether the module will be wrapped in container `[ True \| False ]`.

^{When hooked to the Navbar hook the Title style can only be [ Small | Small Bold | Small Italic | Small Bold Italic ]}

Avatar – The avatar of your blog/website

Option	Default	Description
Avatar	`[inherit]`	The avatar of your blog.
Avatar Hook	`Sidebar`	Choose the module hook `[ Sidebar \| Header \| Footer \| Hero \| Disabled ]`
Avatar Hook Order	`1`	Choose the module position inside the hook `[ 1 \| 2 \| 3 \| 4 \| 5 ]`
Avatar Style	`Circle`	Choose the shape of the Avatar `[ Circle \| Square ]`
Avatar Container	`False`	Select whether the module will be wrapped in container `[ True \| False ]`.

^{Border Radius is applied to the Square Avatar Style}

Description – The description of your blog/website

Option	Default	Description
Description	`[inherit]`	The description of your blog.
Description Hook	`Sidebar`	Choose the module hook `[ Sidebar \| Header \| Footer \| Disabled ]`.
Description Hook Order	`2`	Choose the module position inside the hook `[ 2 \| 1 \| 3 \| 4 \| 5 ]`.
Description Text Align	`Left`	Change the alignment of the Description text `[ Left \| Center \| Right \| Justify]`.
Description Container	`True`	Select whether the module will be wrapped in container `[ True \| False ]`.

Jumbotron – Showcase something really important in a large “hero” box

Option	Default	Description
Jumbotron Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Sidebar \| Content \| Footer ]`.
Jumbotron Hook Order	`1`	Choose the module position inside the hook `[ 3 \| 1 \| 2 \| 4 \| 5 ]`.
Jumbotron Visibility	`Index`	Choose when this module is going to be visible `[ Index \| Permalink \| Both ]`.
Jumbotron Text Align	`Center`	Change the alignment of Jumbotron elements `[ Center \| Left \| Right \| Justify ]`
Jumbotron Container	`True`	Select whether the module will be wrapped in container `[ True \| False ]`.
Jumbotron Title	`Jumbotron`	Choose the title (if any) of the Jumbotron block e.g.`It's time for a change!`.
Jumbotron Text	`[dummy text]`	Choose the description (if any) of the Jumbotron block e.g. `150 experts have gathered together to craft the most innovative beauty products of the millennium!`.
Jumbotron Link Title	`[dummy text]`	Set a title for the Link e.g. `Visit our website!`.
Jumbotron Link	`#`	Choose the link (if any) of the Jumbotron block e.g.`http://craftingbeautyproducts.com/`

Features – Add a block showcasing different features

Option	Default	Description
Feature `X` Image		An icon or an image that best represents that specific feature `[ .png \| .jpg \| .gif ]`.
Features Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Sidebar \| Content \| Footer ]`.
Features Hook Order	`3`	Choose the module position inside the hook `[ 3 \| 1 \| 2 \| 4 \| 5 ]`.
Features Columns LG	`4`	Choose the number of columns for this module on large (desktop and bigger) screens `[ 4 \| 1 \| 2 \| 3 ]`.
Features Columns MD	`2`	Choose the number of columns for this module on medium (landscape tablet and bigger) screens `[ 2 \| 1 \| 3 \| 4 ]`
Features Columns SM	`1`	Choose the number of columns for this module on small (portrait tablet and smaller) screens `[ 1 \| 2 \| 3 \| 4 ].`
Features Visibility	`Index`	Choose when this module is going to be visible `[ Index \| Permalink \| Both ]`.
Features Style	`Contained`	Choose a style for individual features boxes `[ Contained \| Unwrapped ]`.
Features Container	`False`	Select whether the module will be wrapped in container `[ True \| False ]`.
Features Title	`Features`	The title of the whole Features block e.g. `Features`.
Feature `X` Title	`[dummy text]`	Set the title of that specific Feature e.g. `Hosting`.
Feature `X` Price		Set the price (if any) of that specific Feature e.g. `$19/m`.
Feature `X` Text	`[dummy text]`	Set the description (if any) of that specific Feature e.g. `Unlimited hosting plan perfect for new websites`.
Feature `X` Link Title	`[dummy text]`	Set a title for the Link e.g. `Start Today`.
Feature `X` Link	`#`	Set the link (if any) of that specific Feature e.g. `http://thishostingcompany.com/`.

^{Puting the module inside a small container (like the sidebar) and setting large amount of columns (4) will look bad. Test it before you Save.}

Progress – The progress bars are excelent to showcase your skills

Option	Default	Description
Progress Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Sidebar \| Content \| Footer ]`.
Progress Hook Order	`3`	Choose the module position inside the hook `[ 3 \| 1 \| 2 \| 4 \| 5 ]`.
Progress Container	`True`	Select whether the module will be wrapped in container `[ True \| False ]`.
Progress Title	`Progress`	The title of the whole Progress block e.g. `Skills`.
Progress `X` Title	`[dummy text]`	The title of that specific Progress bar e.g. `PHP Skills`.
Progress `X` Level	`[dummy values]`	The level in percent of that specific Progress bar e.g. `90` (no suffix, just a number).

External Links – Add links to social medias and services

Option	Default	Description
External Links Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Sidebar \| Footer ]`.
External Links Hook Order	`1`	Choose the module position inside the hook `[ 1 \| 2 \| 3 \| 4 \| 5 ]`.
External Links Style	`Square`	Choose the style of the images `[ Square \| Square Monochrome\| Circle \| Circle Monochrome ]`.
External Links Container	`False`	Select whether the module will be wrapped in container `[ False \| True ]`.
External Facebook Link		Set an external Facebook link e.g. `http://facebook.com/`
External Twitter Link		Set an external Twitter link e.g. `http://twitter.com/`
External LinkedIn Link		Set an external LinkedIn link e.g. `http://linkedin.com`
External GooglePlus Link		Set an external GooglePlus link e.g. `http://plus.google.com/`
External Tumblr Link		Set an external Tumblr link e.g. `http://tumblr.com/`
External Pinterest Link		Set an external Pinterest link e.g. `http://pinterest.com/`
External WeHeartIt Link		Set an external WeHeartIt link e.g. `http://weheartit.com/`
External Instagram Link		Set an external Instagram link e.g. `http://instagram.com/`
External Flickr Link		Set an external Flickr link e.g. `http://flickr.com/`
External YouTube Link		Set an external Youtube link e.g. `http://youtube.com/`
External Vimeo Link		Set an external Vimeo link e.g. `http://vimeo.com`
External Vine Link		Set an external Vine link e.g. `http://vine.com`
External DeviantArt Link		Set an external DeviantArt link e.g. `http://deviantart.com`
External Dribbble Link		Set an external Dribbble link e.g. `http://dribbble.com/`
External Behance Link		Set an external Behance link e.g. `http://behance.net/`
External Reddit Link		Set an external Reddit link e.g. `http://reddit.com/`
External StumbleUpon Link		Set an external StumbleUpon link e.g. `http://stumbleupon.com/`
External Twitch Link		Set an external Twitch link e.g. `http://twitch.tv/`
External Steam Link		Set an external Steam link e.g. `http://steampowered.com/`
External CodePen Link		Set an external CodePen link e.g. `http://codepen.io/`
External JSFiddle Link		Set an external JSFiddle link e.g. `http://jsfiddle.net/`
External Skype Link		Set a link to start Skype chat e.g. `skype-username`
External Website Link		Set an external Website link e.g. `http://yourwebsite.com/`
External eMail Link		Set an eMail link e.g. `mail@hosting.com`

Image Feed – Get your latest images from various social networks

Option	Default	Description
Image Feed Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Content \| Sidebar \| Footer ]`.
Image Feed Hook Order	`2`	Choose the module position inside the hook `[ 2 \| 1 \| 3 \| 4 \| 5 ]`.
Image Feed Style	`Square`	Choose the style of the images `[ Square \| Circle ]`.
Image Feed Count	`10`	Choose the maximum number of images that will be shown `[ 10 \| 20 ]`.
Image Feed Container	`True`	Select whether the module will be wrapped in container `[ True \| False ]`.
Image Feed Instagram Token		Add your Instagram access token e.g. `0000000000.0000000.000000aaaaaaaaaaa0000000000abcde`. Read this article to learn how to get yours.
Image Feed Tumblr Blog URL		Add the full URL of a Tumblr blog e.g. `myblog.tumblr.com` or `myblog.com`.
Image Feed WeHeartIt Username		Add WeHeartIt username e.g. `weheartit`.
Image Feed Pinterest Username		Add Pinterest username e.g. `pinterest`.
Image Feed Flickr User ID		Add Flicker User ID `00000000@N00`. Use idgettr to see your Flickr ID.
Image Feed DevinatArt Username		Add DeviantArt username e.g. `deviantart`.
Image Feed Behance Username		Add Behance username e.g. `behance`.

^{The maximum number of Behance images is limited to 12 even if you set Image Feed Count to 20}

Twitter – Adds a Twitter feed widget to your blog

Option	Default	Description
Twitter Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Content \| Sidebar \| Footer ]`.
Twitter Hook Order	`3`	Choose the module position inside the hook `[ 3 \| 1 \| 2 \| 4 \| 5 ]`.
Twitter Columns LG	`3`	Choose the number of columns for this module on large (desktop and bigger) screens `[ 3 \| 1 \| 2 \| 4 \| 6 \| 12 ]`.
Twitter Columns MD	`2`	Choose the number of columns for this module on medium (landscape tablet and bigger) screens `[ 2 \| 1 \| 3 \| 4 \| 6 \| 12 ]`.
Tweets Count	`6`	Choose the number of tweets to be shown `[ 6 \| 1 \| 2 \| 3 \| 4 \| 5 \| 7 \| 8 \| 9 \| 10 ]`.
Twitter Container	`True`	Select whether the module will be wrapped in container `[ True \| False ]`.

^{Before using the Twitter module you need to connect Twitter to your blog.}

Custom Text – Displays a block with a text/code of your choice.

Option	Default	Description
Custom Text Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Content \| Sidebar \| Footer ]`.
Custom Text Hook Order	`5`	Choose the module position inside the hook `[ 5 \| 1 \| 2 \| 3 \| 4 ]`.
Custom Text Visibility	`Both`	Choose when the module will be visible `[ Index \| Permalink \| Both ]`.
Custom Text Container	`True`	Select whether the module will be wrapped in container `[ True \| False ]`.
Custom Text	`[dummy text]`	The content of the Custom Text module.

Likes – Displays a block with the last five posts you’ve liked.

Option	Default	Description
Likes Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Content \| Sidebar \| Footer ]`.
Likes Hook Order	`5`	Choose the module position inside the hook `[ 5 \| 1 \| 2 \| 3 \| 4 ]`.
Likes Container	`True`	Select whether the module will be wrapped in container `[ True \| False ]`.

^{The Likes module will only work on primary blogs.}

Following - Displays a block with the links and avatars of the blogs you are following.

Option	Default	Description
Following Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Content \| Sidebar \| Footer ]`.
Following Hook Order	`5`	Choose the module position inside the hook `[ 5 \| 1 \| 2 \| 3 \| 4 ]`.
Following Container	`True`	Select whether the module will be wrapped in container `[ True \| False ]`.

^{The Following module will only work on primary blogs.}

Group Members – Displays a block with the links and avatars of all members of a group blog.

Option	Default	Description
Group Members Hook	`Disabled`	Choose the module hook `[ Disabled \| Header \| Content \| Sidebar \| Footer ]`.
Group Members Hook Order	`5`	Choose the module position inside the hook `[ 5 \| 1 \| 2 \| 3 \| 4 ]`.
Group Members Container	`True`	Select whether the module will be wrapped in container `[ True \| False ]`.

^{The Group Members module will only work on group blogs.}

Addons

Loading Overlay – Style the loading overlay – the element that shows while the page is loading.

Option	Default	Description
Loading Overlay Color	`#ffffff`	Select the Loading Overlay text color.
Loading Overlay Text	`#282d33`	Select the Loading Overlay background color.
Loading Overlay Brand	`Avatar`	Select a branding for the Loading Overlay `[ Avatar \| Title \| Logo ]`.
Loading Overlay Transition	`Fade`	Select a transition effect for the Loading Overlay `[ Fade \| Split ]`.
Loading Overlay Style	`Monochrome`	Select your preferred loading animation style `[ Colorful \| Monochrome ]`.
Loading Overlay	`ON`	Switch Loading Overlay `[ ON \| OFF ]`

Back to Top Button – A button width fixed position to the bottom right of the screen that scrolls back to the top of the page when clicked.

Option	Default	Description
Back to Top Button	`ON`	Switch Back to Top Button `[ ON \| OFF ]`

CSS Animations – Smooth transitions on different elements. If disabled, transitions will happen instantly.

Option	Default	Description
CSS Animations	`ON`	Switch CSS Animations `[ ON \| OFF ]`

Border Radius – Set the border radius of all elements on your blog

Option	Default	Description
Border Radius	`3`	Enter the border radius in pixels e.g. `10` (no suffix, just a number).

^{To disable border radius set Border Radius to 0}

Border Width – Set the border width of all elements on your blog

Option	Default	Description
Border Width	`0`	Enter the borders width in pixels e.g. `3` (no suffix, just a number).

^{To disable all borders set Border Width to 0}

Border Style - Change the border style of all borders on your blog

Option	Default	Description
Border Style	`solid`	Enter a valid CSS border style e.g. `dashed`. You can see all available styles + examples in this list.

^{Setting this option to anything else than a valid CSS border-style will throw a CSS error, that some browsers might not like.}

Box Shadow – Add shadows to all elements on your blog

Option	Default	Description
Box Shadow	`0px 0px 0px 0px rgba(0,0,0,0.1)`	Enter a valid box-shadow value e.g. `0px 0px 0px 0px rgba(0,0,0,0.1)`. You can see how it works onthis page or you can simply use a generator.

Eye Catcher – The Eye Catcher is a popup at the bottom-left on the screen that appears once the visitor has scrolled down a certain amount of pixels from the top of the page.

Option	Default	Description
Eye Catcher	`OFF`	Switch Eye Catcher `[ ON \| OFF ]`
Eye Catcher Offset	`1500`	Set the number of pixels from the top that the user needs to scroll before the Eye Catcher pops up `e.g. 3000` (no suffix, just a number).
Eye Catcher Title	`The Eye Catcher`	Set the title of the Eye Catcher.
Eye Catcher Text	`[dummy text]`	Set the text bit of the Eye Catcher.
Eye Catcher Link Title	`[dummy text]`	Set a title for the Link e.g. `Learn More`.
Eye Catcher Link	`#`	Choose the link (if any) of the Jumbotron block e.g. `http://example.com/`.

^{The Eye Catcher uses cookies to remember if the user has closed the box or not. The cookie ID is set by the Eye Catcher Title, if you wish to reset it – simply change it.}

Disqus Comments – Setup a comments system for your blog

Option	Default	Description
Disqus Comments		Enter your Disqus username e.g. `example`, to find out more check How to setup Disqus comments?

^{To enable this feature you must set a Disqus Username (to disable it – simply remove it).}

Google Analytics – Setup Google Analytics to track the traffic on your blog

Option	Default	Description
Google Analytics		Enter your Google Analytics ID e.g. `UA-00000000-0`, to find out more check How to setup Google Analytics?

^{To enable this feature you must set a Google Analytics ID (to disable it – simply remove it).}

Ad Units – Add ad units to your blog

Option	Default	Description
Ad Unit Above Header		Preview
Ad Unit Above Header Margin	`30px 0 0`	Change the margin for this ad unit.
Ad Unit Below Header		Preview
Ad Unit Below Header Margin	`0 0 30px`	Change the margin for this ad unit.
Ad Unit Above Main		Preview
Ad Unit Above Main Margin	`30px 0 0`	Change the margin for this ad unit.
Ad Unit Below Main		Preview
Ad Unit Below Main Margin	`0 0 30px`	Change the margin for this ad unit.
Ad Unit Above Footer		Preview
Ad Unit Above Footer Margin	`30px 0 0`	Change the margin for this ad unit.
Ad Unit Above Content		Preview
Ad Unit Above Content Margin	`30px 0 0`	Change the margin for this ad unit.
Ad Unit Below Content		Preview
Ad Unit Below Content Margin	`0 0 30px`	Change the margin for this ad unit.
Ad Unit Above Sidebar		Preview
Ad Unit Above Sidebar Margin	`30px 0 0`	Change the margin for this ad unit.
Ad Unit Below Sidebar		Preview
Ad Unit Below Sidebar Margin	`0 0 30px`	Change the margin for this ad unit.

^{Best sutable with AdSense with their “Responsive” ad unit.}

^{AdSense does not like JavaScript very much and Ultimate Pro is heavily built with it. Use with caution and check for messages from Google regularly to see if you’ve got a warning! Keep in mind that AdSense only allows up to 3 ads on page!}

Custom JavaScript – add custom JavaScript code to your theme

Option	Default	Description
Custom JavaScript		Add custom JavaScript or JQuery code.

^{A single typo might break your whole theme. You can confirm that you have a JavaScript error when the Loading Overlay is not going away.}

Fonts

Title Font

Option	Default	Description
Title Font	`'Roboto', sans-serif`	Change the blog Title font.

Text Font

Option	Default	Description
Text Font	`'Roboto', sans-serif`	Change the blog text font.

Headings Font

Option	Default	Description
Headings Font	`'Roboto', sans-serif`	Change the blog headings (`H1`, `H2`, `H3`, etc.) font.

Other Options

Help Bar

The Help bar can be accessed by clicking on the Help button on the top left of your screen while on the blog customization page. It contains information about the theme as well as links to this documentation and more.

Welcome Message

Option	Default	Description
Welcome Message	`[image]`	Welcoming message to Ultimate Pro linking to a help article.

^{You can disable the message by removing Welcome Message image.}

Favicon – Choose a favicon for your blog/website

Option	Default	Description
Favicon		The image should be a small sized square e.g.`10KBit 64x64 .png`

^{If Favicon is not set, the blog avatar will be set as favicon.}

Custom Pages

If you create a custom page and enable the option Show a link to this page from withing the page editor it will be displayed in the Navbar.

Ask

If you enable the Ask from your blog settings – a link to the ask page will be automatically added to the Navbar.

Submissions

If you enable Submissions from your blog settings a link to the submit page will be automatically added to the Navbar.

Advanced options

Besides all other options it is mandatory to disable the Use default mobile theme option or a generic theme will be rendered on mobile devices instead of Ultimate Pro.

More Information

For more information please check the Getting Started and Advanced sections of the support pages. If you have any further questions you can always open a support ticket.

Credits

Ultimate Pro is using the following libraries:

JQuery, JQuery Cookie, Bootstrap, Waypoints, bigSlide, Masonry, imagesLoaded, Colorbox, Retina.js, photoset-grid, Social Image Feed (SIF), FontAwesome, Animate.CSS, Google Fonts.

About

This documentation is written for Ultimate Pro v1.2

Support

Ultimate Pro Documentation

Thumb

Installation

Demos

The Shell

Hooks & Positions

Modules

Addons

Fonts

Other Options

More Information

Credits

About