1

I'm making a custom theme in tumblr for my personal portfolio.

I'm trying to implement this image. So i thought in tumblr i could divide the blue posts in ODD and the red ones in EVEN. In my file, the HTML and CSS work just fine but in tumblr I'm having a bit problems with this.

enter image description here

HTML:

      {block:posts} 

       {block:odd}      
        <div id="main-container" >
        {block:Photo}        
            <div class="post-wrapper">



            <div style="background: url('{PhotoURL-HighRes}') center                 center no-repeat;    width: 250px;
             height: 420px;
             float: left;"></div> 
             </div>
        {/block:Photo} 


        </div>
    {/block:odd} 



    {block:Even} 

         <div id="main-container_bot">
            {block:Photo}      
            <div class="post-wrapper_bot">
                <div style="background: url('{PhotoURL-HighRes}') center 
                center no-repeat;    width: 250px;
                 height: 420px;
                  float: left;"></div> 
            </div>       



            {/block:Photo}      
</div>
    {/block:Even}

     {/block:posts}

CSS:

#main-container {
    background-color:#fff;
    margin-left:422px;
    margin-top:150px;
}

.post-wrapper {
    position: relative;
    width: 250px;
    height: 420px;
    float: left;
    background-color:blue;
    -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

#main-container_bot {
    margin-left:547px;
    margin-top:210px;
    position:absolute;
}

.post-wrapper_bot {
    position: relative;
    width: 250px;
    height: 420px;
    float: left;
    background-color:red;
    -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;     
}

This works just fine outside tumblr, but in tumblr, doesnt work. I think that problably its about this "position:absolute;" but i realy dont have a clue how to fix it. Please can anyone help me fixing this?

gn66
  • 803
  • 2
  • 12
  • 33
  • I would suggest two things. Add a live link so we can see what HTML is rendered. Check your theme operators, as some seem incorrect: `{block:odd}`. – mikedidthis Apr 15 '14 at 19:49
  • I can already see your problem. Your main containers are going to be created for EVERY post because the ODD and EVEN blocks post for EVERY odd post and EVERY even post. You're going to have to find another way to do this. – Ally Apr 16 '14 at 13:46

1 Answers1

4

Working Example

HTML

<div id="content">

  {block:Posts}

    {block:Photo}
      <div class="wrapper-{block:Odd}top{/block:Odd}{block:Even}bot{/block:Even}">
        <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
      </div>
    {/block:Photo}

  {/block:Posts}

</div>

CSS

#content {
  background-color:#fff;
  width: 1000px;
}
.wrapper-top {
  position: absolute;
  width: 250px;
  height: 420px;
  display: inline-block;
  background-color:blue;
  -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.wrapper-bot {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 420px;
  top: 210px;
  left: 125px;
  background-color:red;
  -webkit-clip-path: polygon(50% 100%, 100% 50%, 50% 0, 0 50%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#content img {
  height: 420px;
  width: 250px;
}

Here is a JSFiddle to demonstrate.

Now, all that said, you're going to run into trouble if a photo doesn't have a HighRes URL and you'll have to figure out how to deal with non-photo posts.

Ally
  • 1,922
  • 1
  • 13
  • 21
  • Great reply. Thanks! It help a lot! I succeded making 7 different custom posts, like: {post1}{/post1}. But now i can use your code, much better and more clean! The posts are only for photosets so in that case there's no problem. :) – gn66 May 05 '14 at 22:45
  • Now i'm stucked in another problem, I have a seccion for #work, and when I use NextPage button it creates in tumblr a new page, so i have my index page: indexpage.tumblr.com#work, and when i click on the next button it goes to indexpage.tumblr.com/page/2. But I want to create an Horizonta Sliding Effect every time i click on NextPage, doing so, i cannot have Page/2, page/2... I haven't quite figure it out what i gonna do, perhaps you could help me. I thought maybe i could load {NextPage}#work into the "#content" div i have in the main page, i could create an jquery effect but thats not working – gn66 May 05 '14 at 22:45
  • @gn66 You'll want to use an auto pager script and have it add more posts as you scroll or as you click "add more". The script you use for the paging depends on which you want to do. I can explain this in detail if you'll start another StackExchange question on the topic. – Ally May 07 '14 at 01:02
  • Ok, thanks again for the help Ally, I created another StackExchange question: http://stackoverflow.com/questions/23722958/how-can-i-load-the-content-of-tumblr-nextpage-on-indexpage – gn66 May 18 '14 at 14:24