Support

Ultimate Pro Documentation

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

  • Body – Change the settings of the body element
OptionDefaultDescription
Body Background ImageChoose a background image for the body element.
Body Background#ffffffChange 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
OptionDefaultDescription
Hero Header BackgroundChoose a background image for the Hero Header.
Hero Header Overlay#282d33Select the overlay color of Hero Header.
Hero Header Text#ffffffSelect text color for Hero Header.
Hero Header Background StyleCoverSelect the style of Hero Header’s background image [ Cover | Repeat | Contain ].
Hero Header Text AlignCenterChange the alignment of Hero Header’s text [ Center | Left | Right | Justify ].
Hero Header VisibilityHiddenChange when Hero Header is going to be visible [ Hidden | Index | Permalink | Both ].
Hero Header Max Height450Set 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 Opacity0.5Change 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 TitleRead MoreSet 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
OptionDefaultDescription
Header Background ImageChoose a background image for the Header container.
Header Background#ffffffChange the background color of the Header container.
Header Text#282d33Change the color of text inside the Header container.
Header Link#11a0f3Change the color of links inside the Header container.
Header Boxes Shade 1#ffffffChange the first color shade for the Header container.
Header Boxes Shade 2#f8f8f8Change the second color shade for the Header container.
Header Boxes Shade 3#ebebebChange the third color shade for the Header container.
Header Boxes Text#282d33Change the color of text wrapped in a box inside the Header container.
Header Boxes Link#11a0f3Change the color of links wrapped in a box inside the Header container.
Header SizeFluidChange the maximum width of the Header container [ Normal | Narrow | Tight | Fluid ].
Header Content SizeNormalChange the maximum width of the content inside Header container [ Normal | Narrow | Tight | Fluid ].
Header VisibilityVisibleChange the visibility of the Header container [ Visible | Hidden ].
Header Background StyleRepeatChange 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
OptionDefaultDescription
Main Background ImageChoose a background image for the Main container.
Main Background#f8f8f8Change the background color of the Main container.
Main Text#282d33Change the color of text inside the Main container.
Main Link#11a0f3Change the color of links inside the Main container.
Main Boxes Shade 1#f8f8f8Change 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#ebebebChange the third color shade for the Main container.
Main Boxes Text#282d33Change the color of text wrapped in a box inside the Main container.
Main Boxes Link#11a0f3Change the color of links wrapped in a box inside the Main container.
Main SizeFluidChange the maximum width of the Main container [ Normal | Narrow | Tight | Fluid ].
Main Content SizeNormalChange the maximum width of the content inside the Main container [ Normal | Narrow | Tight | Fluid ].
Main VisibilityVisibleChange the visibility of the Main container [ Visible | Hidden ].
Main Background StyleRepeatChange 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
OptionDefaultDescription
Footer Background ImageChoose a background image for the Footer container.
Footer Background#282d33Change the background color of the Footer container.
Footer Text#ffffffChange the color of text inside the Footer container.
Footer Link#2bd696Change the color of links inside the Footer container.
Footer Boxes Shade 1#394048Change the first color shade for the Footer container.
Footer Boxes Shade 2#31373eChange the second color shade for the Footer container.
Footer Boxes Shade 3#1f2327Change the third color shade for the Footer container.
Footer Boxes Text#ffffffChange the color of text wrapped in a box inside the Footer container.
Footer Boxes Link#2bd696Change the color of links wrapped in a box inside the Footer container.
Footer SizeFluidChange the maximum width of the Footer container [ Normal | Narrow | Tight | Fluid ].
Footer Content SizeNormalChange the maximum width of the content inside the Footer container [ Normal | Narrow | Tight | Fluid ].
Footer VisibilityVisibleChange the visibility of the Footer container [ Visible | Hidden ].
Footer Background StyleRepeatChange 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
OptionDefaultDescription
Sidebar Size LG4/12Choose 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 MD4/12Choose 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 SM12/12Choose 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 PositionLeftSwitch the position of the Sidebar compared to the Content [ Left | Right ].
Sidebar VisibilityBothChange 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
OptionDefaultDescription
Content Size LG8/12Choose 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 MD8/12Choose 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 SM12/12Choose 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
OptionDefaultDescription
Post Columns LG1Choose the number of columns for this module on large (desktop and bigger) screens [ 1 | 2 | 3 | 4 | 6 | 12 ].
Post Columns MD1Choose the number of columns for this module on medium (landscape tablet and bigger) screens [ 1 | 2 | 3 | 4 | 6 | 12 ].
Post Columns SM1Choose the number of columns for this module on small (portrait tablets and smaller) screens [ 1 | 2 | 3 | 4 | 6 | 12 ].
Post StyleSpaciousSelect a style for posts [ Spacious | Minimal ].
Post Photoset Caption StyleBottomSelect a style for Photoset captions [ Bottom | Hidden | Snapchat | Hover ].
Post Footer VisibilityVisibleChange the visibility of the post footer [ Visible | Hidden ].
Post Footer HR VisibilityVisibleChange the visibility of the horizontal rule before post footer [ Visible | Hidden ].
Post Footer Icons StyleBoxedChange the style of post footer’s icons [ Boxed | Unwrapped ].
Post Reblog VisibilityVisibleChange the visibility of post reblog button [ Visible | Hidden ].
Post Likes VisibilityVisibleChange the visibility of post like button [ Visible | Hidden ].
Post Tags VisibilityVisibleChange the visibility of post tags [ Visible | Hidden ].
Post Tags StylePopoverChange the way post tags are displayed [ Popover | Pills ].
Post Permalink VisibilityHiddenChange the visibility of post permalink [ Visible | Hidden ].
Post Sharing VisibilityVisibleChange the visibility of post sharing [ Visible | Hidden ].
Post Author VisibilityHiddenChange the visibility of post author [ Visible | Hidden ].
Post Source VisibilityVisibleChange the visibility of post source (do you really want to do that?) [ Visible | Hidden ].
Post Date VisibilityVisibleChange the visibility of post publish date [ Visible | Hidden ].
Post Notes VisibilityVisibleChange the visibility of post notes count and post notes list on permalink [ Visible | Hidden ].
Post Related Posts Columns2 Select the number of columns for Related posts [ 2 | 1 | 3 | 4 | 6 | 12 ].
Post Photoset GridONSwitch photoset grid [ ON | OFF ].
Post Related PostsONSwitch related posts [ ON | OFF ].
Post Photoset Gutter5Change the gutter between photoset grid columns e.g. 5 (no suffix).
Post Related Posts TitleRelated PostsChange 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
OptionDefaultDescription
Pagination HookContentChoose the module hook [ Content | Sidebar | Disabled ].
Pagination Hook Order5Choose the module position inside the hook [ 5 | 1 | 2 | 3 | 4 ].
Pagination TypeNormalChange 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
OptionDefaultDescription
Navbar HookHeaderChoose the module hook [ Header | Content | Sidebar | Footer | Disabled ]
Navbar Hook Order1Choose the module position inside the hook [ 1 | 2 | 3 | 4 | 5 ]
Navbar StyleFixed TopChange the style and position of the Navbar [ Fixed Top | Fixed Bottom | Inline | Pills | Slide | Fixed Slide ]
Navbar MarginNormalChange 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 WidthNormalSet the maximum width of the contents of Navbar [ Normal | Fluid | Narrow | Tight ].
Navbar Slide Add AvatarTrueAdds Avatar to the sliding navbar [ True | False ].
Navbar Slide Add TitleFalseAdds Avatar to the sliding navbar [ False | True ].
Navbar Home ButtonONAdds a home button to the Navbar ON | OFF
Navbar Dropdown PagesOFFStack custom pages in a dropdown menu ON | OFF
Navbar Random ButtonOFFAdds a random post button to the Navbar ON | OFF
Navbar More ButtonONAdds a “more” button to the Navbar containing the RSS, archive and search ON | OFF
Navbar Height60Set the height of the navbar e.g. 60 (no suffix). Does not affect Pills and Sliding navbar types.
Navbar Tags TitleTagsThe 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
OptionDefaultDescription
Carousel Slide X ImageChoose a background image for that specific slide
Carousel HookDisabledChoose the module hook [ Disabled | Header | Content | Sidebar | Footer ].
Carousel Hook Order2Choose the module position inside the hook [ 2 | 1 | 3 | 4 | 5 ].
Carousel VisibilityIndexChoose when this module is going to be visible [ Index | Permalink | Both ].
Carousel StyleNormalChoose the background image style [ Normal | Seemless ].
Carousel TransitionFadeChange the transition effect ot the Carousel [ Fade | Slide ].
Carousel NavigationBoth On HoverChoose which and when each part of the navigation would be visible [ Both On Hover | Controls | Controls On Hover | Indicators | Indicators On Hover ].
Carousel Background StyleCoverChoose the background image style [ Cover | Contain | Repeat ].
Carousel MarginNormalChange 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 Height400Set the Carousel height in pixels e.g. 400 (no suffix, just a number).
Carousel Overlay Opacity0.2Set 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
OptionDefaultDescription
LogoChoose a Logo image for your blog/website [ .png | .jpg | gif ].
Logo HookDisabledChoose the module hook [ Disabled | Navbar | Header | Sidebar | Footer ].
Logo Hook Order1Choose the module position inside the hook [ 2 | 1 | 3 | 4 | 5 ].
Logo StyleSquareChoose the the shape of the Logo [ Square | Circle ].
Logo ContainerFalseSelect 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
OptionDefaultDescription
Title[inherit]The title of your blog
Title HookNavbarChoose the module hook [ Navbar | Header | Sidebar | Footer | Disabled ]
Title Hook Order2Choose the module position inside the hook [ 2 | 1 | 3 | 4 | 5 ]
Title StyleMedium BoldChoose 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 ContainerFalseSelect 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
OptionDefaultDescription
Avatar[inherit]The avatar of your blog.
Avatar HookSidebarChoose the module hook [ Sidebar | Header | Footer | Hero | Disabled ]
Avatar Hook Order1Choose the module position inside the hook [ 1 | 2 | 3 | 4 | 5 ]
Avatar StyleCircleChoose the shape of the Avatar [ Circle | Square ]
Avatar ContainerFalseSelect 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
OptionDefaultDescription
Description[inherit]The description of your blog.
Description HookSidebarChoose the module hook [ Sidebar | Header | Footer | Disabled ].
Description Hook Order2Choose the module position inside the hook [ 2 | 1 | 3 | 4 | 5 ].
Description Text AlignLeftChange the alignment of the Description text [ Left | Center | Right | Justify].
Description ContainerTrueSelect whether the module will be wrapped in container [ True | False ].
  • Jumbotron – Showcase something really important in a large “hero” box
