Quadro Tumblr Theme Documentation v1.2.6


Welcome to PixelMoxie's Quadro Tumblr Theme documentation!

Quadro is a stylish Tumblr theme with a Masonry powered grid layout and an emphasis on sharing of content. Quadro offers a flexible grid with variable box sizes, an off-canvas sidebar which can be optionally "pinned" on large screens, and plenty of customization options.


Crispy design

Quadro uses CSS3 properties—gradients, drop shadows, transparency—and SVG (scalable vector graphics) for all of the icons and user interface. This ensures that your website will look great on any device, no matter its screen resolution or pixel density. You can use a text logo or an image one, with an option to upload a retina logo image as well.

Ajax post loading and endless scrolling

Choose between regular static pagination links, Ajax post loading with the click of a button, or true endless scrolling without the need for user interaction.

Off-canvas sidebar with plenty of widgets

The off-canvas sidebar can be optionally "pinned" on large screens, which means it will be always visible on the left above a certain screen width. The included widgets are: Navigation and search, Twitter, Dribbble, Flickr, Instagram and the Social widget.

Flexible Masonry layout

The homepage grid is made-up of columns that are about 300 pixels wide. Each block can span a single column, or you can use the special tags medium and large so they span two or three columns instead. You can also limit the grid width to four, three or two columns.

Focus on sharing

Both on the homepage and individual pages, each post features a widget with "reblog", "like" and "share" actions prominently, with an stylish and exclusive design.

Photosets Grid

Responsive photoset grids lets you arrange your images in any way you want.

"Fake" titles for image, audio and video posts

You can display a title for this post types on the homepage by simply highlighting the first caption paragraph and making it bold.

Social Icon Links

Links to your favorite social networks are displayed at the bottom of the sidebar. These are the included social links: Bandcamp, Behance, Blogger, Delicious, Deviantart, Digg, Dribbble, Email, Etsy, Facebook, Flickr, Forrst, Foursquare, Github, Google Plus, Instagram, Lastfm, Linkedin, Myspace, Picasa, Pinboard, Pinterest, Quora, Rdio, Reddit, Rss, Skype, Soundcloud, Spotify, Squarespace, Stumbleupon, Tumblr, Twitter, Vimeo, Wordpress, and Youtube.

Support for all post types

Quadro supports Text, Photo, Quote, Link, Chat, Audio, Video, and Answer post types.

More features

  • Support for user created pages.
  • Text or image based logo with optional retina version.
  • Google Web Fonts for headings and logo.
  • Support for Disqus commenting system.


Login to your Tumblr account, and once on your dashboard, click on the Account icon on the top-right corner of the page.


From the drop-down list, select the blog where you want to install the theme, and then click on Edit appearance.


Once on the Settings page, click on the Edit theme button.


Click on the Edit HTML link, right below the current theme name.


Open the .zip archive you downloaded and locate the file pixelmoxie-quadro-1.2.6.html or pixelmoxie-quadro-1.2.6.txt inside the theme folder. Open the file with a text editor of your choice.

If you’re on Windows, Notepad++ is a free and lightweight text editor. If you’re on a Mac and you’re using TextEdit, follow the steps outlined on this article to set up TextEdit to work with HTML files. Or you could download TextWrangler—a no-frills text editor for the Mac—and give it a try.

Copy the contents from the file you just opened and paste it on the HTML editor, replacing the old theme code on its entirety. It’s important that the code looks pretty much as in the image below, or the theme won't install properly; if it doesn’t, your text editor probably parsed the code and what you pasted isn't the raw HTML markup. Make sure your text editor is properly configured to work with HTML files and that the code isn't altered.


Click on the Update Preview button, and once the preview is updated, click on the Save button and reload the page.


Before you start customizing your theme, click on Advanced options at the bottom of the customizer.

Make sure Use default mobile theme is off, or the theme will not be used when viewing your blog on mobile devices. You should also set the Posts per page to fifteen, the maximum possible value, so that your portfolio projects load as quickly and seamlessly as possible.



