Geek Answers Handbook

Customize Tumblr * new * Like Button iFrame {LikeButton}

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

He introduces an iFrame that handles the "Like" functionality and provides SVG graphics.

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

How can I change or paste new code to use my own Like or svgs help buttons?

+6
source share
3 answers

Tumblr type button ordering

Unfortunately, since the OP stated that the Tumblr buttons, like the buttons, have minimal visual parameters and are difficult to customize with CSS / javascript. So, time for a new idea ...

Idea

We know two things:

Our own Like button should visually be what we want. Text, image, webfont, etc.

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

If we can visually hide the Tumblr Like Button and then put it on top of our own Like button, we have a styled, working Like Button!

Topic markup

An example of marking up a topic, the key here is to have an element for both Like buttons and for the Like Tumblr button to appear before our own Like button, so that we can use the neighboring sibling selector in css.

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

Drawn markup

Example of displayed / live code. The {LikeButton} theme operator is now a <div> with the .like_toggle class.

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

CSS magic

The key is again to get the Tumblr Like Button over 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; }

TA-dah! Now you should have your own Like button, which registers such users!

You can also style it when it hangs:

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

And when the user registered like this:

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

I hope this helps! If you are stuck, I left the markup here .

+18
source

Here's the best possible solution, right now, thanks for posting @mikedidthis!

Put a similar button in the parent, div , li or something else, and call it something like .like . Above the button, set the SVG used by Tumblr for the heart icon:

 <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> -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 <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>

Change <svg width="..." height="..."... and {LikeButton size="..."} to the desired size.

Now just use a bunch of simple 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; }

So far, here's how to do the same for the reblog button - since it is not called in the iFrame, things are a bit simpler. Put it in the parent div , li or whatever and name it something like .reblog

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

And CSS

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

Originally posted here .

+4
source

I made an easy color choice, for example, the reblog button

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

http://reduxsarmadeneme.tumblr.com/

1. add meta tags for this code:

 <!-- Like ve Reblog Buton Color --> <meta name="color:ReblogButon" content="#0dd5f0"/> <meta name="color:LikeButon" content="#0dd5f0"/> <!-- Like ve Reblog Buton Color -->

2. and add the html code:

 <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> -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 <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>

and 3. add CSS style codes

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

thats it :)

+1
source

More articles:


All Articles