A walkthrough on how I make my contained themes! Part 1: What is a contained theme?
updated November 12th 2015
Whazzup! This is Aoibara, the mun of amxthystus here! Today, I am here to teach you how to make a contained theme!
So click the read moar if you wanna learn something new today!
What is a contained theme?
Contained themes are a new trend on tumblr, especially on the RP side. It can take many tears and sweats to make one, but once you make one, it is rewarding. Why? Because contained themes often do not exactly like one another, and are pretty much a one of a kind-ish theme just suited to all your needs and fancy!
First, I will teach you the basics of how a contained theme looks like, using my examples, as well as comparison of which theme to use to make your own theme! So, we won’t be doing any actual heavy duty coding or whatnot as I want to make this simple for everybody and to explain what a contained theme has usually!
The Anatomy of a Contained theme
Alright. Lets take a look at some contained themes, and lets see what we can see which are similar.
Sooooo, Aya, what do you see similar there in these four themes I have made so far? ovo
✣ ~ -writes them down in fancy handwriting-
- Each have their own image background, with a ‘box’ to contain the theme.
- Descriptions are preferably placed in the ribbon tabs.
- Most links are jumbled, in a form of a symbol, and have hoverover titles.
Yep! What my muse, Ayanami said was the pretty much the basic of the basic anatomy of a contained theme!
well i actually taught him this and that so yeah Now I will explain why each of the similarities are for. And you can also look at my page to play around and learn how a contained theme is like!:
- The background is each unique, and not done by the color sliders of the theme. So, basically, you will need an image editing program like Photoshop or GIMP! If you don’t want to pay lotsa money for Photoshop then I highly recommend GIMP as it is what I would call the freeware ver of Photoshop!
- Descriptions are often not in the description box we see in the customization option when we do our themes, and are usually in the html code using tabs. If the description is directly on the background, it often doesn’t blend well which is why we use ribbon tabs to make it visually appealing. The ribbon tabs by dxrkthemes is the most popular, and it is my favorite to use as the font is rather easy to read and most easiest to customize! Oh and the size for the text is really reasonable.
- I usually jumble the links because first, it is funner and it gives me more freedom to match the links with my themes, and second, alot of the contained theme codes I have used often have limited amount of links, and I tend to have at least 6 links. So I highly recommend you practice and learn how to jumble links in this tutorial by unseenmockingjay!
So…There are so many contained theme codes? Which one to use?
And that is a good question! I have so far used the contained theme codes by Octomoosey and fastcst, and have edited my own hollywhood theme! I will lay out each one of the themes, and describe their difficulty of editing, and pros and cons!
Octomoosey Theme #36
Pros: This is the code I would refer to if you have difficulty editing codes, or just don’t feel ready to go wild with the html. Octomoosey also has a tutorial on how to set your container and everything properly in the theme description.
Cons: The font-awesome symbols can sometimes have the symbols you aren’t looking for, and can be a bit limited. So if you want to use your own text symbols, you would need to tinker with the code a bit there.
Pros: When you feel ready enough to touch the codes, this is the code you can start using. fastcst has alot of explanation on their FAQ about the code, as well as explanation in the code itself. So, it is a good starting ground when you want to tinker with the html!
Cons: Not friendly for popup boxes. This is the reason why I switched my theme to a hollywhood theme, because if you try to put popup boxes, it will only show the portion of the popup, matching with the size of the theme and pretty much screws everything up. Idk how to exactly explain it but next time I will get a visual explanation on what happens.
Pros: Hollywhood themes are simple, so they become incredibly easy to edit, like adding values to edit your quote posts, tags, etc. easily. Hollywhood theme #30 400px and #52 are the most often edited codes. I use #52. I will make a tutorial on how to edit a hollywhood theme in the future for this chain of tutorials.
Cons: This isn’t very beginner friendly unfortunately, because you will be spending 99.9% of your time in the html area rather than the customization area. So basically, you will need to know where to touch when you want to make a Hollywhood contained theme. Also, I noticed alot of people struggle coding with the pagination to stay in place and not slip out when the screen is bigger or smaller. (Actually, if anyone has an answer to this issue, please inform me as I am having issues as well.)
Soooo that is all for today, and I will teach ya guys how to make an appealing background image for your contained theme next!
I hope this will give you an idea on what kind of theme you want, and I hope some will find this tutorial useful!
If you have any comments, con crit, go ahead and drop one by reblogging, fanmailing or asking me. The only rule is no anon hate!
Stay tuned for the next guide!