Thumb

Installation

Theme Garden (automatic)

  1. Go to our home page and select a theme of your choice.
  2. Click on the Install now or Purchase $XX button and you’ll be taken to the Theme Garden.
  3. 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.
  4. 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)

  1. 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.
  2. Now go to your theme customization page and near the top hit the Edit HTML button and clear all the code you see there.
  3. 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.
  4. 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.

The Shell

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

img_shell

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)

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

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.

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

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.

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

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.

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.

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! :)
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.

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/
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 ]

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

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 ].
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/
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.

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

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.

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

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.

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

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 ]
Option Default Description
Back to Top Button ON Switch Back to Top Button [ ON | OFF ]
Option Default Description
CSS Animations ON Switch CSS Animations [ ON | OFF ]
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

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

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.

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

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

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

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!

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

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

Other Options

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.

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.

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.

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.

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

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

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