psa to theme makers- i found this website and basically it lets you see how your page (or any other page) looks on different screen resolutions. all you have to do is input your url. the options range from a tiny 10" notebook all the way to a 24" desktop- it even shows how your page is displayed on mobile devices or tablets. i personally think this is immensely useful because i know that it’s not rare to see a theme not look right on your screen because it was made for a specific screen size- it sucks having to zoom out/in to click on something, y'know? anywho, enjoy!
The basics on making a theme graphic/background is essentially choosing a picture of your choice, then making it transparent. For your desired picture, if it’s too small, feel free to resize it using this website. It resizes it and improves the picture quality if it’s a jpeg.
I prefer using a 1024 x 768 canvas for creating themes. This is because my screen is not as wide at the popular 1366 x 768 screen resolution-- it’s a safe one, in my opinion. People can have smaller screens, but they’re probably old people who have no use for seeing flimsy RP themes anyways.
After applying a bunch of textures (but not too much to the point where you have texture barf-- which will be explained in a different tutorial), you end up with this. But guess what? Still no container.
There are several kind of approaches you can take on creating the container. You can be creative and tailor it to your muse (for example: using a pokeball as the container or smth), or you can try out whatever’s “popular”. I’ll show off different types of containers you can have.
The classic box
The box is the classic one, and for very good reason-- it’s very versatile. You can add whatever textures you want to it. Make sure it isn’t too texture barfy or eye-straining-- don’t use optical illusion-esque textures for the container. Or at all. You can make it whatever size you want! The thing is, I recommend that you stick with one around the size I have. At least have a width of 400px-- anything less will squish your posts and really, the thin container trend may look “nice”, but it’s unreadable.
For example:
please do not. it may look sleek and nice, but please be considerate of your followers/anyone wanting to read your rps.
why you gotta. the width isn’t as bad, but it’s still a little too short. It’s still inconvenient.
The fading bars
Actually, this is also very flexible. You can make the bars go in whatever direction you want. Heck, you can even take different approaches to this.
This is an example of how certain container types cannot work with some pictures. This might be good for something else, but definitely not this picture.
Brackets:
This is more rare nowadays, but it’s kinda cool. It was a trend at one point.
And that’s it! Of course, you can feel free to come up with your own kind of container, and like I mentioned before you can always make your own kind-- who knows, maybe you’ll start a trend.
And again, if you have any further questions, please don’t hesitate to send us an ask!
Let’s talk about contrast for a second. Contrast is, to put it bluntly, the difference between two objects and/or entities, and is a key in graphic design. People use it in different ways, especially in roleplay, which is good! However, there is a slight problem when your themes and/or graphics look like this:
You really can’t see the container nor the Toriel ( yes, ‘tis a pun ) used for the sidebar very well, and while it can be worse, this is a bit of a problem —- especially for people who have trouble and/or don’t enjoy stuff with eye strain. Now:
This looks a bit better, right? You can clearly tell the difference between Toriel and the container, and this is without much tweaking! Just differences in terms of the multiply and screen layer types ( a tutorial on it will come on a later date ) goes a long way, and it really does help in the long run with how people read and see your blog!
And, another thing, we also must talk about fonts.
Like we have done with the Toriel theme, this isn’t very visibly; there isn’t much contrast, leading to struggles with eye strain. While this is just an example in terms of, say, a promotion graphic, this also applies to general font issues in HTML regarding an actual theme page; people can’t really read this, and it’s a struggle to spend so much time deciphering what a small amount of words is, and this isn’t even getting into actual font usage.
Here, you can clearly see the colors and the text, and not even taking how readable the font is in general along with the font size, it’s a pleasant read. The contrast is very clear, and you can tell what is the text and what is the background, with just a few tweaks in text color —- and unlike the Toriel theme, this requires little to no layer tweaking; you just need to change a few things!
In short, the lesson here is function over fashion. Please, when you are making a graphic or coding a theme, take into consideration the contrast of it; if you yourself can read it without much effort, and if other people will too. It’s extremely important in all things graphics or visuals related.
That is all for this tutorial at the moment! If you have any questions, feel free to ask us for help or advice!
so I noticed that many themes don’t have this - when you reblog posts with <pre> tags (usually follow forevers or edits/graphics) and you look at them on your theme, the text sometimes doesn’t wrap where normal text should (as in, where the post content box ends) - resulting in the <pre> text going over your background or simply looking not neat.
After a quick research [x], I found that this is the code you should put in your css (after <style>):
this will automatically wrap your text in your <pre> tag too, thus avoiding those unaesthetic blocks of text escaping the content borders! c: Hope this helps the poor souls that couldn’t stand that just like I did :P
TUTORIAL » How to move things on click with Javascript.
Examples:
click “More”
click “More”
click “More”
Also on my current theme blog layout - Click the three lines in the bottom left corner.
Difficulty: ★ ★ ★ ★ ☆
Requested By: anonymous
Notes: This isn’t for the faint-hearted because I and many others will know how tetchy coding with scripts can be so please be wary. I can only help so much if you’re not that familiar with scripts/html/css.
Feel free to request a tutorial!
I’ve received a few messages of people asking how I did the javascript effect on my theme 12: coexist, and I use this on a lot of my themes and pages because it’s so easy and can be used for virtually anything.
I’m going to be telling you specifically how to recreate THIS PAGE.
Also if you’re a theme maker please check this out!
Hey guys! I know a lot of people are having issues when it comes to the dashboard/follow/etc buttons not showing on themes. It’s usually the themes that are made by other tumblr users.
I am here to show you how to fix that! Also, reblog to save a life.
Sup everyone! decided I would make a really extensive tutorial on how to code your own Hollywood theme, meaning you can move things around and make your own background! I really like using Hollywood’s themes because they’re really easily customizable and simple, but you can take these skills and apply them to basically any theme you want!
As always, feel free to contact me if you have any questions about this stuff. Without further ado, let’s get started!