Header and Background Images

The theme main body and header are styled with just plain colors out of the box, but you can upload background images for just those two elements if you so desire. Use the upload buttons label Body Background and Header Background respectively. Set the Header Background Style select box to cover if you want the image to fill the entire header area, or tile if you want it to repeat at whatever the image size is.

The option Header Background Alignment will affect the way the image is vertically aligned inside the header (center, top, or bottom).

Header Banner Slider

Since version 1.2.0, Quadro’s header can be set as an slider with sliding backgrounds. First you need to make sure the option Enable Banner Slider is switched on, then you can upload up to 5 slider images using the image upload fields labeled Slider Image [1-5].

Keep in mind the images will be used as a background for the slides, and depending on the header's dimensions may not be entirely visible—some portions of the images may be clipped.

Just as with the header background image, the Header Background Style option will affect the way the images are displayed for all the slides. If set to cover, the uploaded image will cover the entire area of the slide. If set to tile, the image will be displayed at its natural size and repeated to fill the area.

The option Header Background Alignment will affect the way the image is vertically aligned inside the slide (center, top, or bottom).

The banner slider has two available transition types, swipe and fade. Set it using the Banner Slider Transition dropdown.

The Banner Slider Interval option is the interval between each slide in milliseconds. A value of 7000 will result in a seven seconds “wait” in between slides, for example. Leave the option empty if you want to prevent the slider from auto-starting.

Additionally, each slide can be turned into a hyperlink. You can enter the URL corresponding to each slide using the text fields labeled Slider URL [1-5]. Enter the full URL, including the http:// portion, for example:


If you want the link to open in a new tab, just append [target=blank] at the end of the URL:


When the active (visible) slide contains a link, the link surrounding the header logo will be disabled, to prevent confusion when clicking on the slide. If you want to disable this behavior, turn off the option Override Banner Homepage Link.

Sometimes, when using the header as a banner slider, you may want to hide the actual site logo, especially if your logo or branding is incorporated into the imagery of your slides. To do so, simply add the following CSS snippet into the Add Custom CSS box, on the Advanced options section of the customizer:

.logo-wrapper {
    display: none;

If you do that, it’s a good idea to have your first slide link to your blog’s homepage.

The colors for the banner slider pagination dots are set by the color pickers Banner Slider Dots and Banner Slider Active Dot.

Since version 1.2.2, the header can be set to fullwidth by enabling the option Fullwidth Header.

The blog logo is set to display as text by default. The Google font used by the logo—and headings—out of the box is Montserrat. Dealing with Google web fonts is explained further on this document. The logo font size will adapt to the header width, but if you want the logo to be larger or smaller in general, you can change the value of Logo Font Scale. Leaving it at 1 means the logo size is unaffected. To make it larger, enter a higher value: 1.25, 1.5, 1.9. Entering 2 means that you're actually doubling its size, for example. To make the logo smaller, enter values lesser than 1 (0.875, 0.75, 0.5).

To use an image instead of text, make sure the option Use Image Logo is on, and then upload your logo images using the fields Logo and Logo HiDPI. The later one is to upload the high-res or retina version of your logo, which should be exactly twice as big as the regular one. There aren't strict guidelines regarding logo image size, but use common judgment. The logo on the main demo is about 500 pixels wide. Your logo will shrink to fit inside the header if necessary.

You can optionally display a thick border around the logo (Display Logo Border), and if you're using the text logo, apply text transformation using the option Logo Text Transform (uppercase, capitalize, lowercase, none).

To display a slogan or tagline below the logo, type a short line of text into the Tagline field.

Taming The Header Height

The site header has a flexible height, which is controlled by the option Masthead Height Percentage. This options sets the header height as a percentage of it width. So, if you set it to 100, that means the header will be a square, and if you set it to 50, a rectangle. The default value is 56.25.

The options Indexpage Masthead Max Height and Permalink Masthead Max Height limit the height of the header so it doesn't get too tall, on the index page and permalink pages. The default values are 450 and 320. Although this values are pixels, you should enter them unitless.

The option Masthead Min Height sets the minimum height for the header, so it doesn't get too tiny on small screens, and its default value is 220.

Use this options in combination if you need a taller header to fit a particularly sized logo, for example.

Grid Box Sizes

Each box on the homepage grid spans one column by default (about 300 pixels wide). Use the tags _medium or _large when creating or editing a post to make it span two or three columns instead (the underscore is to prevent the tags from showing both on the blog front-end and on Tumblr's dashboard).

Fake Titles

To "fake" the titles for Photo, Photosets, Audio and Video posts, simply edit the post caption and make sure the first paragraph contains a single line of bold text, which will become the post title.

titles for all post types
titles for all post types

Limiting The Widths

You can restrict the homepage grid and the content of the individual posts to four, three and two columns in width, using the options Limit Indexpage To [x] columns and Limit Permalinks To [x] columns.

If your images get too big on permalink pages, enable the option Prevent Image Upscaling to prevent them from getting larger than their natural size. This only work for single images. If you want to limit the width of photosets, use the option Maximum Photoset Width instead, and enter something like 700 or 800, for example.

Endless Scrolling

When the option Load Posts With Ajax is enabled, the normal pagination links are replaced by a "Load More Posts" button at the bottom of the grid, which load the next set of posts. The number of posts to load will be set by the option Posts Per Page, on the Advanced Options section of the customizer.

If Endless Scroll is enabled, then no user interaction will be necessary, and posts will be loaded as soon as you scroll past the bottom of the grid.

You need to disable both these options if you want the regular Older Posts and Newer Posts pagination links.

Use the Avatar field to upload an image to be displayed at the top of the off-canvas sidebar. Your image should be at least 360 pixels wide.

Twitter Widget

To show your latest tweets, you need to authorize Tumblr to use Twitter on your behalf. Go to the Settings page, select your blog, and scroll down until you see the Share on Twitter button. After authorizing the application Tumblr will be able to read the tweets from your timeline. Use the option Twitter Count to set how many tweets should be displayed (default is 3).

Flickr Widget

To enable the Flickr widget you need to provide a Flickr User ID. Go to idGettr and enter the address of your photostream and it'll find the number for you. Use Flickr Count to set the number of images to be displayed.

Dribbble Widget

To enable the Dribbble widget just type your username into the Dribbble Username field.

In version 1.2.5, the Dribbble widget has been updated to work with the new API, so you’ll need to provide an additional piece of information—a Client Access Token.

Head over to https://dribbble.com/account/applications/new to register an application. Fill in all the fields and submit the form. You can enter your portfolio URL for both Website URL and Callback URL.

Register a Dribbble application

After registering the app, you’ll be presented with a few pieces of info—a Client ID, a Client Secret, and a Client Access Token. Copy the value of your Client Access Token and paste it into the Dribbble Client Access Token field.

Dribbble Client Access Token

Use Dribble Count to set the number of images to be displayed.

Instagram Widget

To enable the Instagram widget you need a little piece of info called Access Token. Go to the jQInstaPics homepage to retrieve your access token. Scroll down the page and click on the Retrieve my details bro! button. Once you authorize the application, you should be taken back to the jQInstaPics homepage and see something like this at the bottom:

Your Access Token is:

Paste the token into the Instagram Access Token field, and use the Instagram Count field to set the number of images to be shown.

Photostream Sliders

To enable an image slider (Swiper) for each photostream—instead of displaying them stacked—use the option Enable Photostream Slider. The slider will not autostart by default. If you want that behaviour, you need to set an slider interval in milliseconds (5000 for example) using the fields Instagram Interval, Flickr Interval and Dribbble Interval.

Social Media Icons

To display the social media icons, first enable the widget (Show Social Widget), then enter the URL for each of the social services you want to show (URL Behance, URL Blogger, etc.). Don't forget to include the http:// or https:// portion of the URL!

Google Web Fonts

Google Web Fonts are available for the Logo and Headings, although some other elements will inherit your choice of heading web font as well.

Enter the web font family name and weight into the fields: Headings Font Family, Headings Font Weight, Logo Font Family, and Logo Font Weight.


Roboto, 500
Droid Serif, 700
Raleway, 900
Titillium Web, 300

The default Google Web Font for both logo and headings is Montserrat with a font weight of 400.

Use the options Headings Font Scale and Logo Font Scale to alter the relative size of the type. At 1 the size will be unaffected. 1.25, 1.5 or 1.6 will increase the size, and lesser values (0.875, 0.75, 0.5) will make the type smaller.

Disqus Comments

To display the Disqus comment thread—and comment count—you need to enable Show Comments and enter your Disqus Shortname.

Pages and Tags dropdowns

If you toggle the option Enable Pages Dropdown on, your user created pages will be grouped on a dropdown menu, instead of being listed on the first level navigation. The navigation is located on the sidebar by default, but if you toggle the option Move Navigation Below Header it will be shown below the header banner instead.

For more information about creating, editing and deleting Pages, and using Standard and Redirect Pages, please read this article.

Since version 1.2.4, Quadro has an option to display featured tags in a similar way. If you enable the option Enable Tags Dropdown, an additional menu dropdown will be created to display menu entries for your selected tags. Then you need to populate the option Featured Tags with the tags you want to link to. It's important you enter the tags the same way you type them when creating posts on the dashboard, and that you separate them with commas.

For example:

cute pets,

Other Options

Pinned Sidebar
Make the sidebar always visible on devices with large enough screens.
Grid Border On Hover
Enable or disable the border when you hover over the grid boxes.
Grid Icons To The Right
Place the post type icons (on the grid boxes) on right side instead of the left.
Slide Posts In
If enabled, posts will slide in from the bottom when loaded.
Index Page Photoset Gutter
The gaps between photoset images on the homepage.
Permalink Page Photoset Gutter
The gaps between photoset images on the individual post pages.
Open Permalinks On A New Tab
So you don't have to scroll back to where you were when you navigate back to the homepage.
Enable Slider Mousewheel
When enabled you can use the mousewheel to cycle between photostream images.
Lightbox Close Icon On Corner
Move the lightbox close icon to the top right corner, as opposed to being aligned to the visible image.
Use Tumblr Native Lightbox
Substitute the custom lightbox solution for Tumblr's native one.
Show Avatar Gradient and Show Masthead Gradient
Show/hide the subtle gradient at the bottom of header and the sidebar profile image.
Show About Title
Display an "About" title above the sidebar blog description.
Show Navigation
Show or hide the sidebar navigation and search box.
Show Archive Button, Show RSS Button, Show Random Button, Show Search Form
Show or hide different elements of the navigation menu.
Maximum Photoset Width
Limit the width of photosets.
[Twitter, Instagram, Flickr, Dribbble, Social Widget] Title
Set a custom title for any of the widgets.
Show Credits
Display theme credits on the blog footer.
Show Exif Data
Display photo Exif data on permalink pages when available. This option isn’t available if you installed the alternative version of the theme.
Show Posts Captions On Index
When enabled, the post caption (for photo, audio, and video posts) will be shown on the index page below the post media. It’s a good idea to “trim” the caption so it doesn’t become too long by inserting a “read-more” link after the first or second paragraph.
Enable Pages Dropdown
Group links to pages on the navigation in a dropdown menu. If disabled, links will be shown on the top-level menu.
Move Navigation Below Header
If enabled, the site navigation will be shown underneath the header, as opposed to the default location on the sidebar.
Credits Text
Type some text here to display something else where the credits would be.
Loading End Message
The message to be displayed when there are no more posts to load. Defaults to There Are No More Posts To Display.
Google Analytics ID
Enter your property ID to begin tracking your stats.

Color Options

Header Background
Background color for the header.
Logo Text
Text color for the logo.
Logo Text Hover
Text color for the logo, on hover.
Main Background
Main body background color.
Main Text
Main body text color. Applies to the individual post pages, pagination, site footer, etc.
Banner Slider Dots
Color for the banner slider pagination dots.
Banner Slider Active Dot
Color for the banner slider active dot (current slide).
Text color for the headings (h1, h2, h3, etc.) Applies to the post titles on individual post pages.
Main accent color. Applies to several elements and many "hover" states.
Text color for links, mainly on individual post pages, also for other elements.
Links Hover
Text color for links, on hover.
Aside Background
Background color for the sidebar.
Aside Text
Text color for the sidebar.
Aside Headings
Text color for the sidebar headings (widget titles, navigation menu.)
Aside Links
Text color for the sidebar links.
Aside Links Hover
Text color for the sidebar links, on hover.
Aside Menu Text Hover
Text color for the sidebar navigation menu items, on hover.
Aside Submenu Background
Background color for the navigation submenu (the dropdown listing pages.)
Box Border
Border color for the grid boxes. Applies to the bottom half of the box.
Box Background
Main background color for the grid boxes.
Box Text
Main text color for the grid boxes.
Box Tags Background
Background color for the grid boxes tags block (very bottom of each box.)
Box Tags Text
Text color for the grid boxes tags block (very bottom of each box.)
Box Tags Text Hover
Text color for the grid boxes tags block, on hover.
Reading Pane Background
Background color for the grid boxes "reading pane", which displays some of the content of text based posts (Text, Link, Chat, Quote, Answer.)
Reading Pane Text
Text color for the grid boxes "reading pane".
Link Answer Well Background
Background color for the "well" displayed on Answer and Link posts on the grid (the question and the link itself).
Link Answer Well Text
Text color for the "well" displayed on Answer and Link posts on the grid.
Link Answer Well Text Hover
Text color for the "well", on hover. Applies to Link posts.
Post Type Icons Background
Background color for the post type icon (top-left or top-right corner of each grid box).
Post Type Icons Stroke
Stroke color for the post type icon on normal state (on hover, the Accent color is applied.)
Box Actions Background
Background color for the block in the middle of each box, housing the "like", "reblog" and "share" icons.
Box Actions Stroke
Stroke color for the "like", "reblog" and "share" icons on the grid.
Liked Heart Stroke
Stroke color for the "like" icon when you liked a post already.
Permalinks Actions Background
Background color for the block housing the "like", "reblog" and "share" icons on permalink pages.
Permalinks Actions Stroke
Stroke color for the "like", "reblog" and "share" icons on permalink pages.
Share Box Background
Background color for the "sharing" box.
Share Box Text
Text color for the "sharing" box blocks (short URL at the top.)
Share Box Icon Background
Background color for the "sharing" box icons when not on hover.
Share Box Icon Fill
Fill color for the "sharing" box icons when not on hover.
Pagination Background
Background color for the pagination links and "load more" button. Text and arrows are colored same as the main body text, and the Accent color is applied on hover.
Pagination Animation Dots
Colors of the animation dots while loading posts. Alternates with Accent color.
Social Links Background
Background color for the social links when not on hover.
Permalinks Tags Background
Background color for the tag button on individual post pages.
Permalinks Tags Background Hover
Background color for the tag button on individual post pages, on hover.
Permalinks Tags Text
Text color for the tag button on individual post pages.
Permalinks Tags Text Hover
Text color for the tag button on individual post pages, on hover.
Selection Background
Background color for selected text.
Selection Text
Text color for selected text.

“Snow” Demo Color Values

To achieve the look of the “Snow” demo, please follow the instructions on this apendix.


Thank you for choosing our themes!

To get help you can post directly on this item's comments thread at ThemeForest, or you can send us a message using the form on our profile page as well.