OptionDefaultDescription
Jumbotron HookDisabledChoose the module hook [ Disabled | Header | Sidebar | Content | Footer ].
Jumbotron Hook Order1Choose the module position inside the hook [ 3 | 1 | 2 | 4 | 5 ].
Jumbotron VisibilityIndexChoose when this module is going to be visible [ Index | Permalink | Both ].
Jumbotron Text AlignCenterChange the alignment of Jumbotron elements [ Center | Left | Right | Justify ]
Jumbotron ContainerTrueSelect whether the module will be wrapped in container [ True | False ].
Jumbotron TitleJumbotronChoose 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
OptionDefaultDescription
Feature X Image An icon or an image that best represents that specific feature [ .png | .jpg | .gif ].
Features HookDisabledChoose the module hook [ Disabled | Header | Sidebar | Content | Footer ].
Features Hook Order3Choose the module position inside the hook [ 3 | 1 | 2 | 4 | 5 ].
Features Columns LG4Choose the number of columns for this module on large (desktop and bigger) screens [ 4 | 1 | 2 | 3 ].
Features Columns MD2Choose the number of columns for this module on medium (landscape tablet and bigger) screens [ 2 | 1 | 3 | 4 ]
Features Columns SM1Choose the number of columns for this module on small (portrait tablet and smaller) screens [ 1 | 2 | 3 | 4 ].
Features VisibilityIndexChoose when this module is going to be visible [ Index | Permalink | Both ].
Features StyleContainedChoose a style for individual features boxes [ Contained | Unwrapped ].
Features ContainerFalseSelect whether the module will be wrapped in container [ True | False ].
Features TitleFeaturesThe 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 PriceSet 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
OptionDefaultDescription
Progress HookDisabledChoose the module hook [ Disabled | Header | Sidebar | Content | Footer ].
Progress Hook Order3Choose the module position inside the hook [ 3 | 1 | 2 | 4 | 5 ].
Progress ContainerTrueSelect whether the module will be wrapped in container [ True | False ].
Progress TitleProgressThe 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
OptionDefaultDescription
External Links HookDisabledChoose the module hook [ Disabled | Header | Sidebar | Footer ].
External Links Hook Order1Choose 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 LinkSet an external Facebook link e.g. http://facebook.com/
External Twitter LinkSet an external Twitter link e.g. http://twitter.com/
External LinkedIn LinkSet an external LinkedIn link e.g. http://linkedin.com
External GooglePlus LinkSet an external GooglePlus link e.g. http://plus.google.com/
External Tumblr LinkSet an external Tumblr link e.g. http://tumblr.com/
External Pinterest LinkSet an external Pinterest link e.g. http://pinterest.com/
External WeHeartIt LinkSet an external WeHeartIt link e.g. http://weheartit.com/
External Instagram LinkSet an external Instagram link e.g. http://instagram.com/
External Flickr LinkSet an external Flickr link e.g. http://flickr.com/
External YouTube LinkSet an external Youtube link e.g. http://youtube.com/
External Vimeo LinkSet an external Vimeo link e.g. http://vimeo.com
External Vine LinkSet an external Vine link e.g. http://vine.com
External DeviantArt LinkSet an external DeviantArt link e.g. http://deviantart.com
External Dribbble LinkSet an external Dribbble link e.g. http://dribbble.com/
External Behance LinkSet an external Behance link e.g. http://behance.net/
External Reddit LinkSet an external Reddit link e.g. http://reddit.com/
External StumbleUpon LinkSet an external StumbleUpon link e.g. http://stumbleupon.com/
External Twitch LinkSet an external Twitch link e.g. http://twitch.tv/
External Steam LinkSet an external Steam link e.g. http://steampowered.com/
External CodePen LinkSet an external CodePen link e.g. http://codepen.io/
External JSFiddle LinkSet an external JSFiddle link e.g. http://jsfiddle.net/
External Skype LinkSet a link to start Skype chat e.g. skype-username
External Website LinkSet an external Website link e.g. http://yourwebsite.com/
External eMail LinkSet an eMail link e.g. mail@hosting.com
  • Image Feed – Get your latest images from various social networks
