Theme 18: Irresistible By Godamniall

So the plan was that I would publish a redux theme on my birthday, but I’ve been so busy that I couldn’t find the time. I’m really sorry that this theme is three days late. This theme is my first redux theme. I worked really hard for it. It took me a month, since there were some glitches with the notes, but it’s all good now. I’m really proud of this theme and I hope you guys like it as much as I do!

Live Preview Code | Theme Blog

  • 400px posts 
  • Small cursor
  • 160px sidebar image
  • 3 customizable links
  • Links are cute little fruits 
  • Ask background color is customizable
  • Details (post info) background color is customizable
  • Description is best if it’s 4-5 lines, can be as long as you want. 

Please like or reblog if you use/or are planning to use.

HTML

HTML is a structure. 

An extremely straight-forward structure. 

<html>

This is, obviously enough, what HTML starts with. Everything below that is HTML. 

(Told you it was straight-forward.)

</html>

This is what HTML ends with. Everything above that is HTML. 

HTML is 100% about saying where things begin and where they end. If you mess this up, and forget to specify where something ends, you fail at HTML. 

It always works the same way. Things begin with <x> and end with </x>

<> is here because reasons. 

/ is here to mark the end of something. 

Every web page is coded like this: <x>content of x</x> 

For instance, if you open google.com, you’ll notice the corresponding tab or your browser window is called “Google”. That’s the title of the page. 

Now, open the source code (right click, view page source) and do not panic. Yes, google’s source code is super fucking complicated. In the first few lines, though, you should find something like this:

<title>Google</title>

This is the part of the HTML code that displays “Google” on your browser tab. 

As another example, if I want to write “I love video games” somewhere on my page, I will write this: 

<p>I love video games.</p> 

<title> is your pages’s title, and <p> is any paragraph written on the page. 

HTML works like a menu system. If you open your edit HTML page, you’ll see many of the HTML tags like <html> or <body> have other tags in them. 

Think of it as big boxes with smaller boxes in them. 

Everything I will write here works on any website. If something is specific to tumblr, I’ll signal it. 

<html></html> is used for HTML. Everything you’ll want to add goes in there. 

<head></head> is used for a bunch of things, including all your CSS, the page’s title, meta variables, and most javascript

<body></body> is used for your page’s content. Everything displayed on your page, like posts, menus, etc, is in the <body>. 

<title></title> is your page’s title, as I showed you earlier. 

<style type=”text/css”></style> is your CSS. (1) It’s in your <head>. It’s all in your <head>. 

<div></div> is the HTML equivalent of a box or a division. Most pages are programmed by putting <div> and giving those <div> a name, then giving them special properties through CSS (2). 

<ul></ul> is for lists. Whole lists go between those two. Do not ask me why this is called ul

<li></li> is for a line within a list. Separate lines all have their own <li> tag. (3)

<a></a> is for links. It’s written this way: <a href=”url of the link”>text of the link that will be displayed on your page</a>.

<center></center> is used to center text. 

Pro-tip: don’t use it. You can define how a text looks in HTML, but it’s tedious, and much more convenient to do it via CSS instead. 

<p></p> is used for paragraphs or you can also not use it and your text will display just fine. 

<img src=”url of the picture”> (YOU DO NOT ADD </img> ANYWHERE, THIS IS ONE OF THE ONLY CASES WITH NO END TAG) is used to insert pictures. 

<br/> is used to skip a line. It looks like a fucked up end tag, but works on its own. You can also just use <br> but it doesn’t work with some HTML versions so play it safe. 

Pro-tip: in your customization menu, in the description box, you can add some HTML such as <br/> to skip a line. It helps to have neater descriptions. 

<span></span> work a lot like <div> except it’s a smaller box. <div> is used for entire portions of websites, while span can be used within a paragraph. It’s really just a smaller box, and serves the same kind of purposes (giving properties to everything between the tags). 

Everything else you can find in your HTML is either self-explanatory or something you won’t need to change if you’re just trying to modify how your theme looks. 

(1) Here the base tag is <style></style>, but to specify which language you’ll be introducing, you need to add type=”text/css”

You can specify a lot of things in a tag the same way. You can add things like style=”font-family:streetscript; font-size:15px; text-align:center;”. I took this at random from my page, but based on the code I’d say it’s my blog’s title. 

style=”x” defines the style of what’s going between the HTML tags. The font, font size, and the center effect in the code just above will apply to everything between the tags that piece of code is in. 

