Customization#

Selecting a Color Scheme#

The fastest way to change the look and feel of your portfolio site is to select one of the five built-in color schemes: Outer Space, Alto, Dualism, Purple Rain, and Silver. You can do so from the Color Scheme drop-down menu. Unless one the following options is enabled, all the theme colors will be defined internally by the included style-sheets and the color options on the customizer will have no effect.

Override Accent Colors#

Switching on the Override Accent Colors setting will allow you quickly personalize your site by applying a different accent color to some key elements, while keeping the base colors defined by your chosen color scheme. When this settings is on, the color chosen via the Accent color picker will be applied to buttons, quotation shapes, site navigation, social icons, filter and aside toggles, and other key elements.

Override Link Colors#

Enabling the Override Link Colors setting will allow you to override the color scheme defined link colors through your site. With this setting on, the values set via the Links, Links Hover, Readout Links, Readout Links Hover, Aside Links, and Aside Links color pickers will be applied to the corresponding hyper-links.

Override All Colors#

Enable Override All Colors to completely disregards the colors defined by the chosen color scheme. This option supersedes both Override Accent Colors and Override Links Colors. Check the Options Reference for a complete list of all the color options, their default values, and the elements they affect.

Welcome Screen#

Enable the Welcome Screen option to display a small blurb above the portfolio grid to greet your visitors. Use the Welcome Screen Mobile image uploader to set a background image for phones and small hand-held devices. Use the Welcome Screen Desktop image uploader to set a background image for tablets and desktop computers.

It’s more sensible to upload separate images for small and large devices, with different orientations and sizes, than to serve a very large hero image to mobile visitors. Even if the images should be large enough to fill the entire viewport without losing too much quality, because they will be partially covered by the welcome screen overlay layer, you can get away with using images at lower quality settings to reduce page load times.

Example: for the theme demo, we created a large background image (2560 x 1600 pixels) in Photoshop and exported it as a JPEG using the “Save for Web” command with a quality of ‘60’. After that, we ran the image through Compress JPEG to shave even more weight. The resulting image is large enough but weight only about 273KB, which is a good compromise between image quality and size. For the mobile version we edited the image to fit a taller viewport, and exported it at a size of 1242 x 2200 pixels—large enough to cater for high-density display phones.

Use the color pickers labeled Welcome Screen Heading, Welcome Screen Text, and Welcome Screen Overlay to customize the welcome screen colors, and set the opacity of the scrim (overlay) on the Welcome Screen Opacity field. Type in a value between 0 and 1 (the default is 0.7).

Enable the option Full Height Welcome Screen to make the screen take the full height of the viewport (at minimum), otherwise the height will be dictated by the screen’s contents.

Type in the welcome screen title into the Welcome Screen Title field. Plain text please, do not use HTML tags here.

Enter the smaller text below the title into the Welcome Screen Text field. You can use some HTML tags here to specify paragraphs, hyper-links and line breaks, for example:

<p>This is <a href="#" target="_blank">Monobloc</a>, a portfolio theme for Tumblr.<br>
Scroll down to bask in its beauty.</p>

You can control the size of the title relative to the regular text with the Welcome Title Size option. The available values are Normal and Larger.

Use the Scroll Down Icon drop-down to change the graphic shown to prompt the user to scroll down. The available options are Mouse and Arrow.

Portfolio Grid#

Use the Grid Layout Type drop-down to select the desired layout for your portfolio grid. The available options are: Standard, Segmented Rows, and Masonry.

With the Standard layout all the thumbnails will have the same width and height. With the Masonry layout they all will have the same width, but the height will vary depending on the thumbnail’s content (no image cropping will occur), and the thumbs will be laid out in a masonry-style grid using Metafizzy’s Isotope.

You can chose the numbers of columns to be shown on different devices and screen resolutions via the following options, which will affect both the Standard and Masonry layouts:

