Changer par une image les boutons "Prévisualiser" & "envoyer"
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Changer par une image les boutons "Prévisualiser" & "envoyer"
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 : 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 !
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 : 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 !
Dernière édition par kitelnewbba le Mer 24 Avr 2013 - 19:23, édité 4 fois
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
Bonjour,
Vous pouvez rajouter dans le css, pa << affichage << couleurs << feuille de style css, ceci
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.
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.
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
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;
Ensuite pour le curseur qui change, vous devez rajouter au deux styles input.liteoption { et input.mainoption { ceci
cursor: pointer;
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
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]
Voilà mon forum concerné : www.habbstyletest.keuf.net
[Forum pour test codage et autres]
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
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.
donne moi aussi le css complet et actualise plusieurs fois ta page.
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
- 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;}
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?
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
Garde ton css complet et supprime toutes les lignes (trois au total) ___________________________
valide et actualise ctrl et F5
valide et actualise ctrl et F5
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
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 !
Résolu.
Ç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 !
Résolu.
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
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
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
D'accord, merci j'y penserais! ^^
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
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.
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.
Dernière édition par Automne le Mer 24 Avr 2013 - 10:20, édité 1 fois
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
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"
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"
Re: Changer par une image les boutons "Prévisualiser" & "envoyer"
C'est parfait merci beaucoup ! Résolu.
Sujets similaires
» Changer les boutons "prévisualiser" et "envoyer"
» Changer la couleur des boutons prévisualiser et envoyer sur Invision
» Personnalisé les boutons " Valider , Envoyer , Prévisualiser "...
» Problème avec les boutons " Prévisualiser " et " Envoyer "
» Modifier l'apparence des boutons "Envoyer", "Prévisualiser" etc.
» Changer la couleur des boutons prévisualiser et envoyer sur Invision
» Personnalisé les boutons " Valider , Envoyer , Prévisualiser "...
» Problème avec les boutons " Prévisualiser " et " Envoyer "
» Modifier l'apparence des boutons "Envoyer", "Prévisualiser" etc.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum