The following four themes are our hand-made tumblr themes free for you to use. Follow this blog if you would like to receive updates about new theme releases or additions to the directory. If you would like to find even more themes and create your very...
Things have been a little quiet here, but worry not! Theme Station is re-launching this week. Better, faster and improved! Thank you for all the feedback and messages, I'm going through them right now and will see what updates can be done.
Themestation.net will be down for some hours today, due to updates. Sorry for the inconvenience, but the links to out themes are still up. Further information on specific updates will be provided later!
JQuery Infinite Scroll has brought about a little revolution when it comes to navigating blogs and websites in general. Replacing the pagination at the bottom of each page which would usually take you to the next page or older entries, Infinite Scroll simply loads said content onto the current page. Sounds complicated, but simply means that all you need to do is scroll and scroll until you reach the very end of a website. Browsing for lazy people, yet very aesthetically pleasing if done correctly.
A small history of Infinite Scroll
The first time I stumbled upon Infinite Scroll was on Tumblr, which is the community has been using this technique the most. The Tumblr dashboard itself can be used with Infinite Scroll and various themes on Tumblr all come with Infinite Scroll installed. Another website that caught my eye was Tumblr Mosaic Viewer which allows you to view any public Tumblr account in a clean and easy to navigate grid, although it only displays image posts. After that it was soon popping up everywhere and including websites like Dazed and Confused, Lookbook.nu or Fab.com.
There are many different scripts that let you achieve the effect of infinite scroll, including Cody Sherman’s Infinite Scrolling Code (for Tumblr) and Paul Irish’s JQuery Infinite Scroll (can be used for any platform). WordPress also has a plugin that enables Paul Irish’s Infinite Scroll for your self-hosted blog.
I will soon put up a tutorial that shows how to implement the Infinite Scroll effect the easy and hard way. So stay tuned for that. In the meantime, before you go looking for a theme that supports Infinite Scroll, read through the next few lines to find out if it is the right thing for you!
Pros of using Infinite Scroll
Easy Navigation: The main benefit of using Infinite Scroll is definitely the easy navigation of your website. Users do not have to look for the pagination, instead content is simply loaded on and on. It makes browsing and scrolling easy and fun.
Modern Look: If done correctly it gives your blog as a whole a new and modern aesthetic. There is nothing more pleasing to find a well designed website using Infinite Scroll.
Responsive: Since Infinite Scroll is coded with JQuery it works on iPhone, iPad, iPod Touch. Which is good, because that means mobile users can also enjoy browsing.
Cons of using Infinite Scroll
Other Scripts Not Supported: Infinite Scroll can only load text and images so if you have used other scripts ( e.g.: the ones that support music players, slideshows, lightboxes…) they might not work anymore. There is a way around this, which I will talk about in another tutorial.
Overlapping: Having coded a number of themes with Infinite Scroll one of the most common problems is overlapping of images. Especially if you are using it in combination with a grid theme. This usually happens if the images you are loading are HQ (500KB+) There are many different solutions for this that work well one way or another. To avoid picking a theme that overlaps, read through our checklist on how to choose a theme with Infinite Scroll.
Choppy loading: Sometimes you might find a blog which loads by overlapping it’s posts and then re-arranging them after some time. This doesn’t look pretty and is what happens if Infinite Scroll is not implemented properly.
Browser Memory: Browsing a website that uses Infinite Scroll gobbles up a lot of browser memory. That means that after some time your browser might crash. This is because it’s memory is being maxed out by all the loading Infinite Scroll is doing. And a browser crashing repeatedly is most annoying.
No Footer: Since the script keeps loading on and on it is impossible to put any content into the footer as the user can never reach it. You can swap the automatic loading for a “load more” button to give the user time to look at the footer if you like.
Fewer loads: If your website has advertising that is rated by page loads or hits, you will get far fewer hits using infinite scroll.
Should I use Infinite Scroll?
You might be wondering, whether you should use Infinite Scroll or not. In my experience it works best with blogs and portfolios, but can be used with any website that has extended archives. So if you are planning on setting up an image heavy project you are good to go. Grid themes in combination JQuery Infinite Scroll works best, especially with JQuery Masonry.
Checklist:
Is the browsing and loading “smooth”? (No overlapping)
Is it slowing down your browser? If yes, the code is not lightweight enough and might give other users problems.
Does the theme have a “back to top” button?
Does it have a “sticky” navigation that scrolls along with the content? (Not a must, but very handy)
Is it giving you feedback on it’s loading progress?
Best practise themes:
Here are some themes that make the best out of Infinite Scroll:
Tumblr:
Opaque by Andbamnan
Disassemble by Smpl Design
Meringue by Smpl Design
WordPress:
Sight by WpShower
If you have any other themes to add to this list drop me a comment.
Browsing around Tumblr I noticed that a lot of people have trouble with find the right place to insert images into their description. The easiest way is to make use of the “description box” which is found in the Tumblr customization area.
In this tutorial you will learn:
Where the description box is located in Tumblr
How to insert your image into the description box
How to make sure the image does not overlap
Extras such as turning the image into a link or centering the content of your description box
You will need:
To be logged into your Tumblr account
To have uploaded the image you wish to insert (you can use services such as Flickr, Photobucket, TinyPic) and have the URL of your image ready
Make sure the theme you are using has a sidebar or area where the description appears. I’ll be using 8 Guitars by Andrew Stichbury of Untitled Themes in my example.
It would be useful if you:
Understand the basic HTML of displaying an image (using the <img> tag and the attributes that come with it)
1. Where is the description box? Tumblr has been undergoing a few changes during the last couple of months. Especially the upgrading of the entire theme customisation area left me having to restructure where everything is. Anyway if you are logged into your account, you will first have to click onto the name of the tumblr you want to edit.
After that click on the “Customize theme” link in the top right corner:
Voila there is the description box. You can use it for far more than just a bio text or an image, but that’ll be covered in another post. The description box takes text, HTML and Javascript so you can insert all of you code into this box directly.
To be able to work properly make sure you enlarge the box. You can do so by clicking on the right bottom corner of it and pulling it down.
2. How do I insert the image into the box? Now is the moment to make sure you have the URL for your image ready. We use the <img> tag to insert the image into the box. The code in my case will look like this:
3. How do I avoid overlapping? As you may have noticed in the screenshot above (on the right), the image is much wider than the space given in the sidebar. You can avoid this by either picking a smaller image to begin with, or use the width attribute to define the width. Take a look at the code below:
You can play around with the width depending on the theme you are using until it fits just right. In my case 250px was exactly the right width.
4.Extra: Here are some more things you can do to your description. You might want all your text and your images to be centered. Simply use the <center> tag to do so.
4.1 Centering your text and images:
<center> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <img src="http://farm8.staticflickr.com/7198/6895599525_402e035a7d_o.jpg" width="250" /> </center>
4.2 Making your image a link: Make sure you add the border attribute so you don’t get ugly borders. And image as a link can easily be used to link to your favourite blogs or websites.
I hope this tutorial has been useful for you. If you have any questions, feedback or would just like to say hi, simply drop a comment below. We’re always happy to hear from you!
If you have been wanting to customize your theme on Tumblr, Blogger or WordPress and have no idea where to begin, this is the best tutorial to take. Learn about the very basics of HTML so you can make small changes to your blog or website.
In this tutorial you will learn:
How to insert images onto your website
How to make links
How to change your text to bold, italic, underline, crossed
How to color bits of text with <span>
1.Inserting and image into your website. To insert an image into any HTML document this is the code you use:
<img alt="Photo of my dog" src="URLOFIMAGEHERE" title="This is my dog Rover." />
src stands for “source” and is where you put the URL of your image. If you uploaded it to a place like Flickr, TinyPic or Photobucket, you’ll always get a URL that starts with http and ends in either .jpg, .png or .gif. That is the URL of you image.
alt stands for “alternative” and is meant to provide alternative information for the image if a user for some reason cannot view it (because of slow connection or an error in the src attribute).
title provides you with a space for additional information about the image. If you want text to appear when somebody moves the mouse over it (tooltip), use the title attribute.
The title and alt attributs are not musts and don’t need to be put in for the image code to work. Use them if you want to add extra information to your images. Therefore the short version of this code would be:
<img src="URLOFIMAGEHERE" alt="" />
2. Making links. To create a link this is the code you use:
<a href="URLWEBSITE">This is a link to a website</a>
a stands for “anchor” and simply tells the browser that a link is being posted now.
href stands for “hypertext reference” and you are simply telling the browser where you want the user to be lead when they click on the link. This is where you insert the URL of the website you would like to link to.
The text inserted between the opening and closing tag is is what the user will be able to click on. You can also replace that text with an image. Make sure to set your broder to 0 so you don’t get ugly borders.
3. Changing your text to bold, italic, underline, crossed. If you would like to change your text here is how you go about it:
<strong>this is bold text</strong>
<em>this is italic text</em>
<u>this text is underlined</u>
<del>this text is crossed</del>
4.Colouring bit’s of text with <span>. You might want to change the color of text in a paragraph. There are many ways to archieve this, but this is the easiest way to go about it:
This is an example of a sentence I would like you to read and I would like to <span style="color: #ff8533;">highlight </span> some of it, too.
These are just a few basics that you might need when you want to edit simple parts of your theme of website. I will be going deeper into HTML and CSS in future entries.
Kitsune Grid, our third theme has been released! Have fun ans let us know if there is any trouble. Kitsune Grid is:
clean and simple
built on a JQuery Masonry grid (four columns)
is responsive (can be viewed on iPhone, iPad, iPod Touch; make sure to deactivate the tumblr mobile theme)
has appearance options
sticky jquery header
custom font (which can be disabled)
custom color settings
Infinite Scroll (including audio, video & photosets fix)
For more information and demo go here: http://directory.themestation.net/2012/04/kitsune-grid-a-free-responsive-tumblr-theme/. Or install it directly: http://www.tumblr.com/theme/34416
Another free theme for you to enjoy! It's a grid theme with JQuery Masonry and Infinite Scroll.
Clean & Simple Design
JQuery Masonry Grid
Appearance Options
Custom Fonts
Custom Color Settings
Use Two, Three or Four columns
Infinite Scroll (Including Audio, Video & Photosets Fix)
For more information and demo go here: http://directory.themestation.net/2012/01/vertex-free-tumblr-theme/. Or install it directly: http://www.tumblr.com/theme/33578
Our pre-launch gift to you. Enjoy and be sure to follow us!
Clean & Simple Design
JQuery Masonry Grid
Appearance Options
Custom Fonts
Custom Color Settings
Use Two, Three or Four columns
Infinite Scroll (Including Audio, Video & Photosets Fix)
Responsive Design (Supports iPhone, iPod, iPad & Mobile Devices)
For more information and demo go here: http://directory.themestation.net/2012/02/mesh-free-responsive-theme-for-tumblr/. Or install it directly: http://www.tumblr.com/theme/33194
romaincrisis
germansingergirl
theartofmadeline
kaledo-art
jacobvanloon
dailybridgerton
discoholicmusic
dededos
janainaart