[Plugin] Un plugin pour des boutons et zones de texte à copier ?

LolYangccoolLolYangccool Member
avril 2014 modifié dans Plugins
Bonjour,
Comment va la communauté ce matin ? :)

Je cherche un moyen (le top serait un plugin pour faire ça) qui me permettrait de créer des boutons en flat design qu'on pourrait personnaliser facilement.
Je cherche aussi une solution qui me permettrait des créer une zone de texte qu'on pourrait copier en cliquant dessus afin de facilité la chose aux visiteurs au maximum. :)

Pour vous illustrer, je vous invite à aller sur cette page, vous y verrais un code promo, j'aimerai qu'à la place des deux lignes horizontale au dessus et en dessous, il y ait un rectangle autour avec un petit logo qui signalerait que c'est une zone à copier.
En gros, quelques chose comme ici :
Zone%20de%20texte%20a%CC%80%20copier.png

Et quand on passe la souris au dessus :
Zone%20de%20texte%20a%CC%80%20copier%20souris%20au%20dessus.png

Je sais que certains thèmes ont des boutons et offrent la possibilité d'onglets et d'accordéons sur le site.
J'en déduit donc que c'est faisable, mais j'espère que ce n'est pas un trop gros travail.

Merci beaucoup à vous. :)

Réponses

  • bazooka07bazooka07 PluXml Lead Developer, Moderator
    Inutile d'utiliser un plugin pour cela.
    Cela se règle dans la feuille de style avec nettoyage du code :

    <p id="promo">Big promo</p>

    #id { margin: 0.5em 5%; border: 3px black solid; border-radius: 10px; font-weight: bold;}
    #id:hover {border-color: red;}

    perso, j'aurais plus changer la couleur de fond pour que cela soit plus flashy.

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • LolYangccoolLolYangccool Member
    avril 2014 modifié
    Bonjour,
    Merci pour ta réponse rapide.

    Si je souhaite effectivement mettre un fond d'une autre couleur c'est la propriété background ?
    Et pour les boutons ?

    J'essaye ça tout de suite. ;)

    Edit : Est-il possible de me donner le CSS directement utilisable ?
    Si je nettoie le code ça sera moins clair pour faire les modifications dedans après, non ?
  • danielsandanielsan Member
    et pourquoi pas chercher à copier directement dans le presse papier lorsqu'on click dessus ..?
  • LolYangccoolLolYangccool Member
    avril 2014 modifié
    Bonjour danielsan :),
    danielsan a écrit:
    et pourquoi pas chercher à copier directement dans le presse papier lorsqu'on click dessus ..?
    Oui, c'est justement ce que je cherche à faire, mais je cherche déjà à le mettre en place.

    Quelle est la syntaxe pour le CSS que je puisse utiliser sans devoir le nettoyer ?
  • danielsandanielsan Member
    remplace 
    [== HTML ==]
<hr />
<p style="text-align: center;">
	<span style="font-size:16px;"><strong>SROOM3G</strong></span></p>
<hr />

    simplement par : 
    [== HTML ==]
<div class="codePromo">SROOM3G</div>

    et le CSS : 
    [== CSS ==]
div.codePromo{
padding:16px 0;
font-size: 2em;
border-top: 1px solid;
border-bottom: 1px solid;
etc ...
}
  • LolYangccoolLolYangccool Member
    Merci danielsan, j'ai réussis à faire ceci mais il me manque le redimenssionnement en fonction de la taille du texte (avec 3 pixel de marge entre la bordure et le texte) et la mise en rouge de la bordure au passage de la souris.
    bonPlan.png

    Le top serait aussi d'intégrer une petite image à côté indiquant qu'il faut copier le texte :
    Ciseaux.png

    Merci. :)
  • bazooka07bazooka07 PluXml Lead Developer, Moderator 
    [== HTML ==]
<div id="codePromo">
  <p>
      <img src="copy-icon.png" width="15" height="15" alt="icon" /><span>THE_CODE</span>
   </p><p>
      Nous avons une super promo rien que pour vous
   </p>
