Remplacer boutons par du css

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

Résolu Remplacer boutons par du css

Message par Invité le Mar 17 Juil 2012 - 19:38

Bonjour !
J'aimerais modifier les boutons Poster, Répondre, etc (y compris les petits boutons : Citer, Editer, etc) par du css (<input type="button" value="Texte" class="nom_classe">).
J'ai déjà fait mes boutons css, sauf que je ne sais pas les inclure dans mon forum.
Merci de m'aider !


Dernière édition par xRayane le Mer 18 Juil 2012 - 2:56, édité 1 fois

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par tupac le Mar 17 Juil 2012 - 21:25

Bonsoir

Pourquoi voulez-vous le faire en passant par la feuille de style alors que vous pouvez très bien le faire dans la gestion des images?

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par Invité le Mer 18 Juil 2012 - 0:05

Parce-qu'en css, le bouton changera au survol de la souris et lors du click c'est plus beau je trouve, et le texte est de meilleure qualité (notamment en taille).

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Remplacer boutons par du css

Message par tupac le Mer 18 Juil 2012 - 0:32

Je vous donne déjà les identifiants suivant, si vous en voulez d'autres dites-le moi.

Code:
/* cité */
.i_icon_quote{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

.i_icon_quote:hover{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

/* edit */
.i_icon_edit{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

.i_icon_edit:hover{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

/* multi citation */
#post_mq4_6{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

#post_mq4_6:hover{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

/* supprimer */
.i_icon_delete{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

.i_icon_delete:hover{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

/* voir adresse IP du posteur */
.i_icon_ip{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

.i_icon_ip:hover{
  background:url(" votre image ici ");
  width: XXpx;
  height: XXpx;
}

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par Invité le Mer 18 Juil 2012 - 0:38

Merci ! Par contre, où je dois les modifier ? Enfin, quelle(s) template(s) ?

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par tupac le Mer 18 Juil 2012 - 0:51

Les codes sont a placer dans votre feuille de style css comme cela Panneau d'administration => affichage => couleurs => feuille de style

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par Invité le Mer 18 Juil 2012 - 0:53

D'accord, j'ai deux questions.

1) Est-ce que je dois remplacer les images (dans la page de gestion des images) par empty.png ?

2) Le "modèle" que vous m'avez donné s'applique à des classes, et moi je veux appliquer ces classes à des <input type="button"; value="Texte" class="nom_classe">. Puisque le texte est déterminé dans value="texte" est-ce que je dois modifier autre chose pour qu'un input type button s'applique ? Merci

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par tupac le Mer 18 Juil 2012 - 1:33

Supprimer les boutons que vous souhaitez remplacer dans gestion des images.

Une fois cela fait placer les nouveaux bouton dans chaque codes css suiçvant.

Code:
/* postrer un nouveau sujet */
#i_post{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}
       
#i_post:hover{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}

 /* cité */
.i_icon_quote{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}
       
.i_icon_quote:hover{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}

/* edit */
.i_icon_edit{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}
       
.i_icon_edit:hover{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}

/* supprimer */
.i_icon_delete{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}
       
.i_icon_delete:hover{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}

/* voir adresse IP du posteur */
.i_icon_ip{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}
       
.i_icon_ip:hover{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}     

/* multi citation */
#post_mq4_8{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}
       
#post_mq4_8:hover{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}

/* voir le profil de utilisateur */
.i_icon_profile{   
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}

.i_icon_profile:hover{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}

/* envoyer un message privé */
.i_icon_pm{   
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}

.i_icon_pm:hover{
    background:url(" votre image ici ");
    width: XXpx;
    height: XXpx;
}

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par Invité le Mer 18 Juil 2012 - 1:36

Sauf que dans un input type button, il n'y a pas d'image : le texte est déterminé dans " value='texte' ", ce n'est pas une image. Je voudrais savoir si je peux mettre des <input type="button"> sur le forum (et appliquer le design dans ma classe css).

Par défaut, les boutons sur le forum sont des images, que je veux remplacer par des <input type="button"> dont le design sera fait dans ma classe css (j'utiliserais la méthode que vous venez de citer pour ça). Il faudrait que je remplace les images (boutons) par des <input type="button"> et c'est actuellement ce qui me pose problème.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par tupac le Mer 18 Juil 2012 - 2:48

J'avais bien compris mais je pense que cela ne soit pas possible, par contre je peux vous proposer autre chose.

Exemple avec EDIT :

Tout d'abord cliquer sur éditer puis prenez l'adresse de la page en haut a gauche et placez-la dans le code ci-dessous.
Code:
<a href=" URL ">éditer</a>
Une fois fait dirigez-vous dans la template viewtopic_body et remplacer la variable correspondante par le code ci-dessus, faite de même pour les autre bouton.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par Invité le Mer 18 Juil 2012 - 2:54

Si je peux le modifier en lienje pourrais peut-être le modifier en un <input type="button">, vous savez où se trouvent les codes correspondant aux boutons dans la template viewtopic_body ? Je n'arrive pas à les trouver.
Edit : Finalement je crois que je m'en sors, merci pour l'aide.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par tupac le Mer 18 Juil 2012 - 3:13

Tu peux aussi faire comme ceci.

Code:
<a href="http://www.youtube.com/?gl=FR&hl=fr" target="_blank"> <input type="button" value="You Tube"> </a>

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Remplacer boutons par du css

Message par Invité le Mer 18 Juil 2012 - 3:23

C'est exactement ce que j'ai fait.

Invité
Invité


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