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

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

L'image pour le bouton prévisualiser : http://img15.hostingpics.net/pics/485521Prvisualisation.png

L'image pour le bouton envoyer : http://img15.hostingpics.net/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
****

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
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 le Mer 24 Avr 2013 - 9:11

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



-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 .
Si la redirection de *envoyer* fonctionne bien ^^

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
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 le 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
****

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
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 le 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
****

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
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 le 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
****

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
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 le Mer 24 Avr 2013 - 10:03

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

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 le Mer 24 Avr 2013 - 10:11

petite dernière info :

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

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
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 le 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 :

Pourquoi y a t-il aussi un bouton *Envoyer* à la place de *Connexion* à ces lieux [image ci-dessus]

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 le 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
+ Hyperactif +

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

http://gilles570.forumactif.info/
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 le Mer 24 Avr 2013 - 19:23

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

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


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