(semi-hiatus) ettudis/ browse/ history/ ask/ Contains theme-related question and answers, html and css tutorials, resources of all types.

Themes are located on the website (click the link labeled "content", it will drop down to link to "tumblr themes").

1 2 3 »

[UPDATED] Basics of Single-size Multi-Column Themes

ettudis:

This tutorial will cover how to make themes with more than one column in which the posts are nested (aka. Grid theme), in particular, themes in which the columns are in only one specified width. 

I have not yet made a theme in which the column sizes change thus I do not how to do it, but the script are the same, you probably just need to add extra features to the script so perhaps you can figure it out on your own. 

Anyways, let’s get started. 

The Concept

We are going to use one div layer to wrap ALL the content, and then another div layer to wrap each post. Then, we use the CSS element, float:left; so that each post is stacked next to each other. The Masonry script will be used so that the post becomes nested. So we’re going to seperate this tutorial into three main ideas:

  • The HTML: set-up
  • The CSS: making things stack into columns
  • The script: incorporating masonry to make it nester

The HTML

In my tutorial series, I mentioned there were two ways to set up the posts block, one with tables and another with div layers. However, in those lessons, I also mentioned to not put div layers around the post blocks (only inside) since it interrupts with the infinite scrolling script by cody sherman.

Well, scrap all that. It won’t matter since we’re not using the same infinite scrolling script. We’ll be working with div layers and you’ll need two. One will be outside the post block, to wrap around all posts, and the other, will be for each individual post (inside the post block). Similar to this…

<div id ="content">{block:Posts}
   
<div class="container">

{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}       
{Body}
{/block:Text} ...

Please, please, PLEASE use your own wrapper (div layer) IDs.

The CSS

In the CSS, you want to make the content wrapper be big in accordance to the number of columns you want and the size of your columns. For example, you plan to have 400px wide posts (container wrapper), and want two columns, you would need at last 800px width for your content wrapper. Make sure you take into consideration, the margin and padding of your layers (ie. if you had 5px margins, your content wrapper should be about 820 or more,). Just trial and error until you get the right look! 

Next, you need to make sure your container wrapper is floated to the left:

.container{

float:left;

}

The Script

Next, you are going to incorporate the script so that it displays the way you want it to. 

First, you need to include to external script links (place codings anywhere between <head> and </head>. One link is to jquery and the other is to the masonry script. 

<script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
<script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>

Then, you need to include the basic script required for the masonry:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

The important parts are bolded, replace with the names of your wrappers/div layers. 

Ta-da! You’re basically done. This all you need for masonry to work. Simple, eh? Though I think most people are familiar with multi-columns in combination with infinite scrolling, but the above code DOES NOT include infinite scrolling, so you will need to add in pagination codes (explained here). 

There are many other options, code that customizes the masonry, you may include (add after itemSelector : ‘.container’,) as well as other methods, effects that you can add to masonry, such as infinite scrolling which I will explain here. 

Masonry with Infinite Scrolling

First, you need to add a link to a masonry-specific infinite scrolling script. 

<script src="http://static.tumblr.com/twte3d7/qNulm663d/infinite.js"></script>

And so, we have the basic script:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

So, you need to add additional codes to render infinite scrolling:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
itemSelector : ".container", 
navSelector : "div.navigation",
nextSelector : ".navigation a#next",
bufferPx : 10000,
extraScrollPx: 10000,
loadingImg : "",
loadingText : "",
},
function() { $('#content').masonry({ appendedContent: $(this) });
});
});</script>

For some reason not specified on the site, it is necessary to include all those options (buffer, loading text and images, next page selectors) for infinite scrolling to work. As well, additional HTML (for the next/previous pagination codes) is needed:

<div class="navigation">
{block:Pagination}
{block:NextPage}<p id="page_nav"><a style="float:right" href="{NextPage}" id="next">Older ?</a>{/block:NextPage}
{block:PreviousPage}<a style="float:left" href="{PreviousPage}">? Newer</a></p>{/block:PreviousPage}
{/block:Pagination}
</div>

But since we’re working with infinite scroll and do not want pages, we can just use CSS to hide the codes:

.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {display:none;}
.navigation {display:none!important;} 

