自定义Tumblr的*new*Like Button iFrame {LikeButton}

Question

来自tumblr的新代码{LikeButton}提供了很少的选项:颜色和大小.

它注入一个iFrame,它处理"Like"功能并提供SVG图形.

但是,由于iframe和跨站点脚本策略,不再可以使用css更改它,也不再编辑其内容.

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

Answer 1

造型Tumblr喜欢按钮

可悲的是,正如OP所说,Tumblr之类的按钮具有最少的视觉选项,很难用CSS/javascript来定位.所以是时候换个新主意......

想法

我们知道两件事:

我们自己的 Like Button,在视觉上,应该是我们想要的.文字,图片,网页等

的的tumblr Like按钮注册了一个点击,和Tumblr做它的魔力中存储的数据.

如果我们可以在视觉上隐藏Tumblr Like按钮,然后将它放在我们自己的 Like按钮上,我们就有了一个样式,像按钮一样!

主题标记

主题标记的示例,这里的关键是为两个Like Buttons都有一个包含元素,并确保Tumblr Like Button 位于我们自己的 Like Button 之前,这样我们就可以利用css中相邻的兄弟选择器.

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

呈现标记

渲染/实时代码的示例.主题操作员{LikeButton}现在是<div>班级的一员.like_toggle.

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

CSS Magic

关键是将Tumblr Like按钮放在我们自己的按钮上方.

.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;
}

田田!您现在应该拥有自己的 Like按钮来注册用户!

您还可以在悬停时设置样式:

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

当用户注册时:

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

我希望有所帮助!如果你遇到困难我在这里留下了标记.