Introduction

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.

Features

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.

Installation

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.

Customization

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:

http://pixelmoxie-quadro-theme.tumblr.com/

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

http://pixelmoxie-quadro-theme.tumblr.com/[target=blank]

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.

Logo

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.

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.

Sidebar Portrait Image

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.

Sidebar Widgets

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.

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.

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:
309546888.674061d.879f8f19f2a94b29ad5d9fb7135bb658

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.

Examples:

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:

animals,
cute pets,
animated-gifs,
_another_cool_tag,
photography,
illustration

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.

#222425

Logo Text

Text color for the logo.

#fd5249

Logo Text Hover

Text color for the logo, on hover.

#e5e6e6

Main Background

Main body background color.

#2c2e30

Main Text

Main body text color. Applies to the individual post pages, pagination, site footer, etc.

#7a7d7f

Banner Slider Dots

Color for the banner slider pagination dots.

#2c2e30

Banner Slider Active Dot

Color for the banner slider active dot (current slide).

#fd5249

Headings

Text color for the headings (h1, h2, h3, etc.) Applies to the post titles on individual post pages.

#8c8887

Accent

Main accent color. Applies to several elements and many "hover" states.

#fd5249

Links

Text color for links, mainly on individual post pages, also for other elements.

#fd5249

Links Hover

Text color for links, on hover.

#e5e6e6

Aside Background

Background color for the sidebar.

#222425

Aside Text

Text color for the sidebar.

#7f7b7a

Aside Headings

Text color for the sidebar headings (widget titles, navigation menu.)

#afacac

Aside Links

Text color for the sidebar links.

#bebcbb

Aside Links Hover

Text color for the sidebar links, on hover.

#fd5249

Aside Menu Text Hover

Text color for the sidebar navigation menu items, on hover.

#f5f5f5

Aside Submenu Background

Background color for the navigation submenu (the dropdown listing pages.)

#1b1c1d

Box Border

Border color for the grid boxes. Applies to the bottom half of the box.

#1d1f20

Box Background

Main background color for the grid boxes.

#1f2123

Box Text

Main text color for the grid boxes.

#66696b

Box Tags Background

Background color for the grid boxes tags block (very bottom of each box.)

#1d1f20

Box Tags Text

Text color for the grid boxes tags block (very bottom of each box.)

#484a4b

Box Tags Text Hover

Text color for the grid boxes tags block, on hover.

#616365

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

#383b3e

Reading Pane Text

Text color for the grid boxes "reading pane".

#878a8c

Link Answer Well Background

Background color for the "well" displayed on Answer and Link posts on the grid (the question and the link itself).

#27292b

Link Answer Well Text

Text color for the "well" displayed on Answer and Link posts on the grid.

#878a8c

Link Answer Well Text Hover

Text color for the "well", on hover. Applies to Link posts.

#a1a3a5

Post Type Icons Background

Background color for the post type icon (top-left or top-right corner of each grid box).

#383b3e

Post Type Icons Stroke

Stroke color for the post type icon on normal state (on hover, the Accent color is applied.)

#fd5249

Box Actions Background

Background color for the block in the middle of each box, housing the "like", "reblog" and "share" icons.

#27292b

Box Actions Stroke

Stroke color for the "like", "reblog" and "share" icons on the grid.

#1e1f1f

Liked Heart Stroke

Stroke color for the "like" icon when you liked a post already.

#cd1828

Permalinks Actions Background

Background color for the block housing the "like", "reblog" and "share" icons on permalink pages.

#242628

Permalinks Actions Stroke

Stroke color for the "like", "reblog" and "share" icons on permalink pages.

#595b5d

Share Box Background

Background color for the "sharing" box.

#1b1c1d

Share Box Text

Text color for the "sharing" box blocks (short URL at the top.)

#7a7d7f

Share Box Icon Background

Background color for the "sharing" box icons when not on hover.

#222425

Share Box Icon Fill

Fill color for the "sharing" box icons when not on hover.

#484a4b

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.

#242628

Pagination Animation Dots

Colors of the animation dots while loading posts. Alternates with Accent color.

#1d1f20

Social Links Background

Background color for the social links when not on hover.

#181a1b

Permalinks Tags Background

Background color for the tag button on individual post pages.

#242628

Permalinks Tags Background Hover

Background color for the tag button on individual post pages, on hover.

#fd5249

Permalinks Tags Text

Text color for the tag button on individual post pages.

#616365

Permalinks Tags Text Hover

Text color for the tag button on individual post pages, on hover.

#f5f5f5

Selection Background

Background color for selected text.

#222425

Selection Text

Text color for selected text.

#f5f5f5

“Snow” Demo Color Values

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

Support

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.