If I want to write a paragraph in Arial font size 11, I’ll write this: 

<p style=”font-family:arial; font-size:11px;”></p>

A general rule in HTML is that everything after an = must be between " because reasons.

A general rule in most languages is that things end with a ; also because reasons. 

This is a lot of information to absorb, so don’t try to remember it all. The best way to start coding is to first understand how to read HTML. As long as you know what <> means, what / means, what ; means and a bunch of other things, you’ll be able to understand most basic code you read. 

Instead of trying to remember everything to write code out of nowhere, open your theme edit HTML page, and read it. If you want to change something in your theme, find where it is defined in the code, and then change it. 

Finding the proper line of code to obtain a specific result isn’t hard to do on the internet, as long as you understand your page’s structure. Understanding the language’s structure is way more important than remembering how to do specific things with it. 

(2) A common way to give a name to a <div> is to write <div id=”name”></div>. Then, in the CSS, you can use #name to add properties to your <div> which is neato. More on that in a tutorial about CSS. 

(3) A list will be written this way: 

<ul>

<li>First item on the list</i>

<li>Second item on the list</i>

<li>Third item on the list</i>

</ul>

THEME 4 BY INSXGHTFUL

(TWO COLUMN) PREVIEW - CODE - CODE

THEME BLOG

MAIN BLOG

TRANSPARENT PICTURES 

If you have any trouble with this theme or want any html help message me on my MAIN blog

This theme includes:

2 columns

5 links

transparent picture

updates, social, stats and music drop down box (right top corner)

banner, lace and a white box behind post if options

***KEEP THE CREDIT**

like this post if you are thinking about or you are going to use this theme

ALL MY THEMES LOOK BEST ON GOOGLE CHROME BECAUSE THAT’S WHAT I USE

How to get started on theme customization

For this post, I’m going to assume you just created your tumblr account and have no idea how to customize your theme. So I’ll explain everything, including things most of you probably know. 

I’ll also assume you’re all doing this on a computer, because my phone is an old cheap shit that can’t even take pictures, much less go on the internet.  

The first step is, obviously enough, to click customization to the right of your dashboard. 

You’ll end up with a preview of your blog and an edit menu. From there you can select and install pre-built themes, but also edit HTML

HTML is a base language used to code websites. If you want to see the HTML behind a website, simply right-click anywhere on the page and click “view page source” or something like that. It will open a window with the HTML code behind the page you’re on. 

Google chrome also has a “view frame source” option, which probably allows you to see HTML of specific frames, but I never tried. 

More importantly, google chrome has an “inspect element” option, which displays HTML code in the lower third of the window, and highlights what specific portions of the code do on the page when you move your cursor over them

It’s an invaluable tool to learn code without actually buying books about it. 

It doesn’t work on most tumblr blogs for specific reasons, so you won’t be able to study other people’s themes with it. You can do that with other websites, though. 

What you have to remember is that the source code is the HTML behind the web page.

However, the HTML you will find by clicking on “edit HTML” in the customization screen is not the source code. 

Long story short, the code behind tumblr is kept hidden probably for copyright reasons, and you’ll only see a bunch of java scripts in the source code. 

The “edit HTML” screen, however, is made to allow users to navigate their theme and change things around. As such, parts of the code in the edit HTML screen is specific to tumblr, and won’t work anywhere else. 

Back into the classic edit menu, you’ll see appearance options and theme options. These things are options anybody can change, such as your blog description, your picture, your blog title, and a bunch of options in the theme options menu. 

Most of these things are created by the edit HTML screen. 

Most themes use what is called meta variables, which forces the theme options menu to give you customization options. 

In short, you can add a customization option to your theme options menu through the edit HTML screen. If you want to change around colours in your theme, for instance, you can use meta variables to add an option to change, let’s say, your posts’ font colour, and it’ll appear in the theme options menu.

Since the theme options menu comes with previews for fonts, colours, and a rather handy colour palette, it’s a very convenient method to customize things without having to know a specific colour or font’s name. Plus, it allows you to change things without having to edit your HTML every time. 

So far, I’ve tested adding to the theme options menu options to change font, font size, colour, links, and background pictures. I think much more can be done. More on that later. 

The add a page option allows you to create a specific page on your blog that will not be a post. It’s handy to create masterlists or an about page. These pages can’t be reblogged, liked, or commented on. They’re just blog pages. My about, FAQ and notable posts masterlist are pages added that way. 

