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.
- 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.
- 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.
Not all modules can be hooked to every hook
Modules
Modules are major components that can be hooked to different sections.
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
- 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