Now, because everyone has different screen resolutions, people with bigger screens meet a problem. Sometimes, the content at first will not reach the bottom of the window on bigger screens, and since infinite scrolling relies on the whole scroll aspect, the next page content will not load (since no scrolling is in effect).

To prevent this, I add an extra div layer with no content inside the div layer…

<div id ="over"></div>

And specify a certain height in the CSS so that it will stretch the screen.

#over{
height:2000px!important;
position:absolute;
top:0px;
left:0px;
width: 100%;}

So in the end, you will have the following for your masonry with infinite scrolling codes:

  • infinite scrolling script
  • jquery script
  • masonry script
  • basic masonry initial codes (with infinite scrolling method and options)
  • navigation HTML
  • navigation CSS

The End

I think I’ve covered all the basics. If you have any questions, feel free to ask, though I did not develop this script nor am I too familiar with it, so I can’t guarantee thorough answers. My advice is to TRIAL AND ERROR! Good luck, and happy coding!

UPDATED WITH INFINITE SCROLL FIXES. I am so silly, I always make so many stupid small mistakes that really shouldn’t happen in the first place.

The reason why the codes weren’t working was because I forgot to include the blocks that renders the tumblr variables for the pagination (ex: {block:Pagination}, {block:NextPage} etc etc).

Without it, tumblr won’t read for the following pages, and thus, infinite scrolling won’t work because what the infinite scrolling script does is uploads the codes for the next page. *SMACKS SELF* That was silly.

Ettudis Themes Commissions (request)

Designer Name:  Ans
Website | Theme Blog
Themes:
 click

What is a commission?

You’ll pay a small price for a design that’s fully customized according to your taste and satisfaction, not publically available for others’ usage.

What do you offer?

tumblr themes; artistic, aesthetic, fully customizable with features and looks that you want. 

So what’s the breakdown?

  • Price Range: $15~20 CAD 
  • Price depends on: amount and complexity of requested features and options, complexity of design.
  • May include: background design and/or sidebar images/logo design. 
  • Completion time: 2~3 weeks

What’s the process?

  • Submit Order
  • I will respond with the price and time estimates
  • Confirmation of your willingness to buy
  • I will work on a draft, then contact you via email, present live preview
  • If you are unsatisfied, we can revise the design until you are satisfied
  • Payment via paypal (non-refundable, full-price)
  • I will send you the design codes and help you set up if necessary

Are there any regulation/terms of usage?

I will only be taking 3~4 commissions at a time. Communication will be frequent and done via email (other methods may be discussed). I am open to feedback, critique, discussion of regulations and prices.

I will not provide services for:

  • Adult Material (Pornographic and/or obscene, crude content)
  • Offensive, racist content

The client may not use the contents of the commissioned work in any way which is unlawful, illegal, fraudulent or harmful, or in connection with any unlawful, illegal, fraudulent or harmful purpose or activity.  

The client may not redistribute the commissioned design for others’ usage or make profit from the design. The design is for personal and non-commercial usage only.

Partial-altering is allowed, credits must stay intact (visible on the main page or on a “info”/”credits” page, or as specified and negotiated with the designer) and client must be willful to give full credit to designer when prompted by other visitors. 

Any personal remarks from the designer?

I spend a lot of time into my graphic website, I’ve been doing this for more than 2 years now and people I know have been telling me “You do a seriously good job, why don’t you get people to pay you?” and I refused that idea because I’m an amateur, I’m not professional, heck, I’m not even an art student. I didn’t feel like I should get people to pay me for my hobbies. But now, I’ve reached a point where I am starting to like the idea of filling serious requests of visitors who want customized designs.

Furthermore, the financial support that the commissioned work will give me will allow me to buy my own domain, donate to my host, Misaki, who has been tremendously helpful and contributed to a big part of Ettudis’ development as well as buying resources I can incorporate into my designs.

With the opening of QQ, I hope to provide inexpensive, creative, aesthetic and functional designs. I am willing to work with my visitors until they are satisfied with what they’re paying for and I am open to designing in styles and formats I’m not necessarily most familiar with.

** FOR MORE INFORMATION, PLEASE VISIT QUAERO QUERO OR EMAIL ME AT ETTUDISDESIGNS@GMAIL.COM**