｢ Resonance ｣ theme docs 、 Features 、 Guide 、 Walkthrough
｢ Resonance ｣ is a dual-sidebar theme that prides itself on its vast list of options for sizes, spacing, margins, padding, and rounded corners, all adjustable within the customize panel, without needing to touch the code.
Most options (if not all) are customizable. This includes image sizes, font sizes, colors, spacing, padding, etc.
align-left, align-center, align-right
filled or outlined style
reset or a dot .
Since you're already here and reading the guide, you can hide the help message from the bottom of your screen! To do this, scroll down to the GENERAL OPTIONS dropdown option and change it to hide:
Please keep reading through this guide as I go through every single option and how it works.
The options are grouped by type, and appear in the following order:
⸨ I would love to sort them by feature rather than the option type, but sadly this is not up to me, it's a Tumblr restriction. ⸩
To further help you keep track of where and what you are editing, I've placed headings to serve as dividers amongst the options, like so:
If you want to change the background image, click the pen icon, then Edit to choose your own image.
In the theme preview, this picture is:
To change it, click the pen icon, then Edit to choose your own image.
In the theme preview, this picture is:
To change it, click the pen icon, then Edit to choose your own image.
The background color of your page if there isn't a background image (or if your background image has transparency in it).
The background color of your posts.
Your posts' outer border color.
The color of any borders (or lines) inside your posts, including:
Your main body text color.
An alternative color for your posts' background color, used in:
An alternative color for your posts' background color, used in:
An alternative color for your text, used in:
Text color of any headings, including:
<h1> headings
<h2> headings appearing as the first item, and are the only <h2> instances in their respective caption.
<b> or <strong>
Color of any italic text in your posts.
e.g. <i> or <em>
Text color of any links in your post's captions or reblogged comments [💡]
The underline color of any links in your post's captions or reblogged comments [💡]
Username color of the original poster, as well as the username color for any subsequent reblogs [💡]
Background color of any buttons in your posts, including:
Icon color of any buttons in your posts, including:
Border color of the post info bar at the bottom of each post [💡]
Background color of the post info bar at the bottom of each post [💡]
Text color of the post info bar at the bottom of each post [💡]
Border color around the reblog and like icons at the bottom of each post [💡]
Background color of the reblog and like icons at the bottom of each post [💡]
Icon color of the reblog and like buttons at the bottom of each post [💡]
Color of the scrollbar thumb (interactive piece). Does not work in Firefox.
When user highlights (or selects) text on the page, this is the background color of it [💡]
When user highlights (or selects) text on the page, this is the text color of it [💡]
Top border color of your blog's page numbers container, if it has one. Located at the bottom of the page. [💡]
Text color and current page icon color of your blog's page numbers, if they exist. Located at the bottom of the page. [💡]
Border color of your tooltips (text that appears when you hover something, usually providing additional information) [💡]
Background color of your tooltips (text that appears when you hover something, usually providing additional information) [💡]
Text color of your tooltips (text that appears when you hover something, usually providing additional information) [💡]
Color of your music player's play and pause buttons [💡]
Color of your music player's decorative music note icon [💡]
Color of your music player's song name [💡]
Outer border color of your sidebar 1's (left sidebar's) image
Background color of your sidebar 1's (left sidebar's) image.
Can also be considered the "padding" color.
Border color of the 4 navlinks sitting at the top of sidebar 1 (left sidebar)
Background color of the 4 mavlinks sitting at the top of sidebar 1 (left sidebar)
Icon color of the 4 navlinks sitting at the top of sidebar 1 (left sidebar)
On hover / mouse over: border color of the 4 navlinks
On hover / mouse over: background color of the 4 navlinks
On hover / mouse over: icon color of the 4 navlinks
Border color of your custom links, located under the image in sidebar 1 (left sidebar)
Background color of your custom links, located under the image in sidebar 1 (left sidebar)
Text color of your custom links, located under the image in sidebar 1 (left sidebar)
On hover / mouse over: border color of your custom links
On hover / mouse over: background color of your custom links
On hover / mouse over: text color of your custom links
Border color of sidebar 2's (right sidebar's) title blocks.
Background color of sidebar 2's (right sidebar's) title blocks.
Text color of sidebar 2's (right sidebar's) title blocks.
Border color of sidebar 2's (right sidebar's) content blocks.
Background color of sidebar 2's (right sidebar's) content blocks.
Text color of sidebar 2's (right sidebar's) content blocks.
Text color of any bold text in sidebar 2's (right sidebar's) content blocks.
Text color of any italic text in sidebar 2's (right sidebar's) content blocks.
Text color of any links in sidebar 2's (right sidebar's) content blocks.
Underline color of any links in sidebar 2's (right sidebar's) content blocks.
Background color of each activity row's label text in sidebar 2's (right sidebar's) activity box [💡]
Text color of each activity row's label text in sidebar 2's (right sidebar's) activity box [💡]
| Option Name: | Explanation: |
| show | shows the "Please read the guide" message [💡] |
| hide | hides the "Please read the guide" message |
| Option Name: | Explanation: |
| black |
Sets your default Tumblr controls in the top right corner to black.
|
| white |
Sets your default Tumblr controls in the top right corner to white.
|
| Option Name: | Explanation: |
| tiled / repeating | Lets your background image size be whatever size it came as. Ideal for small seamless pattern images. |
| full screen | Forces your background image to fill your entire screen, regardless of dimensions. Ideal for large wallpaper-style images. |
| Option Name: | Explanation: |
| none |
border-radius: 0px on all container corners.
|
| medium |
border-radius: 0.375rem on all container corners.
|
| more |
border-radius: 0.75rem on all container corners.
|
Screen gaps refer to the spacing at the top of your screen, and also at the bottom of your screen.
Available options:
Post side gaps refer to:
Available options:
Sets the font for your posts.
Available font options:
Sets the font for headings in your posts.
Available font options:
Sets the font for all-uppercase text in your posts.
Available font options:
Sets the base body font size for your posts.
Available font size options:
| Option Name: | Explanation: |
| show | shows the bottom left music player. |
| hide | hides the bottom left music player. |
| Option Name: | Explanation: |
| fill | the music player's play, pause, and decorative music note icon will be filled. |
| outline | the music player's play, pause, and decorative music note icon will be outlined. |
Sets how far the music player sits from the bottom left corners of your screen.
Available options:
The size of the music player's play and pause buttons.
Available options:
The font size of the music player's song name.
Available options:
Sets how much padding there is around each of the 4 navlinks at the top of sidebar 1 (left sidebar).
Available options:
Sets how large each of the 4 navlinks' icons are at the top of sidebar 1 (left sidebar).
Available options:
The distance between each group of objects in sidebar 1 (left sidebar).
aka gap under navlinks, gap under the image
Available options:
The width of your image in sidebar 1 (left sidebar). Will also affect the total width of this sidebar. The image should be square.
Available options:
The padding around your image in sidebar 1 (left sidebar). Can be interpreted as the "inner" border size.
Available options:
Font size of your custom links in sidebar 1 (left sidebar).
Available options:
Padding of your custom links in sidebar 1 (left sidebar).
Available options:
The spacing between each custom link in sidebar 1 (left sidebar). Can be interpreted as custom links' "row spacing".
Available options:
Width of sidebar 2's (right sidebar's) boxes.
Available options:
The padding of sidebar 2's (right sidebar's) title blocks.
Available options:
Font size of sidebar 2's (right sidebar's) title blocks.
Available options:
The spacing under each of sidebar 2's (right sidebar's) title blocks. Not including the about box; there will be an option for that later.
Available options:
The size of sidebar 2's (right sidebar's) avatar image.
Available options:
The padding around sidebar 2's (right sidebar's) avatar image.
Available options:
The padding around sidebar 2's (right sidebar's) content boxes. Not including the about box; there will be an option for that later.
Available options:
The font size of sidebar 2's (right sidebar's) content boxes. Not including the about box; there will be an option for that later.
Available options:
The spacing between each section in sidebar 2 (right sidebar). Each section consists of the title row, and the content box row.
Available options:
The spacing between the:
Available options:
The spacing between the avatar image and the description box.
Available options:
Padding of the about section's description box.
Available options:
Font size of the description box.
Available options:
Padding around each activity's label text.
Available options:
Font size of each activity's label text.
Available options:
The gap between each activity label and its text contents on the right.
Available options:
The spacing between each activity "row". Each row consists of its activity label, and its text contents.
Available options:
The width of your posts (without taking padding into account).
Available options:
Padding around your posts.
| Padding value: | Details: |
| 0px |
Negates the padding around the first photoset or video in your post, and keeps the rest of the padding at 20px.
|
| 10px | 10px padding around everything in the post. |
| 15px | 15px padding around everything in the post. |
| 20px | 20px padding around everything in the post. |
| 25px | 25px padding around everything in the post. |
The spacing between one post and the next.
Available options:
Spacing between photos in posts.
Available options:
| Option Name: | Explanation: |
| yes | Adds a black-and-white filter to all photos and videos in your posts. Text colors are unaffected. Not applied on permalink pages (post pages). |
| no | N/A |
You can edit the song name of your music player here. You can use any text formatting, such as bolded text, italic text, or links.
See the text formatting section.
The audio file URL of your song. Must be a raw audio file.
You cannot use a YouTube link, you need to convert it first:
yt-to-mp3.carrd.co
To get the URL of your downloaded song, read these tutorials:
linktr.ee/direct_file_links
100% is normal / full volume, 0% is silent.
Your display text for your custom link. Plain text only.
The URL for your custom link.
When linking to a page on your blog, you need to prefix it with a slash /, e.g.:
/tagged/cool stuff
/about-me
When linking to a site that is not on your blog, make sure it starts with https://, e.g.:
https://images.google.com
The same format follows for the rest of the custom links.
Aka the description box title. First title in sidebar 2 (right sidebar).
Aka the description box content.
You can add any text formatting you like, including bold text, italic text, links, and uppercase text.
See the text formatting section.
Your title text for the activity box, aka the second section in sidebar 2 (right sidebar).
Label text for your first activity entry.
Text details of your first activity entry.
You can use any text formatting here, including bold text, italic text, links, and uppercase text.
See the text formatting section.
The same goes for the rest of the activities.
Title text for the last box in sidebar 2 (right sidebar).
Quote text for the last box in sidebar 2 (right sidebar).
See the text formatting section.
How to add a link:
<a href="YOUR_LINK_URL">YOUR DISPLAY TEXT</a>
How to add a link with hover text:
<a href="YOUR_LINK_URL" aria-label="YOUR HOVER TEXT">YOUR DISPLAY TEXT</a>
How to add uppercase text:
<span uppercase>YOUR UPPERCASE TEXT HERE</span>
How to add an uppercase link:
<a uppercase href="YOUR_LINK_URL">YOUR DISPLAY TEXT</a>
How to add an uppercase link with hover text:
<a uppercase href="YOUR_LINK_URL" aria-label="YOUR HOVER TEXT">YOUR DISPLAY TEXT</a>
You can use <br> to jump to a new line:
some text
<br>
some more text on a new line
You can change your text alignment, like for the quote source in the theme preview.
Available options:
<p align-left>
<p align-center>
<p align-right>
Normal text here
<p align-right>YOUR TEXT HERE</p>