With the Segmented Rows layout, the thumbnails will be distributed in rows with varying numbers of columns. Use the Segmented Rows Layout option to set the desired layout. The value should be a sequence of digits—each digit represents a row and its value the number of columns in said row. For example, the default value is 234. That means that the first row will have 2 thumbnails, while the second row will have 3 and the third row will have 4. If the Loop Last Segmented Row option is on, after the third row, all the following rows will have 4 thumbnails. If the option is off, after the third row we start again from the beginning, and the fourth row will have 2 thumbnails, the fifth row will have 3, and so on.

You can change the thumbnails proportions via the Thumbnails Aspect Ratio drop-down. The available values are, from widest to tallest, landscape to portrait: 6:4, 4:3, 1:1, 3:4, and 4:6. The default value is 4:3. This will affect thumbnails with the Standard and Segmented Rows grid layout—thumbnails with the Masonry layout always keep their original aspect ratio as long as the content is an image.

Even though Monobloc was conceptualized to feature a gap-less grid, you can set a Grid Gutter to have space between the thumbnails if desired. The options are No gutter, 10, 20, 30, and 40.

Images will always stretch to fill the grid thumbnails—maintaining their proportions of course. When the image is taller than the thumbnail inner wrapper, it will be cropped at the top, at the bottom, or both, depending on the Thumbnails Alignment setting. The options are Top, Middle, and Bottom, the default being Middle.

If the option Truncate Thumbnails Titles is on, the titles will be truncated so they always fit in a single line and don’t wrap.

Use the Thumbnails Text Transform drop-down to set the thumbnail title’s text-transform property. The available options are Uppercase, Capitalize, and None.

Use the Thumbnail Button Label field to set the label for the thumbnail overlay buttons. The default value is View Project.

Use the Divider Style drop-down to change the graphic style of the divider between the thumbnail’s title and button. The available options are Zig-zag, Curvy, Edison, and Straight.

Enable the option Uncluttered Thumbnails for minimal thumbnail overlays, without separators and buttons.

Titles for All Post Types#

Since when creating a Photo, Audio or Video post, Tumblr doesn’t really give you an option to enter a post title, titles need to be faked. To do so, simply type the project title at the beginning of the post caption, on its own paragraph.

If your using the Rich Text Editor, then select the entire text and make it bold by pressing Ctrl+B (Cmd+B on a Mac) or clicking on the B icon on the floating toolbar. If you’re using the HTML Editor to format your post, wrap the title text using <b></b> or <strong></strong> tags. If you’re using Markdown to format your post, wrap the title text with **asterisks** or __underscores__.

Cover Images for Audio and Video Posts#

We’ll call “cover image” or “featured image” to the image representing a post on the portfolio grid. Naturally, for Photo posts, the cover image will be whatever image you upload to the post (or the first image in a set for a Photoset post). For most Video posts, Tumblr will provide a small video thumbnail automatically (at least for YouTube and Vimeo videos, and for videos embedded using the Tumblr video player), but even then, the video thumbnail is often too small to be useful or it doesn’t look good. Audio posts aren’t so lucky and they don’t have a thumbnail at all.

For all your Audio posts, and optionally for Video posts as well, you need to manually insert a cover image into the post description. To do so, press Enter to insert a new paragraph below the “fake” title, click on the “plus” icon that appears on the left, and then on the Camera Icon (Insert photo) to select an image from your hard drive. You can optionally paste an URL pointing to a image that is already hosted online and it will be inserted as well. If you’re using the HTML or Markdown editors, you will have to enter the relevant code to display a hosted image.

You can even use the same method to display custom cover image for a Photo or Photoset post. This is useful when the actual photo isn’t a good fit for the grid, perhaps because of its proportions, or when you want to “art direct” a specific posts for whatever reason. In that case, insert an image into the post caption as explained above, and make sure to use the _cover-img tag on your post, otherwise the custom image won’t be shown on the grid.

Cover Images for Text Based Posts#

You can make any Text, Quote, Link, and Chat post display the same way a Photo post does on the grid. You can enable this behavior globally for all posts by switching on the Text Posts Cover Images option. Beware that this setting will affect all text-based post types as long as an image is found on the post description. It may be more sensible to use this feature on a per-post basis, perhaps. To do so, simply upload/insert an image into the post description as explained for Audio and Video posts and use _cover-img to tag your post.

