Is there any way I can manipulate the tumblr controls? They are quite ugly and gray. I want to know if there is any way to add iframe#tumblr_controls {display:none;} to my CSS and recreate all the controls with the same functionality but with a different look. Tumblr controls (iFrame)

Is there any way I can manipulate the tumblr controls? They are quite ugly and gray. I want to know if there is any way to add iframe#tumblr_controls {display:none;} to my CSS and recreate all the controls with the same functionality but with a different look. Tumblr controls (iFrame)

• javascript
• jquery
• css
• iframe
• tumblr

• 3 sorry, unable to respond asap, otherwise i would – mkoryak Commented Feb 9, 2012 at 20:40
• This isn't the answer you are going to appreciate, but its not possible to manipulate cross-domain elements via an iframe. The only way to be able to do this is using JSONP with iframes... snaggled.github./2010/04/08/… – Downpour046 Commented Feb 9, 2012 at 20:41
• @mkoryak What do you mean? :S – James Charless Dickinson Commented Feb 9, 2012 at 20:42
• @Downpour046 I know that. I want to hide the tumblr controls, and get the scripts that make the iframe function, and then create NEW elements with my own styles and apply the scripts. Basically, I just want to restyle the controls. – James Charless Dickinson Commented Feb 9, 2012 at 20:42
• The only thing you can manipulate is the iframe itself, not the contents within the iframe. What language are you using? You (may) be able to use PHP or your coding language to include the file instead of using an iframe? – Downpour046 Commented Feb 9, 2012 at 20:46

2 Answers 2

Yes, it's fairly easy to replace all the functionality. As you suggested, you can hide Tumblr's default with:

#tumblr_controls {display:none;}

On index pages, you need Dashboard, Follow, and Email. You can't determine if you need Unfollow, but always showing Follow shouldn't be too bad.

Dashboard URL:

http://www.tumblr./dashboard

Follow URL:

http://www.tumblr./follow/<blogname>

Email URL:

http://www.tumblr./send/<blogname>?redirect_to=http%3A%2F%2F<blogname>.tumblr.%2F

On permalink pages you also need Reblog and Like. These are a little more difficult but I have a sample here: http://like-button.tumblr./

Reblog uses an undocumented variable, {ReblogURL}. You simply make it the the href of a link:

<a href="{ReblogURL}">reblog</a>

To add Like functionality, you use the following URL and set it as the src attribute of an invisible <iframe>:

http://www.tumblr./<mand>/<oauthId>?id=<postId>

• <mand>: like or unlike
• <oauthId>: last eight characters of {ReblogURL}
• <postId>: {PostID}

Example:

http://www.tumblr./like/fGKvAJgQ?id=16664837215

You need to put both variables, {ReblogURL} and {PostID}, into your {block:Posts} block. Then use script to build the URL and set the src.

$( document ).on( 'click', '.like', function ( event ) {

event.preventDefault();

var mand = $( this ).hasClass( 'liked' ) ? 'unlike' : 'like',
    post = $( this ).closest( '.post' ),
    oauth = post.find( '.reblog' ).attr( 'href' ).slice( -8 ),
    id = post.attr( 'id' ),
    likeUrl = 'http://www.tumblr./' + mand + '/' + oauth + '?id=' + id;

$( '#like-it' ).attr( 'src', likeUrl );
$( this ).toggleClass( 'liked' );

} );

{block:Posts}
<article id="{PostID}">
<a href="{ReblogURL}" class="reblog">reblog</a>
<a href="#" class="like">like</a>
</article>
{/block:Posts}

<iframe id="like-it"></iframe>

#like-it {
    display: none;
}

.liked, .like:hover {
    color: red !important;
}

It's different now. Just add

#iframe_controls { display:none; }

To the CSS (inside tag of 'Edit HTML').