</div>

    Le nombre de caractères de the_code ne doit pas varier beaucoup. Autant fixer la largeur du cartouche.
    l'espace entre bordure et texte correspond à l'attribut padding !
    dans style.css : 
    [== CSS ==]
#codePromo {margin: 0.5em 5%; border: 3px black solid; border-radius: 10px; font-weight: bold;}
#codePromo:hover {border-color: red;}
#codePromo p {font-size: 9pt; text-align: justify;} /* plus petite police par defaut */
#codePromo p:first-child {width: 150px; margin: 5px auto; padding: 3px 0; font-size: 16pt;} /* regler width selon besoin */
#codePromo p:first-child span {padding: 0 3px;} /* pour espacer img et the_code */

    Accès à mon dépôt de plugins et thèmes
    installe PluXml plus vite que ton ombre avec kzInstall2

  • LolYangccoolLolYangccool Member
    Bon, j'y arrive vraiment pas...
    Je crois que je vais laisser tomber.

    Sinon, avec champArt, dont je n'ai pas encore compris comment ça fonctionnait, il n'y a pas moyen de le faire ?

    Merci. :)
  • danielsandanielsan Member
    avril 2014 modifié 
    [== HTML ==]
<b class="codePromo">SROOM3G</b>
    avec le style 
    [== CSS ==]
b.codePromo{
display:block;
padding:0.2em 2em 0.2em 1em;
margin: 1em auto;
width:8em;
text-align:center;
font-size: 2em;
font-weight: bold;
text-transform:uppercase;
border: 0.1em dashed;
background:url('copy.png') center right no-repeat;
}

b.codePromo:hover{
color:red
etc ...
}

    les tailles en em sont associées à la taille de la police.
    Tu change font-size : 5em et tout se modifie pour être proportionnel ... ;)
    Règle la marge interne (padding) de droite en fonction de la taille de ton image


    edit : j'ai remplacé div par b, qui est nettement plus élégant ...
  • LolYangccoolLolYangccool Member
    Cool ! Ca fonctionne !
    Code%20promo%20noir.png Code%20promo%20rouge.png

    Je vais être pénible, mais comment on fait pour que le cartouche s'agrandisse en fonction de la taille du texte à l'intérieur ?
    Parce que là, si je mets un code promo plus long :
    Code%20promo%20long.png

    Merci ! :)
  • danielsandanielsan Member
    avril 2014 modifié
    cool ! quelle solution as-tu utilisé ?

    pour largeur, c'est width qui change ...

    note: j'ai fait une modif' sur la solution ci-dessus.
  • LolYangccoolLolYangccool Member
    Dois-je mettre auto à width ? Si je fais ça ça ne fonctionne plus...
    Le cartouche s'agrandit à la largeur complète.
  • danielsandanielsan Member
    width = largeur en anglais.
    quand un élément est un block, par défaut (auto) il prend toute la largeur qui lui ait possible d'avoir.
    suffit donc de lui indiquer quelle largeur tu veux lui donner, en px / % / em
  • LolYangccoolLolYangccool Member
    Ok, mais j'aimerai que la taille soit dynamique. :)
    C'est possible ?

    Merci beaucoup ! :)
  • danielsandanielsan Member
    avril 2014 modifié
    comme ça alors ? http://jsfiddle.net/t6kt8/2/
  • LolYangccoolLolYangccool Member
    Une chose à dire : Ni-kel !

    Merci !

    Me reste à trouver pour les boutons. ;)
  • danielsandanielsan Member
    béh de rien.
    tu veux des boutons pourquoi ? pour faire le "copier" ?
  • LolYangccoolLolYangccool Member
    Non, un simple bouton contenant un lien. :)
  • danielsandanielsan Member
    avril 2014 modifié
    ça c'est juste du style alors.

    au choix, parmi tant d'autres :D
    http://www.cssbuttongenerator.com/
    http://www.bestcssbuttongenerator.com/
    http://css3buttongenerator.com/
    http://css3button.net/
Connectez-vous ou Inscrivez-vous pour répondre.