css - 自定义 Tumblr *新* 点赞按钮 iFrame {LikeButton}

Question

来自 tumblr {LikeButton} 的新代码带有很少的选项:颜色和大小。

它注入(inject)一个 iFrame，它处理“喜欢”功能并提供 SVG 图形。

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

如何修改或插入新代码，以使用我自己的“赞”按钮 sprite 或 svg？

Answer 1

为 Tumblr 点赞按钮设计样式

遗憾的是，正如 OP 所说，Tumblr 之类的按钮具有最少的视觉选项，并且很难用 CSS/javascript 定位。所以是时候提出一个新想法了......

想法

我们知道两件事:

我们自己的像按钮一样，在视觉上应该是我们想要的任何东西。文字、图片、网页字体等

Tumblr Like 按钮注册一次点击，Tumblr 在存储数据方面施展魔法。

如果我们可以在视觉上隐藏 Tumblr 点赞按钮，然后将它放在我们自己的 点赞按钮上，我们就有了一个样式化、有效的点赞按钮!

主题标记

主题标记示例，这里的关键是为两个“赞”按钮都有一个包含元素，并确保 Tumblr“赞”按钮出现在我们的自己的“赞”之前按钮，以便我们可以利用 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 魔法

关键还是要让 Tumblr Like Button 位于我们的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;
}

多田!您现在应该拥有您的自己的 Like Button，它可以注册用户喜欢!

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

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

当用户注册了一个赞:

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

希望对您有所帮助!如果你卡住了，我留下了标记 here .