Personnaliser sur Tumblr *nouveau* Comme le Bouton iFrame {LikeButton}

Le nouveau code de tumblr {LikeButton} est livré avec un très peu d'options: la couleur et la taille.

Il injecte un iFrame, qui gère le "Comme" de la fonctionnalité et fournit un graphique SVG.

Toutefois, en raison de l'iframe et cross site scripting politiques, il n'est plus possible de le modifier avec les css, ni à modifier son contenu.

Comment puis-je modifier ou insérer le nouveau code, à utiliser mon propre bouton Like de sprites ou svgs?

Juste hôte de l'iframe sur votre propre serveur!
Je ne pense pas que tumblr iframes croix domaines. J'ai été en mesure de manipuler le contenu de l'iframe à l'aide de jquery. Si vous êtes heureux de faire ce que je peux essayer de proposer une solution, mais j'aurais besoin de voir un peu de code, ou de savoir ce que vous voulez faire.
malheureusement, l'Iframe est généré lorsque le thème est analysé et ils sont hébergés sur le Tumblr des serveurs.
comme l'OP a déclaré, ce ne peut pas être fixé avec javascript en raison de la mise en œuvre et les limitations.
Proxy?

OriginalL'auteur Graham P Heath | 2014-02-11

  1. 18

    Style un Tumblr Comme le Bouton

    Malheureusement, comme l'OP a déclaré le Tumblr comme des boutons ont peu d'options visuelles et sont difficiles à cibler en CSS /javascript. Donc, le temps pour une nouvelle idée...

    L'Idée

    Nous savons deux choses:

    Notre propre Comme le Bouton, devrait visuellement, ce que nous désirons. Texte, image, webfont, etc.

    La Tumblr Comme le Bouton enregistre un clic, et Tumblr ne sa magie dans le stockage de données.

    Si l'on peut visuellement cacher la Tumblr Comme le Bouton, puis placez-le sur notre propre Comme le Bouton, nous avons un style, le travail Comme un Bouton!

    Thème De Balisage

    Exemple du thème de balisage, la clé ici est d'avoir un élément de conteneur pour les deux Comme des Boutons, et assurez-vous que le Tumblr Comme Bouton de vient avant notre propre Bouton Like de sorte que nous pouvons tirer avantage de la proximité du sélecteur de frères dans le css.

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

    Rendu De Balisage

    Exemple du rendu /code en direct. Le Thème de l'Opérateur {LikeButton} est maintenant un <div> avec la classe .like_toggle.

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

    CSS Magie

    La clé est à nouveau pour obtenir la Tumblr Comme le Bouton au-dessus de nos Propre Comme le Bouton. 

    .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! Vous devriez maintenant avoir votre propre Comme le Bouton qui enregistre un des utilisateurs comme!

    Vous pouvez également le style lors de son survol:

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

    Et quand un utilisateur s'est enregistré comme:

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

    J'espère que ça aide! Si vous êtes coincé, j'ai quitté le balisage ici.

    Je viens d'essayer et cela a très bien fonctionné! Merci!!!!

    OriginalL'auteur mikedidthis

  2. 4

    Voici la meilleure solution possible à partir de maintenant, avec le crédit @mikedidthis!

    Mettre le bouton comme un parent, div, li ou quoi que ce soit et appeler quelque chose comme .like. Au-dessus du bouton mettre le SVG utilisé par Tumblr pour l'icône en forme de cœur:

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

    Changement <svg width="..." height="..."... et {LikeButton size="..."} à la taille désirée.

    Maintenant, il suffit d'utiliser un tas de CSS simple

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

    Bien sur elle voici comment faire la même chose pour le bouton reblog - puisqu'il n'est pas appelé dans un iFrame, les choses sont un peu plus simple. Mettre dans un parent div, li ou quoi que ce soit et appeler quelque chose comme .reblog

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

    Et le CSS

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

    Posté ici.

    Merci pour cette alternative. La partie <svg width="14" height="14" (...), il serait probablement préférable de mettre width="100%" height="100%" de sorte que vous pouvez définir une taille fixe à l'extérieur de l'élément SVG, dans le .comme le CSS (c'est ce Tumblr est en train de faire, maintenant).

    OriginalL'auteur Georgi Demirev

  3. 1

    je n'couleur facile de choisir comme reblog bouton

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

    http://reduxsarmadeneme.tumblr.com/

    1. ajouter des balises meta sur ce code:

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

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

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

    2. et d'ajouter du code 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>

    et
    3. ajouter des styles css 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;
   }

    c'est tout 🙂

    OriginalL'auteur dennsokagi.tumblr.com