If Hide Cover Images is switched on, the custom cover image will be hidden when opening a post on the project expander; otherwise it will be shown both on the portfolio grid and the project expander.

Pagination Options#

If both Click To Load Posts and Endless Scrolling are switched off, standard “Previous Page” and “Next Page” links will be displayed right below the grid to navigate between portfolio pages. You can use the Pagination Previous Label and Pagination Next Label fields to change the text for the pagination buttons—the default values are Newer Projects and Older Projects respectively. If you leave these fields blank the labels will read Newer and Older respectively.

Switch on Click To Load Posts to enable loading the next page worth of posts with Ajax. If Endless Scrolling is also switched on, no user interaction will be needed, and the next batch of posts will load as soon as you scroll past the end of the portfolio grid. You can customize the labels displays for the different states of the “click to load button” by changing the values for the fields labeled Load More Posts Label, Loading Label, and No More Posts Label. The default values are Load More Projects, Loading, Please Wait, and That's all, folks!.

Portfolio Expander#

To enable Ajax functionality for the Portfolio Expander—also referred as the Project Expander—, make sure the Ajax Expander setting is switched on. This will provide a more fluid and seamless experience to your visitors. You can set the expander position via the Expander Position drop-down; the available values are Right and Center.

The Portfolio Expander features an Ajax powered navigation bar at the top; from there you can navigate the the next or previous post, and also close the expander. The way the next and previous posts are determined is controlled bu the Expander Navigation Mode setting. From the drop-down you can select Visible Posts or All Posts.

When Visible Posts is selected, the expander navigation arrows will cycle only through the posts that are currently visible on the grid. This is the default and recommended setting, as this will provide the most predictable results.

When you select All Posts, the expander navigation arrows will cycle through all you published posts, no matter if they are visible on the portfolio grid yet or if they belong to the current index page, in the case of “tag” pages. Because this mode doesn’t take into account neither “tag” and “search” pages, or the custom post ordering one can achieve on the grid by modifying the post publication date, the navigation will be more unpredictable. Think of this mode as navigating through your posts in the order they appear on your dashboard, and not on your public blog.

Use the Loader Style drop-down to change the appearance of the loading indicator. The available options are Ball, Ripple, and Spin. This setting also affects the loading indicator that shown on the initial page load.

Photoset Modes#

Photosets on permalink pages can be displayed in three different modes, which are available from the the Photoset Mode drop-down: Stacked, Grid, and Slider. This option will set the Photoset Mode globally for all published Photoset posts, but the mode can be overridden on a per-post basis by using the tags _photoset_stacked, _photoset_grid, or _photoset_slider on individual posts.

When using the Stacked mode, images will be stacked vertically. They will be scaled down to fit inside the container if necessary, but they won’t be scaled up if they are narrower than the expander viewport. When using this mode, we suggest you upload images that are formatted length-ways (so that they are wider than they are tall) and at least 1200 pixels wide.

When using the Grid mode, the grid layout will reflect the one shown on the dashboard, and you’ll be able to arrange the images in rows and columns via drag-and-drop when editing a post. By default, Photosets Grids are gutter-less, with no spacing between images. Use the Photoset Gutter field if you want to have some separation between images. Please enter a number without units, i.e.: 10 or 20. Leave empty of enter 0 for a gap-less grid.

When using the Slider mode, even if the slider will work with images that have different sizes and proportions, for a smoother experience we recommend to edit your images so they all have the same size and the slider height is consistent between slides. The slider will give you best results with images that are formatted length-ways as well.

Displaying Post Tags#

Switching the Show Permalinks Tags on and off will toggle the visibility of post tags on the Project Expander.

Sharing Widget#

