(The preview images look so bad I’m sorry my screen recorder isn’t working please look at the live preview lmao)
My very first theme! I’ve been working on this for ages and I’m really excited to share it with everyone. It’s designed to be used as a sort of about page for stories, since I tend to work on-and blog about-several stories at a time, and I know a lot of my friends are the same way. However, it can also be used as a character page, an all-in-one page, and probably lots of other stuff-I’m sure you creative people can find use for it!
Features:
100% width header
Internal links at the top to help you navigate within the page more quickly
Three extra images near the top, which can be removed or added to as necessary
About, Cast, Chapter Guide and Navi sections
Three subsections in the about section, although you can add as many as you like!
Allows you to hide spoilers so that people can choose to highlight and read them or not
An image, title, and subtitle for every character, with a description that comes up on hover.
Chapter Guide has a cool accordion thing so you can open and close them.
Navigation section can have as many boxes with as many links as you want, the layout will change to accommodate it
Rules:
Don’t remove the credit on the page or in the code. You can change the color of the credit to match the page if you change the color scheme, or if you change the background to make it more visible, but the credit must stay visible.
Please like and/or reblog this post if you plan on using the theme
Don’t use as a base code, or take parts of my code to use in your own. You are free to look at the code to see how I do things, or ask me about it, but don’t copy and paste anything.
You can edit it for personal use to your heart’s content, just don’t release it as your own is all.
This isn’t a rule per se but if you do use it, please feel free to show me the page, I’d love to see what people do with the code!
So I’ve put this guide together because a couple years ago I tried to use a page theme for the first time but I couldn’t figure out how to customize it and I got so frustrated I started crying. And now that I’m making page codes I don’t want to subject other people to that experience, so I decided to write out a beginner’s guide to using them.
If any of this seems obvious or patronizing, I apologize in advance. I’m basically using past!me as a reference point for this so if it seems like I’m talking down to you, probably any one of three things is happening:
Past!me was particularly stupid.
I am remembering past!me as more stupid than they were.
You are smarter than you think you are.
Either way, try not to take it personally.
Installation
So the first thing you need to know about page themes is that they aren’t customized the same way you’d customize a blog theme.
When you install a blog theme, a panel on the left shows up, showing a number of options. This usually allows you to customize the description, sidebar image (or equivalent), and links without even touching the code at all.
This won’t happen with page themes. There’s no customization window for them. With page themes, you have to go into the code yourself and put in the information you want it to display. This can feel very intimidating, but I promise it’s not as hard as it looks once you get used to it!
So, how to install a page theme:
1. Open your blog in a new tab. In the right-hand corner, click “edit theme.” This will bring you to the customization window we talked about earlier.
2. Scroll down in that window, and you should find something that says “Add a page”. Click on it.
Now it should look like this:
(But with your own URL instead of mine ofc)
3. In the top left, click on “standard layout.” A menu should pop up, giving you the options of
standard layout (still)
custom layout
redirect
Click “custom layout” and it should look like this:
4. In a new tab, go to the page that hosts the code that you want to use. Copy the entire code.
5. Come back to the customization page, and paste the whole thing into that empty box. Then click “update preview” and the page should come up!
6. Name the page by adding a title after your url at the top of the box. Now we’re ready to start customizing!
Some more quick tips:
While copying the code, you may not have to wait to highlight the entire thing (which can take ages depending on how long the code is.) If the code is on the site pastebin, there’s an easier way. Scroll down to the bottom of the page where it says “RAW paste data.” Right click inside that box, then click “select all.” Right click again, and then click “copy.” Then you’re done and you can paste the code into the page layout box.
While customizing, I recommend having a separate tab open. Customizing a page theme means the page is sharing its space with the customization box, which can distort the page. Open the page in a new tab, and every so often save the page in the customization window, and then refresh the tab with just the page so you can see how it looks.
Save your changes frequently, especially if you’re making a lot of changes. That way if tumblr decides to stop working you won’t lose all of your work.
Where to Edit
So we have the page code installed, but knowing where to start editing can be tricky, so let’s go over that real quick.
In any page code, there will be at least two sections: the CSS, and the HTML. (Sometimes there will also be javascript or jquery. But you don’t need to worry about that.)
Basically, the CSS is styling, and the HTML is content. In other words, the HTML is the text (and images, etc.) The CSS decides what that text looks like and where it’s positioned.
You can edit the CSS if you want to and know how, but you don’t have to. If you can edit the HTML, you can successfully use the page code.
The entire code will usually be wrapped in tags marking it as html, but don’t be fooled. The part you need to edit is only a part of the code, and it will be between “<body>” and “</body>”. To find those tags quickly, you can use ctrl+f.
Customizing Basics
Let’s start with some basic html tags. Tags are basically bits of code in which you wrap content in in order to style them or otherwise alter them. You put the stuff you want to alter in between the tags. Here are some very common tags that’ll work on almost any page theme.
Bold: <b></b>
Italics: <i></i>
Strikethrough: <strike></strike> or <s></s>
Paragraph: <p></p>
Link: <a href=”yoururlhere”></a>
Smaller text: <small></small>
Larger text: <big></big>
Superscript: <sup></sup>
Subscript: <sub></sub>
The paragraph tag is very important. When you’re typing in text in normal settings (such as making text posts, or using a word processor), you usually just have to hit the enter key to start a new paragraph. Code doesn’t work that way; if you just hit the enter key between paragraphs, it will display the text as one paragraph. For example, if you type
Hi, I’m a paragraph!
And so am I!
It will display on the page as
Hi, I’m a paragraph! And so am I!
The only way to break them up is by writing it like this
<p>Hi, I’m a paragraph!</p>
<p>And so am I!</p>
Images
The image tag is unique in that it is self-closing, meaning unlike other tags, you don’t have to add another tag after it. It looks like this:
<img src=”imageurlhere”>
Most page themes come with placeholder images that you replace with the link to the images you want to use, so when you find the img tag corresponding to the image you’re trying to use, replace the url in the img tag with your own.
For example, if the image you’re trying to change is a header image, find the img tag that is holding the header image, and replace the url with your own header.
The way you get a url to use for the img tag is this: first you upload the image you want to use to whatever site you want. Then right-click. After that, you can either
Click “copy image address” and then paste it into the img tag, or
Click “open image in new tab” and then copy the url of the page that comes up, and then paste it into the img tag.
Linking to the page that holds the image won’t work; you have to link to the image itself. For example, if I wanted to use an image in my page that is posted on my own blog, I wouldn’t use the url “http://quinncitycreations.tumblr.com/post/whatever”. I would open the image in it’s own tab, so that the only thing on the page is that image, and I would use that link.
One more note on uploading images: Don’t use tumblr for images over 500px in width. Tumblr can’t handle anything larger than that, so it resizes the images down to 500px if it’s too big. When you put the address in the code, things can get messed up. Best case scenario, the theme scales the image back up, giving you a lower quality image because it’s been scaled down and then back up. More often though, at least for me, the theme doesn’t resize the image (even if it says it will “/) and it ends up repeating in a pattern and just looks messed up.
So yeah, if it’s wider than 500px, don’t upload it to tumblr for img src purposes. I usually use imgur for those situations.
Anyway, this is only scratching the surface of all of the things you can do with HTML and CSS, but it’s a good place to start and should help you use all the page themes you have longed for but never used because you didn’t know how. At least, I hope it will. If anything is confusing or you have any more questions, feel free to hit me up and I’ll do my best to help you!
