Changer par une image les boutons "Prévisualiser" & "envoyer"

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par kitelnewbba Lun 22 Avr 2013 - 9:23

Voilà bonjour à vous! J'expose aujourd'hui une nouvelle demande.
Si il est possible de changer ces boutons [image ci-dessous] par nos boutons crées.
Voici l'image : Changer par une image les boutons "Prévisualiser" & "envoyer" Look_b10

L'image pour le bouton prévisualiser : https://2img.net/r/hpimg15/pics/485521Prvisualisation.png

L'image pour le bouton envoyer : https://2img.net/r/hpimg15/pics/458682Envoyer.png

Voilà, je vous remercie d'avance et j'espère avoir une réponse au plus ! Very Happy


Dernière édition par kitelnewbba le Mer 24 Avr 2013 - 19:23, édité 4 fois
kitelnewbba

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par Automne Mer 24 Avr 2013 - 8:58

Bonjour,

Vous pouvez rajouter dans le css, pa << affichage << couleurs << feuille de style css, ceci

Code:
input.liteoption {
background-image: url('http://img15.hostingpics.net/pics/485521Prvisualisation.png');
border:transparent;
color: transparent;
width:92px;
height:22px;
}
input.mainoption {
border:transparent;
color: transparent;
background-image: url('http://img15.hostingpics.net/pics/458682Envoyer.png');
background-position: top;
width:60px;height:22px;
}

Si vous remarquez que les boutons "aller" qui se trouvent dans le sujet après la barre "sauter vers" et "outils de modérations", il faudra modifier les class css dans le template viewtopic_body

Rechercher en bas ligne 208 environ
<!-- BEGIN viewtopic_bottom -->
<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>
<!-- END viewtopic_bottom -->

Rechercher un peu plus loin ligne 433

<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
</form>

Vous remarquez deux fois class="liteoption" dans les écritures de code, il vous faut les modifier par class="option" et publier le template.

Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par kitelnewbba Mer 24 Avr 2013 - 9:11

Merci de m'avoir aidé!
Voilà ce que cela donne :

Changer par une image les boutons "Prévisualiser" & "envoyer" Test_c10

-Aucun effet sur le bouton *Prévisualiser*
-Le curseur de *envoyer* quand on clique dessus normalement l'aspect du curseur devrait changer mais là, non, il reste avec ce curseur Changer par une image les boutons "Prévisualiser" & "envoyer" NodeKiller_Tutorial_LaFleche_01_000.
Si la redirection de *envoyer* fonctionne bien ^^
kitelnewbba

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par Automne Mer 24 Avr 2013 - 9:20

Quel est le lien du forum concerné? Merci

