Ocular User Guide

Welcome to the full feature list and customization guide for my theme, Ocular. The Theme Options are categorized and listed below — they're in the exact same order as they are in the theme editor itself. If you need help installing this theme, please visit the theme installation guide or send me a message at my help desk. Thanks!

Theme images

Background

OPTIONAL The image that appears in the background of the page.

NOTE: This will only appear if your Background dropdown is set to Image (Full) or Image (Repeat).

Header

OPTIONAL The image that appears at the top of the sidebar.

NOTE: If the Header image is empty, it will instead use your blog's header image.

Avatar

OPTIONAL The icon that appears centered in the sidebar.

NOTE: If the Avatar image is empty, it will instead use your blog's avatar image.

Favicon

OPTIONAL The tiny icon that shows in the browser tab.

NOTE: If you leave this option empty, the favicon will instead use Avatar. If Avatar is empty, it will use your Tumblr avatar.

Theme colors

Background color

The primary background color. This color is used as the background color for both the solid and gradient background options. It's also used as the background color for the Tumblr controls at the top.

NOTE: If you've selected an image option in the Background style drop-down option, and the image you've uploaded to the Background image option is transparent, this color will show behind your transparent background image.

Gradient background color

The secondary background color. When Gradient is chosen as the Background selection, the gradient will feature Background color on the top and Gradient ackground color on the bottom.

Background text color

This changes the text color of the Tumblr controls at the top. If your Theme Credit option displays in the bottom-right corner, the Background text color will also be used for this.

Post background color

The color for the background of the posts and the sidebar. If you have any of the "Translucent" color schemes chosen in the Color scheme option, this color will be partly translucent.

Post text color

The color used for all text in your sidebar and posts. It's also used to color things like the background of the drop-down navigation, borders inside of the post, and the borders on the outside of the sidebar and posts (if you have Show borders turned on).

Accent color

The accent color of the theme. This color is used in your sidebar links (if not dropdown), your audio player background, and in your page/post pagination (if applicable).

NOTE: If you have any of the "Translucent" color schemes chosen in the Color scheme option, your accent color will not apply to your sidebar links. The sidebar links will instead be the same color as the rest of your text.

Theme fonts

Title font

Changes the title font used in the sidebar title and post titles. Toggle the "B" next to the font dropdown to make these titles bold or regular.

NOTE: If the Use body font everywhere option is enabled, this setting will not be used.

Body font

Changes the font used in the theme. Tumblr (Favorit) is the default option, and will use Tumblr's dashboard font. System Default will match your system default font (Arial for Windows and Helvetica Neue for Mac). There are 20 total font options.

Body font size

Changes the font size of the theme. 13px, 14px, 15px, 16px (default), 17px, or 18px.

Background customization

Background style

Changes the background style of the theme. The default is Solid, which will show only your Background color as the background. Options also include Gradient (a top-bottom gradient between Background color and Gradient background color) and 11 different image options.

NOTE: Full-size image will stretch your Background image to fit the whole screen. Repeat Image will use your image and repeat it to fill the screen. The rest of the options (Top-Left Image, Top-Center Image, etc.) will take your image and place it, without stretching it, in that placement on the screen. This is useful for layering a transparent image on top of your Background Color 1.

Post customization

Post colors

Changes the colors used by the posts (background, text, and borders). The default option is My colors, which will use what you provided in the color options. You can also choose between two preset color schemes (light and dark). Finally, there are nine different versions of the Translucent post color scheme, which is the same as My colors but will make the backgrounds of your posts semi-transparent.

Post size

Changes the width of the posts. 400px, 500px (default), 540px, 600px, or 700px.

Post spacing

Changes the vertical spacing between the posts, as well as the horizontal spacing between the sidebar and posts. 10px, 20px, 30px (default), 40px, 50px, 60px, or 70px.

Border radius

Changes how round the corners are on the sidebar, posts, and post/page pagination. 0px (no rounded corners), 4px (default), 8px, 12px, or 16px.

Changes the placement of the sidebar. Center-left, Center-right, Top-left, Top-right, or Above posts.

Changes the width of the sidebar. 200px, 220px, 240px, 260px (default), 280px, 300px, 320px, 340px, 360px, 380px, or 400px.

Changes the shape of the avatar in the sidebar. Square, Circle, Uncropped, or Hide avatar (removes Avatar entirely).

Changes the height of the header image. Original height will keep the image dimensions as is. Other options include 100px, 120px, 140px, 160px, 180px, 200px, 220px, 240px, 260px, 280px, and 300px. Choosing one of these options will crop the image to this height and center it within the frame.

Boolean options

Endless scroll

When enabled, pagination will be replaced with infinite scroll.

Show borders

When enabled, 1px borders will be visible on the outside of your sidebar and posts. The color of the borders is based on the color chosen for Post text color.

Show post source

When enabled, the post source will appear in the footer of your posts.

When enabled, the links in your sidebar will turn into a dropdown navigation. You can customize the label on the dropdown using the text option Dropdown menu label.

Use body font everywhere

When enabled, your selection for Body font will override all other fonts in the theme. This includes the Title font option, as well as the custom fonts used in quote and chat posts.

Sidebar text

Optional The title that appears at the top of the sidebar. If left blank, the sidebar will use your Tumblr blog's title. If your blog's appearance options (not theme options) have "Show title" disabled, your sidebar title will be removed.

NOTE: This title is also used as the text in the browser tab. When empty, the tab will instead use your Tumblr blog title.

Sidebar description

Optional The text that appears underneath the title of your sidebar. If left blank, the sidebar will use your Tumblr blog's description. If your blog's appearance options (not theme options) have "Show description" disabled, your sidebar description will be removed.

Optional The title of your Home link. If left blank, it will use "Home" in your account's native language.

Optional The title of your Ask link. If left blank, it will use "Ask" in your account's native language.

Optional The title of your Submit link. If left blank, it will use "Submit" in your account's native language.

Optional The title of your Archive link. If left blank, it will use "Archive" in your account's native language.

Optional The label on your dropdown menu in your sidebar if you have Use dropdown navigation enabled. If left blank, it will use "Navigate" in your account's native language.

Ask box

Custom HTML above ask box

Optional This text appears on your Ask page below your ask box title and above the ask box itself. You can use basic HTML formatting (bold/italic/underline, links, lists, subheadings, etc.).

Using custom CSS

Here are some basic CSS customizations you can add using Custom CSS.

At the bottom of the customization sidebar, click Advanced Options, then Add Custom CSS at the bottom.

Hiding the archive link

.archive-link {
    display: none;
}

Customizing the sidebar links

You can use any of the following lines to customize your sidebar links. Delete lines you don't need.

NOTE: The lines included below are the current default settings.

.sidebar-links a {
    text-transform: uppercase; 
    /* options: none, lowercase, uppercase */
    font-size: 0.8em; 
    /* options: 0.8em, 1em, 1.25em, etc. */
    letter-spacing: 0px; 
    /* options: 1px, 1.5px, 2px, etc. */
}

Customizing theme options

Because I use :root to set all of my options for the theme, it's easy to customize them beyond what the theme options originally allow. You can manually override most :root variables, but I advise only changing these ones:

:root {
    --album-art: 100px !important;
    /* this changes the size of album art in audio posts */
    --avatar-image: 64px !important;
    /* this changes the height of your sidebar avatar image */
    --avatar-padding: 6px !important;
    /* this changes the border thickness around your sidebar avatar */
}

Root variables may require the !important suffix in order to overwrite the theme's variable.

Thanks for using Ocular! If you have any questions, please send me an ask/message for help.