This is the official documentation for Jelly, a magazine-style, modern Tumblr theme by Stash Themes. Jelly Jelly Jelly, clean, bold and highly interactive three column minimal tumblr theme, the next level. Below you’ll find how to install it, what every option in the customize panel does, how to set it up for phones, and fixes for the most common problems. Best for: portfolios for photographers, illustrators and designers; editorial and magazine-style blogs; grid-based moodboards and archives.
Theme page & preview · Jelly on the Tumblr theme garden · Current version 3.0
1. Install Jelly
There are two ways to put Jelly on your blog. Both take about five minutes and need no coding.
Option A – one click from Tumblr
- Open Jelly on Tumblr and click Install theme.
- Pick the blog you want to use it on. Tumblr opens the customize screen with the theme applied as a preview.
- Click Save, then Exit.
Option B – paste the code (downloaded or purchased copy)
- Download the .txt file from your order email or My Account → Downloads. Open it, click inside, press Ctrl/Cmd + A then Ctrl/Cmd + C.
- On a computer go to tumblr.com/customize/your-blog-name and click Edit HTML. Select all the old code, delete it and paste.
- Click Update Preview, then Save.
Stuck? See the full install guide with screenshots or fixes if the theme doesn’t show.
2. Jelly features
- Optional animated site border. Multi-colour or black/white.
- Image/video banner with choice of Vimeo/Youtube or Youtube Playlist
- Google fonts supported
- Upload your own logo image
- Full-page sidebar
- Video or image banner.
- Social media icons
- Change colours, including: header background, text colour and sidebar colour
- Infinite scroll
- Hide or Show post meta and other elements.
- Show posts bigger using the tag x2 for double, or full-width for full images.
3. Theme options explained
Below is the option-by-option breakdown for Jelly. Open tumblr.com/customize/your-blog-name, change a setting, click Update Preview, then Save.
Getting Started
To start making edits to your theme you’ll need to go on to your blog page and click Edit Theme at the top right.
Colours
We’ve kept the colour options for the theme minimal. The few options let you take control of the look and feel of your blog. These can be located on the customization screen at the top.
Background – This is the main website background.
Post Background – This is the background for text posts/pages. I suggest setting this to a colour that compliments the background. For example the background colour is grey and by default the post background colour is white.
Text/Link – This is for the websites text. It is important you set these to a colour that will stand out on top of the post background colour. No point setting the post background to black and the text to black because it can not be seen!
Header Background/Text – This is for the websites header which appears on the left of the screen. These two options control all of it but you can also change the colour of the logo by changing the Logo option.
Sidebar Background/Text – For the sidebar once it’s opened. Pretty straight forward.
Logo
You can choose to use a text logo or upload your own logo.
Image Logo
To upload your own logo find the Logo image box at the top of the customize screen and upload an image. The maximum height is 60px so all images will be resized to fit.
Text Logo
You can change the font to be used as the logo (check the Fonts section). You can also customize the colour and whether you want the logo text to be all in capitals or not by finding the Logo Text dropdown menu.
Fonts
There are two options with adding fonts, Google fonts and Typekit. You can view a list of popular fonts to use under the Fonts dropdown in the customize screen.
You can choose from these fonts or if you scroll down and find the boxes: Body Font, Logo Font and Title Font. In here you can set individual fonts for the body, logo and banner.
Google Fonts
In this example we will use Open Sans.
- Copy the font name.
- Paste this into the Body Font box. This will change the font for the whole website. Excluding the Logo and banner.
- To use the font in the Logo/Banner you will also need to paste it in the respective boxes.
Typekit
Here’s the full tutorial on using Typekit with our themes.
Font Size and Weights
To change font size you will need to change the boxes: Font Size, Logo Size and Banner Text Size.
For font weights there are three dropdowns to adjust.
Sidebar
The sidebar is on by default. You can also set it to open when users go on your website by turning the Show Sidebar on Startup option on (it’s off by default).
Avatar
To upload an avatar to the sidebar upload a Sidebar Avatar image.
Navigation
Tumblr’s Archive, Random and RSS links are turned off by default on our themes. Find the switches to turn them on.
Custom Links
To add custom links find the Custom link boxes and put the name of the page and a link to the page. e.g.
Social Links
To link to your social media paste your profile link in the relevant URL box.
Image Ads
You can add up to 4 image ads by finding the Sidebar Image Ad section, here’s an example of how you would add the four. You can choose whether to add a link/title to the images also.
Remove Sidebar
If you don’t want the sidebar then you can turn off the Sidebar option. It will still show up on Sidebar so if you want it removed there also turn on the Mobile Hide Sidebar option.
Banner
The first thing you will need to do is turn on the banner because it’s switched off by default.
If you only want the banner to show on the homepage you can toggle on the Banner only no posts option.
Banner Image
After the banner’s switched on you need to upload an image. Find the Banner Background box and upload your banner image. Recommended size: 1400×800.
For mobile you can also upload a Mobile Banner Background. Which will only show on mobile. 800px800px should be fine.
If you are adding banner text/video I recommend also switching on Banner Overlay which adds a slight dark background on top of the image so that text stands out more.
Banner Video
You have three options for the banner video:
Youtube Video
Once you have the Video ID paste it in to the Banner Youtube Video ID box.
Youtube Playlist
First make sure your Youtube Playlist is Public or Unlisted and that Embedding is allowed.
Then, go to your playlist page and copy after list= make sure it looks like this. Then paste this in to the Youtube Playlist ID box. Also make sure you have nothing in the Youtube Video ID and Vimeo boxes.
Vimeo Video
Make sure embedding is enabled on the video then copy the video ID from the URL.
If you do not want the banner to show on mobile toggle the Mobile Hide Banner option on.
Banner Video Settings
By default the video’s will play autoplay with the volume off. To customize this find this section:
You can also remove the video buttons by switching off the option Banner Video Buttons.
Banner Text and button
Next you can add some text or a button. Just find the Banner Text box and the Banner Button boxes.
Mobile
On mobile you can hide the banner by switching on the Mobile Hide Banner option.
You can also add a Mobile Banner Background which is an image that will show on mobile instead of the main banner image.
Posts
You can customize how posts look by changing the Show settings. It’s self explanatory.
Modal
By default posts open up in a modal window. To turn this off turn off the Modal Post option.
Photo Posts
By default photo posts have no caption but once opened the caption shows.
Columns
You can customize how many columns of posts you want. To do this find the Posts Columns dropdown and change the number, it’s that simple.
Bigger posts
To display posts double the size add the tag x2.
Misc
Scrollbar
By default the scrollbar is off to create a more even layout. You can put it back by enabling the Scrollbar option.
Site Options Icons
These are the icons that appear on the bottom left of the header.
In order they are, load more posts, scroll left/right and hide/show banner. You can turn them off by turning off the Site Options Icons option.
Google Analytics
On Google Analytics create a new property for your Tumblr blog address and paste that tracking ID in to the Google Analytics ID field in your blog’s Customization settings.
Translations
If your website is in a language other than English you will need to find the Translate section in the Customize screen and translate the text that you see there.
Stash Credit
To remove Stash credit from your website you will need a Full License. Instructions are provided once you’ve obtained the license.
4. Jelly on phones and tablets
Jelly is fully responsive. Turn off Use default mobile theme (Advanced options), set Mobile Posts Columns to 1 or 2, upload a Mobile Banner Background if you use the banner, and check the Mobile Menu toggle. View your blog in your phone’s browser (not the Tumblr app) to see the result.
5. Remove the Stash branding
Jelly costs £28. Add the Full License at checkout (+£10) to remove the Stash credit, or buy it later for £19. After purchase you receive a short snippet to paste into Advanced options → Add Custom CSS. How the Full License works.
6. Troubleshooting
- Theme not showing / looks the same as before – make sure Enable custom theme is on, you clicked Save, and you’re viewing the blog in a browser, not the Tumblr app. All 8 fixes.
- Photos have scrollbars or gaps – apply the NPF photo fix or reinstall the latest version.
- Links lead to an error page – every URL must start with
https://. - Font didn’t change – fill in every font field after adding an embed code. Guide.
- Something broke after an edit – restore a previous version.
7. Frequently asked questions
How do I update Jelly to the latest version?
Reinstall it from the Tumblr theme garden (Option A above) or download the current file from My Account and paste it in. Your colours, images and options are kept.
Can I use Jelly on more than one blog?
Each licence covers one blog. For several blogs the theme bundle is the best value.
Can I change the layout myself?
Most layout choices are in the customize panel. For bigger changes, small tweaks are possible with Custom CSS, or ask us about theme customisation.
I need help.
Email support@stashfamily.com with your blog address and a screenshot, or book the installation service.
