自定义Tumblr的*新的*像按钮iFrame {LikeButton} [英] Customise Tumblr's *new* Like Button iFrame {LikeButton}

问题描述

来自tumblr {LikeButton} 的新代码附带了一些选项：颜色和大小。

它注入一个iFrame，它处理Like功能并提供SVG图形。

但是，由于iframe和跨站点脚本策略，无法再使用css修改它或编辑其内容。

如何修改或插入新代码以使用我自己的Like按钮sprites或svgs？

解决方案

h2>样式Tumblr喜欢按钮

很遗憾，OP已经声明Tumblr像按钮有最小的视觉选择，很难使用CSS / javascript。所以时间一个新的想法...

The Idea

我们知道两件事：

我们自己的 Like Button，应该在视觉上，是我们所想要的。文本，图像，webfont等。

Tumblr Like Button注册一个点击，Tumblr在存储数据时有其神奇。 p>

如果我们可以隐藏 Tumblr Like Button，然后将其放在我们自己的 Like按钮上， ，工作Like Button！

主题标记

主题标记的示例，这里的关键是有一个包含Like按钮的元素，并确保 Tumblr Like Button在我们自己的 Like Button之前，因此我们可以利用css中的相邻兄弟选择器。 / p>

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

渲染标记

/活代码。主题运算符 {LikeButton} 现在是< div> ，类别为 .like_toggle 。

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

CSS Magic

以在我们的自己的 Like按钮上方获取 Tumblr Like按钮。

  .custom-like按钮{
 position：relative; 
 display：block; 
 width：40px; 
 height：40px; 
 cursor：pointer; 
} 
 
 / *类的Tumblr Like按钮iframe * / 
 .like_button {
 position：absolute; 
 top：0; 
 left：0; 
 right：0; 
 bottom：0; 
 width：100％; 
 height：100％; 
 opacity：0; 
 z-index：10; 
} 
 / *强制iframe填充按钮* / 
 .like_button iframe {
 width：100％！important; 
 height：100％！important; 
} 
 / *我们的Like按钮* / 
 .our_button {
 position：absolute; 
 top：0; 
 left：0; 
 right：0; 
 bottom：0; 
 width：100％; 
 height：100％; 
 z-index：1; 
} 
  

Tada！

您还可以在悬停时对其进行样式设置：

  / *悬停状态* / 
 .like_button：hover + .our_button {
 color：red; 
} 
  

当用户注册了一个：

  / *喜欢的状态* / 
 .like_button.liked + .our_button {
 background：red; 
 color：white; 
} 
  

我希望有所帮助！如果您遇到问题，请在此处留下标记。

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?

解决方案

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.

这篇关于自定义Tumblr的*新的*像按钮iFrame {LikeButton}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！