OptionDefaultDescription
Image Feed HookDisabledChoose the module hook [ Disabled | Header | Content | Sidebar | Footer ].
Image Feed Hook Order2Choose the module position inside the hook [ 2 | 1 | 3 | 4 | 5 ].
Image Feed StyleSquareChoose the style of the images [ Square | Circle ].
Image Feed Count10Choose the maximum number of images that will be shown [ 10 | 20 ].
Image Feed ContainerTrueSelect whether the module will be wrapped in container [ True | False ].
Image Feed Instagram TokenAdd your Instagram access token e.g. 0000000000.0000000.000000aaaaaaaaaaa0000000000abcde. Read this article to learn how to get yours.
Image Feed Tumblr Blog URLAdd the full URL of a Tumblr blog e.g. myblog.tumblr.com or myblog.com.
Image Feed WeHeartIt UsernameAdd WeHeartIt username e.g. weheartit.
Image Feed Pinterest UsernameAdd Pinterest username e.g. pinterest.
Image Feed Flickr User IDAdd Flicker User ID 00000000@N00. Use idgettr to see your Flickr ID.
Image Feed DevinatArt UsernameAdd DeviantArt username e.g. deviantart.
Image Feed Behance UsernameAdd 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
OptionDefaultDescription
Twitter HookDisabledChoose the module hook [ Disabled | Header | Content | Sidebar | Footer ].
Twitter Hook Order3Choose the module position inside the hook [ 3 | 1 | 2 | 4 | 5 ].
Twitter Columns LG3Choose the number of columns for this module on large (desktop and bigger) screens [ 3 | 1 | 2 | 4 | 6 | 12 ].
Twitter Columns MD2Choose the number of columns for this module on medium (landscape tablet and bigger) screens [ 2 | 1 | 3 | 4 | 6 | 12 ].
Tweets Count6 Choose the number of tweets to be shown [ 6 | 1 | 2 | 3 | 4 | 5 | 7 | 8 | 9 | 10 ].
Twitter ContainerTrue 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.
OptionDefaultDescription
Custom Text HookDisabledChoose the module hook [ Disabled | Header | Content | Sidebar | Footer ].
Custom Text Hook Order5Choose the module position inside the hook [ 5 | 1 | 2 | 3 | 4 ].
Custom Text VisibilityBothChoose when the module will be visible [ Index | Permalink | Both ].
Custom Text ContainerTrueSelect 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.
OptionDefaultDescription
Likes HookDisabledChoose the module hook [ Disabled | Header | Content | Sidebar | Footer ].
Likes Hook Order5Choose the module position inside the hook [ 5 | 1 | 2 | 3 | 4 ].
Likes ContainerTrueSelect 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.
OptionDefaultDescription
Following HookDisabledChoose the module hook [ Disabled | Header | Content | Sidebar | Footer ].
Following Hook Order5Choose the module position inside the hook [ 5 | 1 | 2 | 3 | 4 ].
Following ContainerTrueSelect 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.
OptionDefaultDescription
Group Members HookDisabledChoose the module hook [ Disabled | Header | Content | Sidebar | Footer ].
Group Members Hook Order5Choose the module position inside the hook [ 5 | 1 | 2 | 3 | 4 ].
Group Members ContainerTrueSelect 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.
OptionDefaultDescription
Loading Overlay Color#ffffffSelect the Loading Overlay text color.
Loading Overlay Text#282d33Select the Loading Overlay background color.
Loading Overlay BrandAvatarSelect a branding for the Loading Overlay [ Avatar |  Title | Logo ].
Loading Overlay TransitionFadeSelect a transition effect for the Loading Overlay [ Fade | Split ].
Loading Overlay StyleMonochromeSelect your preferred loading animation style [ Colorful | Monochrome ].
Loading OverlayONSwitch 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.
OptionDefaultDescription
Back to Top ButtonONSwitch Back to Top Button [ ON | OFF ]
  • CSS Animations – Smooth transitions on different elements. If disabled, transitions will happen instantly.