To display the Sharing Widget on posts permalink pages, make sure the Share Widget setting is switched on. The Sharing Widget includes the Like and Reblog buttons, plus an expandable toolbar with options to share on Twitter, Facebook, Google+, and Pinterest. Keep in mind that the Pinterest option will only be available to those posts that have an image associated with them—a Photo or Photoset post, or any post if an image can be found on its description.

Post Notes#

Make sure the Post Notes setting is switched on if you wish to display notes on permalink pages.

Disqus And Facebook Comments#

You can display either Disqus or Facebook comments on each post permalink page. For Disqus comments, make sure the Disqus Comments option is switched on, and enter the Disqus Shortname into the Disqus Shortname field. A shortname is an unique identifier assigned to a Disqus site, i.e.: your blog. You need to register your site with Disqus and paste the registered shortname into the appropriate field.

To use Facebook comments instead, you will need a special token called a Facebook App ID. To get an application ID, you’ll need to register with Facebook as a developer. Then head over the Developers homepage and create a new App (My Apps > Add a New App). When prompted, selected “Website” as the platform, give your App a name, and click on “Create New Facebook App ID”. Complete the required fields and click on “Create App ID”. Click on “Skip Quick Start” to head on to the App dashboard. From there you should grab the text inside the “App ID” field. Paste that string into the Facebook App ID on the customizer. Finally, go to the “App review” tab on your App dashboard and choose to make it public. Making the App public means that comments left on your blog will be tied to this App and you’ll be able to use the Moderation Tools.

Finally, make sure the Facebook Comments option is switched on, and use the Facebook Comments Color Scheme drop-down to select either the Dark or Light color scheme to complement your blog.

If the Auto Expand Comments option is switch on, comment boxes for both Disqus and Facebook comments will expand automatically when you scroll down the page, otherwise visitors will need to click on the comments title to expand them. There are three options to customize the text shown on the label, when you have zero comments, a single comment, or more than one comment: Comments Label Zero, Comments Label One, and Comments Label Multiple.

The default values are, respectively:

<span>Be the first one to comment</span>.

There is <span><%= count %></span> comment.

This post has <span><%= count %></span> comments.

Feel free to edit them to your liking, keeping the <%= count %> portion as it is, as that’s the placeholder for the actual comment count. Text inside <span></span> tags will be underlined.

Portfolio Filter#

To enable filtering your portfolio project with Ajax, make sure the option Portfolio Filter is switched on. Upon expanding the filter by clicking on the ‘funnel’ icon and selecting a filter category or tag, the contents of the portfolio grid will be replaced by the new, filtered content. By default the filter tags are displayed into two columns on the filter list. If your tags are too long and they’re being cropped, of if you’d rather have a single tag per row, enable the Fullwidth Filter Tags setting.

To work with the Portfolio Filter, enter the desired filter categories of tags into the Portfolio Filter Tags field. The tags can contain multiple words, but need to be separated by commas. For example:

design, illustration and art, typography, characters, animals, colorful

Enter your tags here just as you typed them on the customizer when creating or editing your posts—they need to match exactly.

In order for the filter to work, you need to tag your posts accordingly. When you click design on the portfolio filter, for example, only your posts tagged design will appear, so make sure you have your posts tagged as needed already.

Use the Portfolio Filter Label field to customize the text on the label that pops-up when hovering over the “funnel” icon—the default value is just Filter. Use the Portfolio Filter All Label to customize the label for the first item on the portfolio filter list—the default value is just All. Another sensible value would be Everything, or All Projects. Clicking on this first item will reset the filter and load the unfiltered results.

Site Aside#

The Site Aside, or Sidebar, will always be off-canvas until opened, and will house the Main Navigation, Social Icons, Site Description, Twitter Feed, and Copyright and Credits. The Site Aside is opened by clicking or tapping into the “hamburger” icon. On large tablets and desktops, an additional vertical stripe will be shown when the Aside is closed, with a small version of your logo at the bottom, which will link back to the homepage.

The Aside is visually divided into two columns. The Aside Contents Alignment controls the alignment—the text-align property—for the contents on the left and right columns separately. The available options are Center and Left, Left and Left, Center and Center, and Left and Center.

