For few weeks I've been trying to repair unclickable tumblr buttons (for example like, reblog, edit theme), but I can't. When I changed theme, everything worked perfectly. Thing is, I don't want to change theme, I want to know where the problem is.
I tried to hid my buttons with body > iframe:first-child { display: none !important; }
And it did disappear. Then I deleted this code and it showed me buttons, but I still couldn't click at any of them. Then I tried
.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {
z-index:999999999 !important;
}
iframeiframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop {
-webkit-filter:invert(100%);
-moz-filter:invert(100%);
-filter:invert(100%);
right:3px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
z-index:999999;
}
But still, nothing changed. I also tried to clear my browser's cache and cookies. Still the same.
I don't know what to do anymore.
Edit. While trying to solve the problem by going into my page's html I found this after < / html >, in red
iframe scrolling="no" width="1"
height="1" frameborder="0" style="background-color:transparent;
overflow:hidden;
position:absolute; top:0; left:0; z-index:9999;" id="ga_target">
</iframe><script type="text/javascript">
And when I put this under < body >, buttons work, but my page disappears completly.
I checked if this code is on my main blog. It is, my not in red and before < / html >
Blog: smartchesters.tumblr.com
It is a little bit confusing what you are asking. Do you want to show the tumblr control buttons and have them clickable, or do you want to hide them entirely?
The reason you cannot click on the tumblr control buttons at the top right hand side is because of the properties of this element:
#bord {
position: fixed;
opacity: 1;
z-index: 9999999999;
width: 100%;
top: 0px;
height: 80px;
margin-left: -5px;
background-image: url("");
background-repeat: repeat;
}
If you toggle position:fixed on this element in the browser you will see that the tumblr control buttons become clickable. Or you can toggle the z-index attribute. Z-indexes in my opinion cause issues, there should be a way to lay out the document without needing to resort to z-indexes, except in an emergency.
I recently had one blog where I wanted to completely hide the tumblr controls (I was under the impression they were being added via javascript) however it seems that a pure css solution works:
iframe[class*="control"] {
display:none!important;
}
This looks for any iframe element whose class name contains "control"
Also the first part of this selctor looks off to me, is it definitely correct:
iframeiframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop
Also, if you have code after your closing </html> you definitely need to fix or remove that. It looks like the google analytics code.
UPDATE
You have no closing </body> tag in your document. As well as the code falling outside the closing </html> tag. I would definitely run your html through a validator. It won't recognise the tumblr expressions like {PermalinkPage}
etc but it should help you pinpoint the tags that need closing properly.