OptionDefaultDescription
CSS AnimationsONSwitch CSS Animations [ ON | OFF ]
  • Border Radius – Set the border radius of all elements on your blog
OptionDefaultDescription
Border Radius3Enter 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
OptionDefaultDescription
Border Width0Enter 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
OptionDefaultDescription
Border StylesolidEnter 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
OptionDefaultDescription
Box Shadow0px 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.
OptionDefaultDescription
Eye CatcherOFFSwitch Eye Catcher [ ON | OFF ]
Eye Catcher Offset1500Set 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 TitleThe Eye CatcherSet 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
OptionDefaultDescription
Disqus CommentsEnter 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
OptionDefaultDescription
Google AnalyticsEnter 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
OptionDefaultDescription
Ad Unit Above HeaderPreview
Ad Unit Above Header Margin30px 0 0Change the margin for this ad unit.
Ad Unit Below HeaderPreview
Ad Unit Below Header Margin0 0 30pxChange the margin for this ad unit.
Ad Unit Above MainPreview
Ad Unit Above Main Margin30px 0 0Change the margin for this ad unit.
Ad Unit Below MainPreview
Ad Unit Below Main Margin0 0 30pxChange the margin for this ad unit.
Ad Unit Above FooterPreview
Ad Unit Above Footer Margin30px 0 0Change the margin for this ad unit.
Ad Unit Above ContentPreview
Ad Unit Above Content Margin30px 0 0Change the margin for this ad unit.
Ad Unit Below ContentPreview
Ad Unit Below Content Margin0 0 30pxChange the margin for this ad unit.
Ad Unit Above SidebarPreview
Ad Unit Above Sidebar Margin30px 0 0Change the margin for this ad unit.
Ad Unit Below SidebarPreview
Ad Unit Below Sidebar Margin0 0 30pxChange 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
OptionDefaultDescription
Custom JavaScriptAdd 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
OptionDefaultDescription
Title Font'Roboto', sans-serifChange the blog Title font.
  • Text Font
OptionDefaultDescription
Text Font'Roboto', sans-serifChange the blog text font.
  • Headings Font
OptionDefaultDescription
Headings Font'Roboto', sans-serifChange 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
OptionDefaultDescription
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
OptionDefaultDescription
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

Cubthemes © 2014 - 2018