[ Finally HOW TO MAKE A TUMBLR THEME SERIES: VOL III - Posts ]

Includes:

• Post Elements / Types of Posts
• Hiding Photo/Photoset Captions
• Grid (Multiple Post Columns) Layout
• Horizontal Layout

» VOL III -  POSTS TUTORIAL
» VOL II - SIDEBARS TUTORIAL
» VOL I - BASIC STRUCTURE TUTORIAL
» TUTORIAL SERIES NOTES & FAQ

Please like/reblog this post if you found the tutorial helpful!  ♥ 
Because it took me 8 hrs to write it up. 

Next week time whenever I get to it,  VOL IV - Post Info, which will explore:

- Post info elements
- Post info on the sides of posts
- Post info showing on hover

How to Make A Tumblr Theme

I don’t think I am very good at explaining things which is why I have always been hesitant to make a tutorial like this. However, I figure with the years I’ve made themes the least I can do is pass on my knowledge and aid those who want to make themes or go into web design themselves. I am aware that there are a lot of tutorials out there, but since I personally get requested for tutorials on this and taught myself, I figure I might as well.

The tutorial will span over five subjects dealing with theme making:

• Vol I - Basic Structure
• Vol II - Sidebars
• Vol III - Posts
• Vol IV - Post Info
• Vol V - Customization & Variables

Each volume will be be put up when completed separately. I hope the whole tutorial will be fully up in the coming week or two. I will post when I have the new volumes up as well as a final post with the links.

I will try and explain as best I can how to make a theme for those with no basic CSS or HTML experience. However, it will be definitely be easier for you if you have some CSS or HTML knowledge. Keep in mind that most of the tumblr specific coding has always been available with tumblr’s custom themes page. I am just trying to help people understand it and teach people CSS and HTML the way I do it.

Also if you don’t notice by this wall of text, I can ramble but I hope I’m succinct enough in explaining why you have to do certain things in coding - so it could be lengthy to read but I think it will be worth it?

Note: There will be no base theme provided.  I am hoping the end result for this tutorial is for you to make your own themes with your own style, not simply change stuff around on a base theme based on my style. That wouldn’t be learning very much would it? The unique thing about this series will be that I go through different theme types instead of saying let’s make a theme that looks exactly like this. This way you can either just make different themes for yourself or become a theme maker.

Questions: Just because I made a tutorial it does not mean that I will answer further questions about how to do etc. etc. relating to them. I have created plenty of examples for you to experiment with and make your own. (Even providing an easy to see View Source Code.) I will try and answer your questions if I have time, if it is a general question - if it is specific however, I reserve the right to not answer it.  Again, The whole point of tutorials is to learn so if I just give you a code for xyz, it wouldn’t help so much in the learning process. If you experiment and work at it yourself looking at some referral places, you will be able to figure it out yourself I promise, and it will be more satisfying than someone just giving you a code. 

Themes: If you end up creating a theme from this tutorial series, I would love to see what you come up with! So don’t be shy to send me a message and who knows I may feature it on LMThemes!

/wall of text

How to Make a Tumblr Theme Series: VOL II - Sidebars

Let’s faced it the most unique part about themes are the sidebars. In this volume of the How to Make a Tumblr Theme tutorial series you will learn how to code FOUR different types of sidebars:

• The floating sidebar - most common
• The tall sidebar - the one that stretches the whole screen sometimes with or without a background image
• Two sidebars 
• Top/Bottom bars

This volume also includes:

• Basic sidebar elements - what typically goes into a sidebar and the tumblr elements for that
• Basic link style transitions - font color, background color, border
• Hover over descriptions
• Link blocks - the 3 basic ways to arrange links
• Jump Pagination - coding and styling page navigation that is like 1 2 3 Next Page.

» VOL II - Sidebars Tutorial
» VOL I - Basic Structure Tutorial
» Tutorial Series Notes & FAQ

Please like/reblog this post if you found the tutorial helpful! ♥

NEXT WEEK: VOL III - Posts

Which will explore:

- Basic post elements
- Multi column post layout aka grid layout
- Horizontal layouts

How to Make a Tumblr Theme Series: VOL I - Basic Structure

In this part of the tutorial series you will learn basic structure terms and the planning process. This tutorial is meant more for those who may not know CSS, HTML, or Tumblr elements at all. If you find you are more familiar with those things feel free to skip to VOL II: Sidebars.

» VOL I - Basic Structure Tutorial
» Tutorial Series Notes & FAQ

Please like/reblog this post if you found the tutorial helpful! ♥

matthewgooden:

» Mock 3D Image Tutorial

A couple people have asked me how I did the sidebar image I have right now. I know there are a few tutorials like this, but as I didn’t use any tutorials I will show you my method. It’s as easy as 5 steps. Enjoy!

CSS 3D Text Effect | Beginner

This effect for themes is really simple to implement if you know just exactly what you want to style.

» Tutorial

yukoki:

Theme/Page Editing/Installation Tutorial »

Hello there! So I’ve decided to make a tutorial on how to install common pages and themes, along with a few extra notes. The following tutorial covers: [updated: 03/02/13]

• installing a theme (pastebin)
• installing themes from theme garden
• how to create/edit a page
• installing custom pages
• installing redirect themes
• editing about pages
• editting tag pages
• linking your pages

Of course, it’s not a full tutorial, and I’ll be improving/updating it whenever I can. I hope this helps!

Tutorial: How to make a hover-over chatbox

cocorini:

Live Preview: HERE

Apparently a lot of people have been asking how I make this effect with the chatbox on my blog, so here you go. :)

Read More

excolo:

In this tutorial, we’ll be learning how to create jump pagnition for your theme. For those who don’t know what jump pagnition it, an here is an example (taken from my blog):

What you’ll need to know first: basic knowledge of HTML and CSS.

Read More

LENTICULAR 3D IMAGE/GIF TUTORIAL

pscs5:

My very first tutorial showing you how to convert a 2D image to a 3D image.

You’ll need: 

-Photoshop

-Triaxes StereoTracer (link in text)

Read More