css - Customise Tumblr's *new* Like Button iFrame {LikeButton}

Question

The new code from tumblr {LikeButton} comes with a very few options: color and size.

It injects an iFrame, which handles the "Like" functionality and provides SVG graphics.

However because of the iframe and cross site scripting policies, it is no longer possible to alter it with css nor to edit its contents.

How can I modify, or insert new code, to use my own Like button sprites or svgs?

Answer 1

Styling a Tumblr Like Button

Sadly, as the OP has stated the Tumblr like buttons have minimal visual options and are hard to target with CSS / javascript. So time for a new idea...

The Idea

We know two things:

Our own Like Button, should visually, be whatever we desire. Text, image, webfont, etc.

The Tumblr Like Button registers a click, and Tumblr does its magic in storing the data.

If we can visually hide the Tumblr Like Button and then place it over our own Like Button, we have a styled, working Like Button!

Theme Markup

Example of the theme markup, the key here is to have a containing element for both Like Buttons, and to make sure the Tumblr Like Button comes before our own Like Button so we can take advantage of the adjacent sibling selector in the css.

<div class="custom-like-button">
  {LikeButton}
  <span class="our_toggle">
    &hearts;
  </span>
</div>

Rendered Markup

Example of the rendered / live code. The Theme Operator {LikeButton} is now a <div> with the class .like_toggle.

<div class="custom-like-button">
  <div class="like_button">
     /* Iframe */
  </div>
  <span class="our_button">
    &hearts;
  </span>
</div>

CSS Magic

The key again is to get the Tumblr Like Button above our Own Like Button.

.custom-like-button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* class for the Tumblr Like Button iframe */
.like_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
/* Force iframe to fill button */
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
/* class for Our Like Button */
.our_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

Tada! You should now have your own Like Button that registers a users like!

You can also style it when hovered:

/* Hover State */
.like_button:hover + .our_button {
  color: red;
}

And when a user has registered a like:

/* Liked State */
.like_button.liked + .our_button {
  background: red;
  color: white;
}

I hope that helps! If you get stuck I left the markup here.