What Non Programmers Think Programmers Are Like:

What non programmers think programmers are like:

What programmers are actually like

How To Make Tumblr Themes: Part I

Introduction

What we will cover in this tutorial:

HTML review (bare minimum you need to make a basic theme)

CSS review (bare minimum you need to make a basic theme)

Meta Tags

Other <Head> codes

Documents and websites we will consult regularly in this tutorial (keep these open in a tab):

W3Schools HTML

W3Schools CSS

Tumblr Theme document

HTML Review

Before making a theme, you should know that HTML consists of tags (keywords surrounded by angular brackets like <html>) and that they come in pairs (opening and closing like <html> and </html>).

You should also already know basic HTML elements such as links, headings, paragraphs, lists, formatting and images. If not, please learn it at the website I provided.

The most common way to group and position things in a website layout is to use div layers or tables. In this basic theme tutorial, I will cover div layers first since it is easiest to understand.

Here is a coding for text that is NOT inside a div layer:

[click for larger view]

Here is a coding for text that is inside a div layer:

[click for larger view]

Also notice that I used CSS to dictate the width and background of the div layer. That is how CSS and HTMl is connected; you can use CSS to demand HTML elements to look and be positioned a certain way. So in order to make columns in tumblr themes, you use CSS to position and “decorate” the div layer which will wrap your columns (ie: posts, sidebar etc).

CSS Review

In relation to what we’ve discussed above, CSS commands HTML elements. So you need to be very familiar with CSS. CSS is the codes between the <style type=“text/css”> and </style> tags (as can be seen in the previous image). In this tutorial, I will use the following terminology:

Now, div layers can either be id-ed or class-ed. The id selector is generally used for a single unique element while the class selector is used for a group of elements. While there is that difference, I discovered it doesn’t matter. You can use id selectors for multiple/repeated layers.

[click for larger view]

In the above, the selector for id is preceded by a “#” (outlined in pink) and the selector for the class is preceded by a “.” (outline in blue). Now, you can use basic CSS properties to specify the position, dimension and style of the layer.

You will need to know 90% of the properties described on this site; particularly background, color, fonts, links, text, margin, padding, z-index, position, display, dimensions and borders. Since it is too much for me to cover them all, please review/learn them before proceeding.

Getting started

Now we’ve gone over the idea of how HTML and CSS will be needed, we can apply it to tumblr themes. So, we start with our basic HTML tags for any basic webpage:

<title></title> is where you specify the title of the blog which will show up on the browser tabs. Looking at the basic variables section of the custom tumblr theme document, you can see {Title} and {block:PostTitle}{PostTitle}{/block:PostTitle}.

{Title} is a “variable” which corresponds to the blog title (which you customize in the customization page). For example, my theme blog title is “ettudis”…

