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位于我们的拥有之前按钮，这样我们就可以利用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按钮放在我们的 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按钮来注册像！

这样的用户

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

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

当用户注册时：

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

我希望有所帮助！如果你遇到困难，我就离开了标记here。

Answer 2

这是目前最好的解决方案，归功于@ mikedidthis的帖子！

将“赞”按钮放在父级div，li或其他内容中，并将其命名为.like。在按钮上方放置Tumblr使用的SVG作为心脏图标：

<li class="like">
    <svg width="14" height="14" viewBox="0 0 19 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
        <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path>
    </svg>
    {LikeButton size="14"}
</li>

将<svg width="..." height="..."...和{LikeButton size="..."}更改为您想要的尺寸。

现在只需使用一堆简单的CSS

.like { /* Make a parent element */
     position: relative;
}
.like svg path { /* Select your color of choice */
     fill: #563d7c; 
}
.like .like_button { /* Position like button above your custom one */
     position: absolute;
     top: 0;
     opacity: 0;
 }
 .like .like_button.liked { /* Keep the functionality active */
     opacity: 1;
 }

虽然在这里，如何为reblog按钮做同样的事情 - 因为它没有在iFrame中调用，事情会更简单一些。将其放在父div，li或其他内容中，并将其称为.reblog

<li class="reblog">
    {ReblogButton size="14"}
</li>

和CSS

.reblog svg path { /* Select your color of choice */
    fill: #563d7c;
}

最初发布了here。

Answer 3

我做了简单的颜色选择，如reblog按钮

exmpl：http://dennsokagisanat.tumblr.com/

http://reduxsarmadeneme.tumblr.com/

<强> 1。在此代码上添加元标记：

<!-- Like ve Reblog Buton Color -->

<meta name="color:ReblogButon" content="#0dd5f0"/>
<meta name="color:LikeButon" content="#0dd5f0"/>

<!-- Like ve Reblog Buton Color -->

<强> 2。并添加HTML代码：

<li class="like">
    <svg style="width:21px; height:21px; viewBox=0 0 19 16; " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
        <path d="M14.0425097,0.000920262799 C16.1435097,-0.0400797372 18.8835097,1.28192026 18.9635097,5.36992026 C19.0525097,9.95492026 15.1985097,13.3079203 9.48350967,16.2089203 C3.76650967,13.3079203 -0.0874903349,9.95492026 0.00150966509,5.36992026 C0.0815096651,1.28192026 2.82150967,-0.0400797372 4.92250967,0.000920262799 C7.02450967,0.0419202628 8.87050967,2.26592026 9.46950967,2.92792026 C10.0945097,2.26592026 11.9405097,0.0419202628 14.0425097,0.000920262799 Z"></path>
    </svg>
    {LikeButton size="20"}
</li>

和 第3。添加CSS样式代码

.like { /* Ana element */
    position: relative;
    top:0px;
}
.like svg path { /* Hangi renk istiyorsanyz o kodu buraya yapy?tyryn */
    fill: {color:LikeButon}; 
}
.like .like_button { /* Pozisyonu ayarladym ama bozulma olursa burayla oynayyn */
    position: absolute;
    top: 0;
    opacity: 0;
}
.like .like_button.liked { /* Bozulma olursa pozisyonda burayla oyna */
    opacity: 1;
    top:3.3px;




}                  
   .reblog_button svg path { fill: {color:ReblogButon}; }  /* Reblog butonunun rengini ayarlamak için renk kodunu istedi?inizle de?i?tirin */
   .reblog_button{
       position:relative;
       top:1.3px;
       left:1px;
   }

就是这样:)）

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

3 个答案:

设置像按钮一样的Tumblr

理念

主题标记

呈现标记

CSS Magic