Ensuite pour le curseur qui change, vous devez rajouter au deux styles input.liteoption { et input.mainoption { ceci

cursor: pointer;
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par kitelnewbba Mer 24 Avr 2013 - 9:29

Bonjour, c'est parfait pour le bouton envoyer, mais toujours rien pour le bouton *Prévisualiser*
Voilà mon forum concerné : www.habbstyletest.keuf.net
[Forum pour test codage et autres]
kitelnewbba

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par Automne Mer 24 Avr 2013 - 9:46

Tu peux supprimer tout ton css et ne garder que celui des boutons,

donne moi aussi le css complet et actualise plusieurs fois ta page.

Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par kitelnewbba Mer 24 Avr 2013 - 9:48

Code:
        #widget-arrows {
          height: 13px;
        }
        .widget-arrow {
          height: 13px;
          width: 16px;
          border-radius: 4px;
          float: left;
          cursor: pointer;
          background: #f5ebf7 url(http://i.imgur.com/zVQMs.png) no-repeat 0 -13px;
        }
        .widget-arrow.isright {
          float: right;
        }
        .widget-arrow.isleft.isclosed, .widget-arrow.isright.isopened {
          background-position: 0 0;
        }

.profil_mess
{
  position: relative;
  z-index: 2;
  width: 210px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  background-color: #333333;
  padding: 4px;
  text-align: center;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -htm-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 2px solid #5b5b5b;
  box-shadow: 0px 0px 5px #000000;
  -moz-box-shadow: 0px 0px 5px #000000;
  -htm-box-shadow: 0px 0px 5px #000000;
  -o-box-shadow: 0px 0px 5px #000000;
  -webkit-box-shadow: 0px 0px 5px #000000;
}

.name
{
  display: block;
  text-transform: uppercase;
  margin-top: -15px;
  margin-bottom: -10px;
  font-size: 14px;
  font-family: arial black;
  text-shadow: 1px 1px 0px #000000;
  padding-bottom: 5px;
  border-bottom: 1px dashed #5b5b5b;
}

.avatar_mess
{
  display: block;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  height: 320px;
  overflow: hidden;
  border: 5px solid #0d0d0d;
  opacity: 0.7;
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  filter: alpha(opacity=70);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
.avatar_mess:hover
{
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.profil2_mess
{
  position: relative;
  z-index: 1;
  width: 180px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -202px;
  background-color: #FFFFFF;
  padding-left: 4px;
  padding-right: 4px;
  text-align: left;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -htm-border-radius: 10px;
  -o-border-radius: 10px;
  -webkit-border-radius: 10px;
  border: 2px solid #434343;
  box-shadow: 0px 0px 5px #FFFFFF;
  -moz-box-shadow: 0px 0px 5px #FFFFFF;
  -htm-box-shadow: 0px 0px 5px #FFFFFF;
  -o-box-shadow: 0px 0px 5px #FFFFFF;
  -webkit-box-shadow: 0px 0px 5px #FFFFFF;
  color: #434343 !important;
  transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -htm-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -htm-transition: 2s;
  -webkit-transition: 2s;
}
.profil2_mess:hover
{
  margin-top: -42px;
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transition: 2s;
  -moz-transition: 2s;
  -o-transition: 2s;
  -htm-transition: 2s;
  -webkit-transition: 2s;
}
.profil2_content
{
  display: block;
  width: 180px;
  height: 200px;
  max-height: 200px;
  overflow: auto;
}


_______________________________________________________________________________

/* PAGE ACCUEIL MOZAIK */

#mozaik
{
  width: 660px;
  height: 260px;
  margin: auto;
}
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 300px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: #b9b9b9;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 600px;
  background: #d6d6d6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 338px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_top:hover .mozaik_titretop
{
  background-color: #9e9e9e;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

___________________________________________________________________________

/* ONGLET DEVOILE EN CLIC */

#target_onglet, #target_onglet2
{
  position: fixed;
}
#onglet_clic
{
  position: fixed;
  z-index: 999;
  width: 342px;
  height: 0px;
  margin-left: -310px;
  margin-top: 100px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#onglet_contenu
{
  width: 290px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 190px;
  color: #1e466c;
  font-size: 11px;
}
.onglet_clic_navigation
{
  display: block;
  float: right;
  width: 40px;
  height: 120px;
  overflow: hidden;
  background: url();
  margin-top: 40px;
}
.onglet_ouvrir
{
  position: absolute;
  z-index: 3;
}
.onglet_fermer
{
  position: absolute;
  z-index: 2;
}
#onglet_clic_contenu
{
  width: 100px;
  height: 300px;
  overflow: hidden;
  background: #d1d2d4;
  border: 1px solid  #7f7f80;
}
#target_onglet:target #onglet_clic
{
  margin-left: -10px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}
#target_onglet:target .onglet_ouvrir
{
  z-index: 1;
}
#target_onglet2:target #onglet_clic
{
  margin-left: -110px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

_______________________________

        input.liteoption {
        border:transparent;
        color: transparent;
        background-image: url('http://img15.hostingpics.net/pics/485521Prvisualisation.png');
        background-position: top;
        width:92px;height:22px;
        cursor: pointer;
        }
        input.mainoption {
        border:transparent;
        color: transparent;
        background-image: url('http://img15.hostingpics.net/pics/458682Envoyer.png');
        background-position: top;
        width:60px;height:22px;
        cursor: pointer;
        }


        .w2bslikebox{background: url("http://1.bp.blogspot.com/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 999;position:fixed;right:-250px;top:20%;}
        .w2bslikebox div{border:none;position:relative;display:block;}
        .w2bslikebox span{bottom: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 999;}
        .w2bslikebox span a{color: #FF9D00;text-decoration:none;}
        .w2bslikebox span a:hover{text-decoration:underline;}
Mon CSS complet.

EDIT : En gardant seulement le code de mes boutons dans mon CSS, cela fonctionne à merveille, mais malheureusement dans le code css entier, il y avait des choses importantes pour le codage de plusieurs widgets ou autres.
Y'aurait-il une erreur dans le css dans ce cas?
kitelnewbba

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par Automne Mer 24 Avr 2013 - 9:58

Garde ton css complet et supprime toutes les lignes (trois au total) ___________________________

valide et actualise ctrl et F5
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par kitelnewbba Mer 24 Avr 2013 - 10:01

Ne suis-je pas un peu bête desfois?
Ça marche à merveille!
J'ai tendance à mettre : ________________ pour séparer les différents codes/widgets pour que je m'y retrouve.

Sinon encore, un grand merci à vous ! Very Happy

Résolu.
kitelnewbba

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par Automne Mer 24 Avr 2013 - 10:02

si tu veux mettre des séparations, il faut les encadrer comme ceci

/* ________________________________*/


Dernière édition par Automne le Jeu 25 Avr 2013 - 15:26, édité 1 fois
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par kitelnewbba Mer 24 Avr 2013 - 10:03

D'accord, merci j'y penserais! ^^
kitelnewbba

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par kitelnewbba Mer 24 Avr 2013 - 10:11

petite dernière info : Changer par une image les boutons "Prévisualiser" & "envoyer" Info_b10

Ayant mit transparence à l'image sous PNG, je me demande pourquoi les coins du bouton sont en blanc dans l'image ci-dessus [sur le bois]

cdlt
kitelnewbba

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par Automne Mer 24 Avr 2013 - 10:16

Je peux regarder ceci, mais tu devrais changer ses boutons, car il ne correspondent pas aux images premières qui sont "Aller".

Je t'avais donné plus haut le moyen de le faire, dans le template viewtopic_body. Tu préfères modifier le template pour avoir les originale a ses deux endroits là ou voir pour l'encadrer plutôt?

Edit: sinon tu rajoute un background-color:#ta couleur ou image bois. Very Happy


Dernière édition par Automne le Mer 24 Avr 2013 - 10:20, édité 1 fois
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par kitelnewbba Mer 24 Avr 2013 - 10:17

Je m'occupe alors de modifier la template, je vous en dis des nouvelles d'ici peu ^^
Ayant modifier, c'est parfait, sauf tout petit dernière chose :
Changer par une image les boutons "Prévisualiser" & "envoyer" Info_b11
Pourquoi y a t-il aussi un bouton *Envoyer* à la place de *Connexion* à ces lieux [image ci-dessus]
kitelnewbba

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par Automne Mer 24 Avr 2013 - 10:41

Parce que beaucoup de bouton ont les même identifiants.

pour le bouton connexion, tu vas dans le template index_body
dans <!-- BEGIN switch_user_login_form_header --> ligne 38 <td>{S_HIDDEN_FIELDS}<input class="mainoption" change la class par option et de meme ligne 66 <td>{S_HIDDEN_FIELDS}<input class="mainoption"
Automne

Automne
Membre actif

Messages : 8431
Inscrit(e) le : 22/03/2010

https://gilles570.motards.net/
Automne a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changer par une image les boutons "Prévisualiser" & "envoyer"

Message par kitelnewbba Mer 24 Avr 2013 - 19:23

C'est parfait merci beaucoup ! Smile Résolu.
kitelnewbba

kitelnewbba
****

Masculin
Messages : 314
Inscrit(e) le : 19/09/2012

http://www.habbstyle.com
kitelnewbba a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum