element on main Tumblr page ONLY - works but breaks control buttons

Question

I used a snippet of code that I found on another thread here to implement a 'custom html' feature on my theme. It's like a 'sticky post', or an additional {description} block. It functions perfectly for its own purposes, but interferes with Tumblr's control buttons.

If the user opts out of using the feature (leaves the field blank) the tumblr control buttons disappear entirely, from the front page AND individual posts. If they do use the feature, the front page will display properly (control buttons intact), but individual posts will be missing the like/reblog/etc. controls.

I tried a temporary workaround by adding {LikeButton} and (ReblogButton} to posts, but inexplicably, the like button (but not the reblog one) behaves the same way - only displaying on the front page, or not displaying at all, depending on {ifCustomHTML}.

Here is the block:

{block:IndexPage}
<div id="index"
{block:SearchPage}style="display: none;"{/block:SearchPage}
{block:TagPage}style="display: none;"{/block:TagPage}>

{block:IfCustomHTML}
<body class="page{CurrentPage}">
<div id="customhtml">
{text:Custom Html}    
</div></body>
{/block:IfCustomHTML}
</div>
{/block:IndexPage}

And here is the styling, just in case:

#customhtml {
display:none !important;
font-family: {font:Post Body} !important;
background: url('{image:Post Background}') top left fixed repeat;
color: {color:Post Body};
margin: 0 0 10px 0;
padding: 10px;
position: relative;
-moz-border-radius: {text:Corner Radius}px;
-webkit-border-radius: {text:Corner Radius}px;
border-radius: {text:Corner Radius}px;}
.page1 #customhtml{display:block}

The entire code is here: https://raw.github.com/Teratoma/reduxredux/master/ReduxRedux

An example of the problem is here: http://reduxredux.teratoma.tk (scroll down and click on the first post permalink and hey presto! The control buttons vanish.)

I admit the code is cluttered and amateurish but obviously I'm still learning, so I appreciate anyone willing to look at my ugly coding.

Kristoffer Kristoffer · Accepted Answer · 2013-05-14T20:37:24

Your HTML is invalid. You can't have more than one body element on a page, and they can't be wrapped in divs. Remove the opening and closing body elements from your CustomHTML block. It's important that the tumblr_controls iframe loads (the join / follow buttons in the top right corner), otherwise the like buttons won't work -- when your HTML is invalid the iframe might not load correctly. Fix that and all should be good.

element on main Tumblr page ONLY - works but breaks control buttons

1 Answers