Use the Aside Menu Label field to customize the text for the label that pops-up when hovering over the hamburger icon. The default value is Menu.

Aside Logos#

Two different logos will be shown on the Site Aside, a small logo at the bottom of the aside vertical strip (on tablets and desktops), and a large logo once the aside is opened. Use the options labeled Logo Small, Logo Small 2x, Logo Large, and Logo Large 2x to upload the standard and retina or high-density versions of the small and large logos, respectively.

The logos should be exported from your image editing software as PNG images with transparency. Remember, the retina version of each logo should be twice as big as the standard one. The small logo will be restricted to a maximum width of 80 pixels, but it can have any height. It’s a good idea to keep the small logo width under 80 pixels though, as to provide some breathing room around it, or to include some whitespace around it on your exported image. For the demo, we exported the small logo with a dimension of 48 x 53 pixels—the 2x version is of course twice as big: 96 x 106 pixels. The large logo can have any size, and it will be scaled down to fit into its container if necessary. For the demo, we exported the standard version of the large logo at around 240 pixels wide—the 2x version is of course twice as big.

Keep in mind the images are usually the biggest bottleneck when it comes to page load times, so be mindful about your images sizes. If you’re a Photoshop user, always use the “Save for Web” command to export your assets to the desired format, using the lowest quality setting that still looks good. We recommend you run your images through services like Compress PNG and Compress JPEG before uploading, to shave off even some more bytes.

Site Navigation#

The Site Navigation on the Page Aside will display links to static pages you create on the theme customizer. Check out this article for on overview of static pages in Tumblr and how to create them (scroll down to the Pages section). Your pages can have three different layout types, the most common being the Standard Layout, which you can use to create a Résumé, a Bio, or an About page, and Redirect Pages, which are useful to redirect to posts with a specific tag inside your blog, or to create a link on your main menu that that redirects to an external website, for example. More on Redirect Pages here: How to Make Redirect Pages.

Links to these pages will be displayed at the top of the menu list, as long as you don’t forget to enable “Show a link to this page” when creating them. Additional menu items will be displayed below them; these items are controls by the following settings: Show Random Link, Show Archive Link, and Show RSS Link. If you’ve enabled Let people ask questions and Let people submit posts on your blog’s settings, additional menu items will be shown at the bottom of the list. The default labels for this links are Ask me anything and Submit, and they can be changes on your blog’s settings page.

Social Icons#