Finally, the advanced options page is rather self-explanatory, except for the option to add custom CSS. Adding custom CSS here will add the CSS code directly to the source code, bypassing tumblr’s compilation of the edit HTML page. 

My guess is that some things can’t be modified or added through edit HTML, so you’ll have to add custom CSS. That, or it’s for beginners who want a specific place to copy-paste scripts they found on the internet without having to go through the edit HTML page. 

Lastly, keep in mind that HTML is the language websites are coded in, but not the only one used. It’s what makes up the whole page. 

- HTML is like a huge shelf or a skeleton. It takes care of displaying your page and basic things on it, but it also incorporates every other code language you use. Every time another code language is used, you will see the HTML equivalent of a sign saying “here begins x language” and another sign saying “here ends x language”. 

HTML works by saying “here begins x” and “here ends x”, exactly like the chapters of a book or the partitions of a shelf. It’s the armature of your page, and once you understand that, it makes it easier to read and code. 

- CSS is a language used to customize specific things. It’s what you’ll be changing if you want to change your theme’s appearance. It’s most of what my tutorials will be about. 

CSS is always introduced by an HTML sign such as <style type=”text/css”>. As you can see, it’s rather self-explanatory. CSS works very differently from HTML. 

It’s shorter to use than HTML, and a little more complicated, but the many shortcuts it allows makes it very convenient to use. 

- Javascript is a language used to add scripts to a page. You can use that to disable right-clicking on your blog, for instance. 

It’s more complicated than CSS, and you probably will limit yourself to copy-pasting pre-made scripts unless you really want to spend time studying the language. 

Just like CSS, javascript is introduced in the HTML code, so you’ll be able to notice it. And not touch it. 

There exists a bunch of other languages, but they’re either too complicated for basic changes or aren’t used for tumblr themes. 

THEME 4 • DAVINA.
{ CODE / PREVIEW }

→ sidebar dimensions are: 245x290. long sidebar dimensions are 151x548.

→ includes THREE links.  

→ tooltip and hover tags included.

→ i recommend this for character themes or rpg use.

→ don’t be an asshat and steal. don’t remove credit. thank you!

mrsgrump said:

How do you add the AC sprites to your description? Sorry to bother you!!

hi! youre not bothering me at all! heh, i had trouble figuring out how to do it myself actually, but its quite simple.

First, paste this code: <img src=image url> into your description box, where you want the picture to be (i.e, above the text, under the text, whatever) Find the picture you want in your description, open it in a new tab and copy the url. Replace the words image url of the code with (believe it or not) the actual image url.

Thats it! Save the changes you made to your blog, and exit the customise tab, and your image will be in your description ^+^

Auto-redirecting to your new blog

I’ve been seeing many of my friends changing their urls and then not having a way to keep their former url and direct people to their new blog. For this reason, I’m going to share the script I use.

To use it, just copy and paste the code as if it was a theme. Just remember to add your url where it says so.

<head> <script>
window.location.href = ‘http://(your new url goes here).tumblr.com/’;
</script>

<title>{Title}</title>

<meta name=”description” content=”” />

</head>

<style type=”text/css”>

</style>

And voilà, all done. If you have any problem, let me know.

2
30 : INTERLUDE

preview / code
  • title
  • description
  • 500px posts
  • customizable colors
  • index caption, permalink and tags
  • four extra links
  • pagination
  • permalink sources
31 : IRIS

preview / code
  • title
  • sidebar ( 200px )
  • description
  • 500px posts
  • customizable colors
  • index caption
  • four extra links
  • pagination
  • index permalinks, sources and tags

please like/reblog the post if you use, and don’t remove the credit

Contra 

  • This is one of my older themes that I (finally) got around to simplifying and posting. Keep credit on the theme

This theme comes with:

  • 2 columns
  • Infinite Scroll
  • Sidebar Image
  • Hover links
  • Hover description
  • Permalinks (Notes & Reblog)
  • Customizeable options

Notes: 

  • DO NOT UNCHECK “2 COLUMN” OPTION, IT WILL ONLY MESS UP THE THEME
  • Keep the description short (1-2 lines) because it looks better
  • Keep credit on the theme or move it to your faq
  • You may edit this theme to your liking
  • To publicly post an edited version of this theme, message me for permission first (or I will report you)
  • Do not use this theme as a basecode

{ Static Preview - Code

Wait 5 seconds then click “skip ad” to access the codes

Text
Photo
Quote
Link
Chat
Audio
Video