Grid theme tutorial

Grid theme tutorial by @hunterthemes

First of all, you need to find out the name of the container where posts are; Depending on the theme you’re using it might be #posts, #postcon, #container, #entries etc. (it’s above {block:Posts}). I assume it’s #posts, but if it’s not you need to change #posts in the following tutorial with the name of container div in the theme you’re using. Second, find how single post is named. It can be #post, #entry etc. (it’s under {block:Posts}). Let’s say it’s .entry. Again, change its name if needed.

1) CSS

.entry {
Width:  250px;
Padding:  10px;
Margin:  15px;
Border: 1px solid #000;
}

/*-- Assuming that the number of columns is 2
width must be a equation of:
number of columns * entry width,
paddings: 2 columns * (10px left padding + 10px right padding),
margins: 2 columns * (15px left margin + 15px right margin) and
border widths: 2 columns * (1px left border + 1px right border)
Ex: 2 * 250px + 2 * 10 + 2 * 10 + 2 * 15 + 2 * 15 + 2 * (1 + 1) = 604px --*/

#posts{
Width:  604px;
}


2) JAVASCRIPT

<!-- You need to paste these scripts after <head> or </style> -->

<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Masonry -->
{block:IndexPage}
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>\
{/block:IndexPage}

<!-- If there’s no infinite scrolling in the theme you’re using add this too -->
<script>
$(document).ready(function(){
    var $container = $('#posts');
    $container.imagesLoaded(function() {
        $container.masonry({
            itemSelector: '.entry'
        });
    });
    $container.infinitescroll({
        itemSelector: ".entry",
        navSelector: "#pagination",
        nextSelector: ".next",
        loadingImg: "",
        loadingText: "<em></em>",
        bufferPx: 10000,
        extraScrollPx: 12000,
    }, function(newElements) {
        var $newElems = $(newElements).css({
            opacity: 0
        });
        $newElems.imagesLoaded(function() {
            $newElems.animate({
                opacity: 1
            });
            $container.masonry('appended', $newElems,
                true);
        });
    });
});
</script>

<!-- If there is infinite scrolling in the theme you’re using add this too ->

<script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>

<script type="text/javascript">
$(window).load(function(){
    var $wall = $('#posts');
    $wall.imagesLoaded(function(){
        $wall.masonry({
        itemSelector: '.entry',
        isAnimated : false
    });
});

$wall.infinitescroll({
    navSelector : '#pagination',
    nextSelector : '#pagination a',
    itemSelector : '.entry',
    bufferPx : 2000,
    debug : false,
    errorCallback: function() {
    $('#infscr-loading').fadeOut('normal');
    }},
    function( newElements ) {
    var $newElems = $( newElements );
        $newElems.hide();
        $newElems.imagesLoaded(function(){
        $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
        });
}); $('#posts').show(500);
});
</script>

3) HTML

<div id=”posts”>
{block:Posts}
<div id=”entry”>
/* post types go here */
</div>
<!—End entry-->
{/block:Posts}
</div>
<!—End posts-->