{block:PostTitle}{PostTitle}{/block:PostTitle} corresponds to the title of the post (of the individual posts). The “blocks”, {block:PostTitle} and {/block:PostTitle}, renders so that the post title shows up only when there is a post title (in other words, when you go to the individual post page. For example, the title of my “terms of use” post…

Generally, it is set up so the it’s the {title} followed by a dash, then {block:PostTitle}{PostTitle}{/block:PostTitle}. So, it will look something like this:

<title>{Title} - {block:PostTitle}{PostTitle}{/block:PostTitle}</title>

We also can add in favicons. To make the favicon the same as the blogger’s userpic/profile icon, we can just link to {Favicon}, like so:

Meta Tags

The meta tags in tumblr themes are what allows the bloggers to customize the themes colours, upload images, select options, add links etc, as described in the appearance options. Then, you can line up the meta tags to the HTML or CSS.

For colours, it will look something like this:

[click for larger view]

As you can see, the colours in the meta tags can correspond to the HTML or CSS. So the default colours (indicated in the meta tags, ie: #FFFFFF, #000000 etc) are what the colours are if the blogger reset to defaults. If the blogger decides to customize to his/her own colours, the colour he/she chooses will correspond and fill into the HTML or CSS in the live preview.

For custom fonts, it will look similar to:

[click for larger view]

Similar to colours, the meta tags correspond to CSS (or HTML). However, tumblr only provides a few custom fonts (ex: arial, georgia, impact, courier new, helvetica, tahoma, trebuchet ms, times new roman etc) that are selected via a drop-down menu on the customization page.

Now booleans are rather important in tumblr themes. These meta tags allow the bloggers to select an option.

[click for larger view]

In this, the option is whether or not “if infinite scrolling” should be on the blog. The meta content is “1” if there is infinite scrolling as default. If infinite scrolling is not default, it meta content should be “0”.

Outlined in orange, {block:ifinfinitescrolling} and {/block:ifinfinitescrolling} wraps around the HTML (or CSS) that will be activated if the blogger decides to select the infinite scrolling option. If not, then the HTML (or CSS) in {block:ifnotinfinitescrolling} and {/block:ifnotinfinitescrolling} will be activated.

Booleans can apply to anything, such as whether or not to show tags on index page, size of post, number of columns, show side image ~ whatever your imagination allows you!

On this note, this sort-of gives you the idea of how tumblr codes work. The “blocks” act as activators for a certain code that it contains. Remember they always come in pairs as well, an open and closed one.

In the above example, you can see that there are the blocks, {block:Pagination} and {/block:Pagination}. This means that the codes inside these blocks will only show if there are actual pages; so in an individual post page, the pages will not show up.

Another meta tags are text. You can allow bloggers to enter their custom text into a theme. You can do a lot with text, you can also use it as an input for CSS hex numbers, dimensions (they would enter pixels), labels etc etc.

In this particular example, I’ve used custom text as a way for bloggers to enter links. The blocks (in pink), as I’ve explained previously, act as activators for when the bloggers do enter a URL in the “link 1” meta tag (outlined in blue).

Tumblr also allows bloggers to upload images. So bloggers can upload their own background or other images they want (that you specify) into their theme.

[click for larger view]

Shown here, you can see that the meta tag for the background image dictates the CSS body selector (outlined in orange). In the content, you can insert an image (“http://static.tumblr.com/…”) as a default image.

As for the sidebar image meta tag, it uploads the image into the HTML. Blocks (shown in pink) can also be used in case the blogger does not want to upload an image (or if an image is not uploaded, an alternate coding can be shown).

Other <head> codes

You can also insert a {CustomCSS} block at the bottom of the theme’s CSS style block (before </style>) so that bloggers can insert their own CSS if they want to.

There is also a meta tag that is involved in search engines.

{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

This allows the description of the blog to show up if the blog is searched on the a search engine (such as google).

And that’s all I have to say about meta tags which is crucial if you plan to make themes for the public use.

Key Points

To clarify and emphasize, the terms, “variable” and “blocks” are what makes up the tumblr theme. Variables are used to insert dynamic data. As we’ve seen in previous example, {Title} is a variable and so are {Image:Sidebar}, {Color:Background}, {Text:Link 1} and so forth. They come in singles, meaning, you do not need to close them.

Blocks are used to render (activate) a block of HTML, CSS, or a set of data. As we’ve seen in previous examples, {block:Title} and {/block:Title} are blocks, and so are {block:ifinfinitescrolling} and {/block:ifinfinitescrolling}, {block:iflink1} and {/block:iflink1}, and {block:ifnotsidebarimage} and {/block:ifnotsidebarimage}. These come in pairs, meaning, you do need to close them similar as to you would close a HTML tag.

The meta tags allow users to customize the theme without editing the HTML/CSS themselves. They only have to customize via the Appearance section on the customization page. We’ve covered all the meta tags that tumblr has: colours, fonts, booleans, text and images. Every meta tag can correspond to a HTML/CSS component. So using HTML and CSS, you can specify the look of a certain variable and meta tags can give customization options for the HTML and CSS.

The End

I think I’ve covered all the basic ideas of what tumblr themes need in order to work. Though this tutorial was more of introduction on just the fundamental foundations of what we’re going to build, next tutorial will get into constructing the tumblr theme using variables, blocks, CSS and HTML.

I hope I was clear, concise and thorough in my explanations. If I missed anything or if something wasn’t clear, please let me know as all of this sort-of comes to me naturally now so I wouldn’t know if I was being abstruse or convoluted.

Tags

coding html css

6K notes View Post

programmingravenclaw

8 years ago

523K notes View Post

programmingravenclaw

8 years ago

Types of Data Structures

Tags

data structures

326 notes View Post

programmingravenclaw

8 years ago

Never make fun of someone’s passion because that is the thing that saves them from the world.

(via kluah)

8K notes View Post

programmingravenclaw

8 years ago

Must see

Programmers for you ;)

Tags

the accuracy

1K notes View Post

programmingravenclaw

8 years ago

What non programmers think programmers are like:

What programmers are actually like

Tags

so true

1K notes View Post

programmingravenclaw

8 years ago

hey hey hey everyone!! as a self-proclaimed mathlete & absolute math nerd, i figured i could share some quick little tips for such an amazing subject! soooo here you go:

practice, practice, practice!!

I always say that practice is the most essential aspect of studying & learning math- and many other subjects! This can take the form of homework (mini tip: always do your homework if you are able!!! it’s only to your benefit! even if it’s not for a grade, try your best to work on it anyway), practice problems from a textbook or workbook, old questions from a past quiz or test, etc. Even just a couple of practice problems every day, or some quick q’s before a test, can help a lot. Remember, repetition is a key form of revision!

take active notes

Math is a very active subject, so it’s important for your notes to reflect that. Basically, if you’re working on an example problem in the middle of your notes, write it down too. These problems can come back in quizzes or tests, and they really help reinforce material when you’re reviewing. Another way to keep your notes active is by drawing diagrams!! Diagrams can be essential for certain topics, so please don’t ignore them, even if you think you can remember what that graph looks like. Also, if you ever need to jot something down in the margins of your notes, do it! All of this will really help when you review.

know your calculator

Whether you need to know how to use one, or how to survive without one, calculators are pretty much always relevant when it comes to math. If the subject you’re learning allows it, you should always have a calc nearby, and you should know its basic functions. That doesn’t mean know how to add & subtract (unless that’s all that’s necessary for you), it means being able to work the graphing function, or how to enter data into your calculator for statistical evaluation, how to find certain functions in your calc, etc. It’s also very important to know how to work without your calculator. As you progress in math, there will be certain things that you just need to know how to do, because they take too long with a calc. Basically, make sure you understand what you’re doing with your calculator, so that you can understand how to do it without your calculator.

keep track of everything!

Math is a lot of data & different steps that you need to keep track of. When working on something, know where your numbers (or other forms of data) are, make sure you aren’t missing any! Do your best not to skip steps, even if you’re great at working in your head. Missing data & skipped steps are major sources of error and tiny mistakes that can mess up a whole problem. Also, know your common errors! Do you tend to skip a certain step because you think you’ve got it? Do you sometimes misinterpret graphs or data? Once you’ve figured that out, be extra careful with the specific problems that you have trouble with. Keeping track of your work & your mistakes can help you improve a lot!

memorize what needs to be memorized

A lot of math can be done with basic understanding of how to work a problem & the process to find a solution (these things are generally memorized with practice!) but there are some things that just need to be memorized. Whether it’s elementary functions like addition & division, or basic trigonometry, if it’s not a process you can learn through understanding, and need to know, make sure you know!! Some things can be memorized with practice, and others require different methods of memorization (I typically write & rewrite things multiple times). You can find some great posts on memorization here!

more masterposts!!

stem studying

study methods

precalculus

algebra

geometry

(ap) chemistry

ap world history

studyblr-ing

the everything book

the pomodoro method

how to use flashcards

how to use sticky notes

welcome to high school

tiny study spaces

what’s in a pencil case

i really love math & i wish everyone could see it like i do, so i hope this was helpful! keep shining like the star you are and don’t forget to be awesome today!!

- Aza

3K notes View Post

programmingravenclaw

8 years ago

So, when I was doing my thesis on whether or not fanfiction should be considered a legitimate genre of literature, my advising professor asked me for examples. I gave him the generic ones, of course - “Pride & Prejudice and Zombies” is a horror fanfic of “Pride & Prejudice”, “50 Shades of Grey” is an erotica fic of “Twilight" - and that seemed to make him understand what fanfiction is, but not how it’s useful. So I thought about it, and, after about a minute, I said, “Paradise Lost is basically a fanfiction of the Book of Genesis. And The Divine Comedy is an epic self-insertion fic for Catholic doctrine. So, basically, you were teaching us fanfiction last semester.” I had never before seen a grown man’s eyes widen with such fear, incomprehension, disgust, awe, and understanding.

245K notes View Post