Rio Theme
The Rio Theme for Tumblr has finally been finished. Well actually, it’s been finished for months, but for some reason Tumblr (and Peter Vindani) won’t add it to Tumblr’s Theme Garden. The only response I received was “Does not fit accepted Tumblr blog functionality or aesthetics.”
WTF!?!?!
Maybe it’s because I borrowed the original design from Amy and Pink’s WordPress Rio Theme, but I think the design is HOT! I even went the extra mile to contact Marcel from Amy & Pink to get permission to recreate their WordPress theme for Tumblr. So I honestly have no idea what’s the issue.
With that said, I’m releasing the theme on my own, with the hopes that you will love it just as much as I do! Let me know what you think.
About the Theme
- A fresh and funky Tumblr template
- Narrow tumblog-styled design
- Fully customizable with Appearance panel
- Easily upload new background and header images
- Header image can be replaced with a title
Additional Resources
All About Tumblr Backgrounds
The reason way I love Tumblr as a content management system because of how simple it is to use and customize. One of the easiest ways to spruce up your current Tumblr template is to change your Tumblr background image. Easy enough, right? So today’s post is dedicated to helping you find some cool Tumblr backgrounds and show you how to install it.
Why Should I Change My Background?
There are hundreds (if not thousands) of Tumblr templates available online and the best way to set your tumblog apart from all the rest is by changing your Tumblr background. A new background image can easily add a bright and interesting look to your Tumblr template without much effort.
200+ Free Tumblr Backgrounds
Here I have complied a list of more than 200 hundred free Tumblr backgrounds which can be downloaded and installed into your theme within minutes.
GypsyGarden (1 pattern)
Pattern 2 (14 patterns)
Patterns 2 (6 patterns)
Textured Stripes (6 patterns)
Photoshop Pattern (4 patterns)
Pattern Part1 (9 patterns)
Patterns .24 (33 patterns)
Lace Patterns: the prelude (6 patterns)
Untitled patterns 03 (12 patterns)
Patterns .23 (33 patterns)
Green Patterns (6 patterns)
Patterns .27 (50 patterns)
Patterns 3 (6 patterns)
Softly Plaidly- Peachy Keen (11 patterns)
Black – White patterns (13 patterns)
PINKgossip_04 patterns (13 patterns)
Additional Tumblr Background Image Resources
- Over 1,002,864 user-created seamless patterns from Colour Lovers
- 1000+ Free Background Patterns
- Background Pattern Designs from Behance
- 100+ Seamless Patterns Great for Creating Website Backgrounds
How to Change a Tumblr Background
Now that you have picked out your new Tumblr background and downloaded it to your local computer, it’s time to add it to your theme. There are two ways to add a background to your Tumblr theme. I will discuss them both below.
Option 1: Appearance Panel
If you can add a new background through your Tumblr Customize > Appearance Panel choose this option.
- Login into your Tumblr account and click CUSTOMIZE in the right side of your dashboard.
- When the customization section opens, click APPEARANCE at the top of the page.
- When the panel opens you simply click the UPLOAD button to select your theme from your local computer and you’re done! If you have the option for repeating your background choose “repeat-y” if you pattern needs to repeat vertically (from top to bottom). Select “repeat-x”, if you background need to repeat horizontally (from left to right). Choose “repeat-xy”, if you image needs to repeat both vertically and horizontally. You can also choose “no-repeat”, if you have a really large background image that doesn’t need to be repeated.
Option 2: Hand-coding Custom HTML
Use this option if you do not have the Tumblr Appearance Panel available with your theme.
- Login into your Tumblr account
- You will need to upload your new background image onto Tumblr’s Static Image Server
- After uploading your file, make note of your image url. You can copy it to NotePad or SimpleText for safe keeping.
- Return to your Tumblr Dashboard and click CUSTOMIZE in the right side of your dashboard.
- Select THEME from the top menu.Click the USE CUSTOM HTML buttonLook for the BODY tags. This is the code we will be editing. (Your coding won’t be exactly like this, so you should look for something similar near the top of the code.)
body { background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top }
- Paste your image url into the CSS
body { background: #f8f7e5 url(http://safe.tumblr.com/theme/3383425/) no-repeat center top } - You may need to adjust your background image by changing your background color and whether it repeats or not.
body { background: #f8f7e5 url(http://safe.tumblr.com/theme/3383425/) no-repeat center top }Choose “repeat-y” if you pattern needs to repeat vertically (from top to bottom). Select “repeat-x”, if you background need to repeat horizontally (from left to right). Choose “repeat-xy”, if you image needs to repeat both vertically and horizontally. You can also choose “no-repeat”, if you have a really large background image that doesn’t need to be repeated.
- Click the UPDATE PREVIEW button in order to see your changes.
- If you are satisfied with the results click the green SAVE & CLOSE button at the top right of the page.
- Your Done!
Additional Resources
How to Add Google Adsense to a Tumblr Theme
Tumblr has become the place where all the cool kids have been hanging out – and I must admit I love it too! Tumblr is cool, convenient and simple to use. I know I have talked before about how to make a Tumblr blog and the confusion over Posterous vs. Tumblr, but today I want to address something a little bit different.
It doesn’t matter what kind of website you want to start, at some point in time you will wonder about how to make money from it. Everyday people are making thousands online and you want a piece of the pie.
Adding Google Adsense is definitely an option to monetize the targeted website traffic visiting your blog. But adding Google Adsense to a Tumblr theme can be quiet tricky, since each Tumblr theme is designed differently.
In this quickie tutorial I will show you how to add Google Adsense to a Tumblr theme with a 2 column design. For this demonstration we will using the Stationary Tumbr theme.
Have You Applied for a Google Adsense Account?
Is Your Tumblr Account Setup?
Have You Installed the Stationary Tumblr Theme?
Add Google Ads to Your Tumblr Theme
- Login into your Tumblr account. You should be viewing your dashboard.
- You will need to customize your current Tumblr theme, so click the Customize link in the right column.
- Select the “THEME” tab at the top of the screen. This will open the HTML code of your current Tumblr theme. You will be adding your Google Adsense code to this custom html section.
- Look for the following code:
<div id=”sidebar”>
<div id=”inner-sidebar”>
<div id=”authorbox”> - Insert your Google Adsense script directly after:
<div id=”inner-sidebar”>
- You should check the code placement by clicking the “UPDATE PREVIEW” button at the bottom of the code window. Please note that it may take up to 10 min for your new Google Adsene code to appear.
- Click on the “SAVE CHANGES” button once you are satisfied with the placement and want to save the changes made to your current template.
Note: Since you are making custom changes to your Tumblr theme, you should always save a copy of your current theme, by copying the custom html to a text editor on your local computer for safe keeping.
My 2 Cents About Domains
If you have had a chance to read my post on how to make a free blog, then you will know my position on free blog sites. But just in case you haven’t read this page, here’s a recap.
Free blog hosting sites (like Tumblr) are cool because:
- They’re free!
- They are super easy to setup and configure even for a beginner
- You can get started in less than 5 minutes
But they do have their disadvantages as well:
- You will not have control over your own domain name – especially if the blogging services goes out of business or decide to change the format of their URLs. The future of your blog is the hands of someone you DON’T EVEN KNOW!
- If Tumblr ever decides to close up business http://www.yourblogname.tumblr.com will no longer exist
- Your blog’s domain name holds all the authority, statistics and Pagerank and they are NOT TRANSFERABLE! If you are looking to create a brand or generate an income you will loose money and search engine traffic if you change your url later. If you decide you want to make this blog your own, you CANNOT add a domain name later. You will lose bookmarks, visitors, Pagerank, search engine ranking and MONEY! And worst of all if you ever decide to leave that blogging service for a large scale paid option and close that account, you will be left with nothing. Another person can start a blog with your previous address and take credit for all of your hard work.
How to Resolve the Domain Name Problem
All you need to do is register your domain name. Tumblr allows you to use a custom domain name with your free Tumblr account and you can get a super cheap domain name directly from Godaddy for only $1.99. Go Daddy is a trusted domain registrar, so save yourself a few headaches in the future and register a domain.
Rio and City Dreams Tumblr Themes
In addition to updating the Be Original Tumblr theme, I have also been working on a few other themes as well – Rio Theme and CityDreams, both originally designed by Amy & Pink. These have been a favorite of mine for years, but I never had a good use for them, until now.
The designs were both created for WordPress, but because of their simplicity I thought they would be great options to convert into Tumblr Themes. So stay tuned, They are both about 50% completed and should be done soon.
WordPress Versions: Rio Theme & City Dreams
Below are screenshots of my working designs. They may differ in the final version, but will essentially look just like these.
Rio Tumblr Theme
City Dreams Tumblr Theme
** disclaimer – disregard the nudity in this theme, all images are owned by Amy & Pink **
Be Original Theme Updated
First, I would like to apologize for all the people who have sent me emails about the pagination missing. This was my first theme and although the how to make a Tumblr theme NetTuts tutorial was very good, they did miss a few small features which are required in order to get your Tumblr theme publishing in the Theme Garden, one of which is pagination.
So I finally got around to updating my Be Original Tumblr theme. The pagination is simple, but fits with the design of the theme and the color can be changed within the Customize/Appearance section of you Tumblr’s admin section.
Feel free to comment below if you have any issues, I will try and get back to you as soon as possible! Thanks!
Download Latest Version
View Demo
Theme Information