To display a list of Social Icons on the Page Aside, simply enter the relevant URL for each service you want to feature. Don’t forget to include the relevant protocol (http:// or https://) at the beginning of the URL, for example: https://twitter.com/pixelmoxie

The social icons URLs are at bottom of the list of customizer options and they are labeled as [Service Name] URL. The available services are: 500px, AboutMe, Bandcamp, Behance, Blogger, Codepen, Delicious, DeviantArt, Digg, Dribbble, Dropbox, Envato, Etsy, Flickr, Forrst, Foursquare, Github, GooglePlus, IMDb, Instagram, Kickstarter, Klout, Lastfm, Linkedin, Medium, MySpace, Path, PayPal, Periscope, Picasa, Pinboard, Pinterest, Pocket, Polldaddy, Quora, Rdio, Reddit, Society6, Shop, SoundCloud, Spotify, Squarespace, Stumbleupon, Technorati, Tumblr, Twitch, Vimeo, Vine, WordPress, Yelp, Youtube, and Zerply.

To display an Email icon enter your email address into the Email Address field. An RSS will be shown if the option Show RSS Link is switched on. A Twitter icon will be shown automatically if you linked your blog to your Twitter account on your settings page. For the Facebook and Skype icons, you need to enter your Facebook Username and Skype Username respectively.

If the Colored Social Icons setting is switched on, each icon will take the social service brand color over a white background when hovered, otherwise the Accent color will be used. Justify Social Icons will distribute the icons evenly on the horizontal axis so they fill their container. Only use this option when displaying six icons or less, otherwise it’ll look weird.

Site Description#

The Site Description shown on the right column of the Page Aside takes its contents from the Description text area at the very top of the customize screen. You can use some HTML tags to format its contents. Use <p></p> tags to define paragraphs, <br> tags for line breaks, <em></em> or <i></i> tags for emphasized italic text, <strong></strong> or <b></b> tags for emphasized bold text, and <a></a> tags for hyper-links. For example:

<strong>Monobloc</strong> is a <em>stylish</em> portfolio theme for Tumblr aimed at designers and creative folks, made with love by <a href="http://www.pixelmoxie.net" title="PixelMoxie">PixelMoxie</a>.

Which results in:

Monobloc is a stylish portfolio theme for Tumblr aimed at designers and creative folks, made with love by PixelMoxie.

Twitter Feed#

Your Twitter Feed will displayed automatically on the Page Aside once you connect to Twitter on your blog’s settings page. If you want your tweets to be grouped on a neat touch-friendly carousel, make sure the options Tweets Carousel is switched on. Set the number of twets to be displayed via the Tweet Count field—the default value is 6.

Copyright Notice And Credits#

The Copyright Notice will be shown at the bottom of the Page Aside right column, displaying the current year and blog name. By default, a credits blurb will be displayed including a link to Tumblr itself and to the theme homepage. You can replace that text with anything of your choice by entering the desired text into the Credits Text field, or you can hide completely by switching off the option Show Credits.

Google Fonts#

This theme makes use of Google Fonts. For the body text, we provide you with a set of curated font families you can choose from. These families were chosen taking into consideration the quality of the typefaces and the fact that they come with several weight with matching italics, so they are “body friendly”.

Use the Body Font Family drop-down to select the desired font family for the body text. The available options are Roboto, Open Sans, Fira Sans, Source Sans Pro, Karla, Lato, and Chivo. The default one, featured on the theme demo, is Roboto.

Use the Italic Font Family drop-down to select the family for emphasized italic text. The same options available for Body Font Family are also available here, if you want the body text to have a consistent look. We also added a few serif families, in case you needed a little variation: Playfair Display, Alegreya, Source Serif Pro, Crimson Text, Old Standard TT, Noto Serif, and Vollkorn.

Use the Google Fonts Subset drop-down to select the desired font subset. The default is Latin, which you should keep unless your blog is set in a non-western language or you need special characters for some reason.

The font families for Headings, Buttons, and the Navigation Menu can be further customized. These are the relevant fields and their default values. You can use any typeface available on the Google fonts directory—just make sure the family name is a perfect match when you type it in (down to capitalization) and that the font weight you enter actually exists for the selected font, otherwise the fonts won’t be loaded and displayed properly. For example: you should type Poppins instead of poppins, and if you chose a font like Montserrat, which only comes in two weights, entering 600 for the font weight would cause the font not to load.

Some specimens we like and recommend for Headings are Montserrat, Work Sans, Poppins, and Varela Round.

For this theme, buttons and the navigation menu look best with condensed, narrow fonts. Our choice in this case was Six Caps. Other narrow fonts to consider are Teko, Open Sans Condensed, and Yanone Kaffeesatz.

Because all fonts render differently, buttons may look too small or too big, a little bit crowded or with a bit too much padding, depending on the font family you chose. To fine-tune the appearance of buttons, specially on the portfolio grid, Monobloc provides you with two extra options. Use the Buttons Size to set the size of buttons relative to the surrounding body text. The available options are Smaller, Normal, Large, Larger, and Largest. Use the Buttons Padding drop-down to adjust the white-space inside the buttons (Normal or Extra).

Use the Headings Text Transform, Thumbnails Text Transform, and Buttons Text Transform drop-downs to change the text-transform property for all the site headings, thumbnail titles, and button labels, respectively. The available options are Uppercase, Capitalize, and None.

Photostream Widgets#

Monobloc includes support for Dribbble, Instagram, and Flickr feeds, which are displayed below the portfolio grid, to make sure your precious work has the spotlight. Each photo-stream is displayed as a single, adaptive, full-width row. The number of vignettes shown will vary depending on the device viewport width, from three to eight.

To display your Dribbble shots, make sure the Dribbble Feed option is switched on. You’ll need to input two pieces of info: your Dribbble Username and a Dribbble Access Token. To get your Dribbble Access Token first you need to register an App. Head over to dribbble.com/account/applications/new, fill in all the fields and register the application. You can enter your portfolio URL for both Website URL and Callback URL. Copy the value for your Client Access Token and paste it into the Dribbble Access Token field.

Enter the title for your Dribbble feed into the Dribbble Feed Heading field. Leave empty to display Dribbble shots.

To display your Instagram photos, make sure the Instagram Feed option is switched on. You will need an Instagram Access Token to grant the application access to your feed. Make sure you’re logged in into your Instagram account, then head on to the jQInstaPics homepage, scroll down and click on the “Retrieve my details bro!” button. Once you authorize the App, you’ll be taken back and your Access Token should be displayed. Should look something like this:

Your Access Token is:
XXXXXXXXX.674061d.879f8f19f2a94b29ad5d9fb7135bb658

Copy and paste the entire token into the Instagram Access Token field. Enter the title for your Instagram feed into the Instagram Feed Heading field. Leave empty to display Instagram

To display your Flickr feed, make sure the Flickr Feed option is switched on. Go to idGettr and enter the URL of your photostream to find your Flickr ID number. Paste that value into the Flickr ID field. Enter the title for your Flickr feed into the Flickr Feed Heading field. Leave empty to display Flickr photos

Colophon#

You can use the Colophon Section—at the very bottom of the page—to display information directly or tangentially related to your site or work, add contact information, or anything you want. You can even use this space to embed a newsletter sign-up form, a Twitter embedded timeline, or anything you wish.

Make sure the Show Colophon setting is switched on, then use the Colophon Title and Colophon Text fields to customize the section title and content. You can use HTML markup for the Colophon Text field, just make sure the HTML code is properly formed and all tags have a matching closing tag, or you may break the layout of the site and invite bugs. For example, this is the markup we entered for the demo:

<p><em>Made with love by <a href="http://pixelmoxie.net/">PixelMoxie</a>. No pixels were harmed on the making of this theme.</em><br>
<em>Contact us: <a href="mailto:sayhi@pixelmoxie.net">sayhi@pixelmoxie.net</a></em></p>

Google Analytics#

To enable Google Analytics statistics for your site, simply enter your Google Analytics Tracking ID into the GA Property ID field.

Session Storage#

Switching on the Session Storage setting will improve the perceived snappiness of your portfolio site and, hence, the overall user experience. If this setting is on, when a post is fetched for the first time when you open it on the Project Expander or when you land on the post permalink page, the post contents will be stored in your browser’s SessionStorage using the post ID as the SessionStorage key.

This means that if you use the Project Expander navigation buttons to load another post (which will also be kept in storage after the initial load), when you navigate back to the original post, the theme will not make an additional request to fetch the post using Ajax; the post content will be retrieved from SessionStorage and will be shown immediately, bypassing the otherwise unavoidable loading stage. A similar thing happens when you land directly on a post permalink page and the Portfolio Grid is populated on the background, underneath the Project Expander.

This setting greatly improves the perceive snappiness of your site, so we recommend that you keep in on. Keep in mind that the posts contents will be kept in storage—or “cached”—for 30 minutes or until you close the browser window or current tab. If you’re making edits to your posts, you can disable this setting temporarily to preview your changes, because they will not be visible until the cache expires otherwise.

Other Options#

Switch on the Hide Tumblr Controls setting to hide the Tumblr controls that are displayed on mobile devices and desktops alike for both logged-in and logged-out visitors.

Use the SEO Description field to enter a short, SEO optimized description to be used as part of the document title on the index page (this will be shown, alongside the blog name, as the title on the current browser tab). If left empty, the contents of the Description text area at the top of the customizer will be used instead.