[Réglé] Ajout d'un bouton

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.1

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] Ajout d'un bouton

Messagepar dje8269 » 11 Mai 2015 à 23:38

Bonsoir à tous ,

Bon voila a peu pret 3 ou 4 heures que je galere ; malgres les differents tuto trouvé par ci par la . Je n'arrive a rien .

Je voudrais mettre un bouton "nouveau message" a la place de celui qui est deja en place ; Pour essayer je voulais deja le mettre a coté .

Le but etant de mettre un bouton personnalisé !

J'ai donc creer un .css mis dans button.css pour le début .
Code: Tout sélectionner
.bouton_nouveau  .bouton_nouveau  a{
background-image: url("./images/nouveau.gif");
}


puis j'ai voulus mettre un code dans mon .hhtml juste apres le bouton noubveau deja en place
Code: Tout sélectionner
	<div >
	<a href="{U_POST_NEW_TOPIC}" class="bouton_nouveau">test</a>
	</div>


Résultat des courses, je suis pas encore pret ! lol

J'a ifais enormement de test, des ofois j'ai vu mon bouton des fois non . bref je séche !

Merci pour un petit coup de main
Modifié en dernier par dje8269 le 13 Mai 2015 à 00:23, modifié 1 fois.
Mon Forum : Fantas-Pic
Mon theme actuel : Perso tiré de prosilver
Identifiant Test : test
Mdp : azerty
:!: Allez dans la zone de test en bas du forum !
dje8269
Empereur des posts
Empereur des posts
 
Messages: 1000
Enregistré le: 23 Fév 2010 à 20:46

Re: Ajout d'un bouton

Messagepar cabot » 12 Mai 2015 à 08:01

Hello,

Le sélecteur CSS n'est pas correct. Il cible un lien descendant d'un élément ayant pour classe bouton_nouveau qui lui même aurait comme parent ou ancêtre un élément portant la classe bouton_nouveau.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26821
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Ajout d'un bouton

Messagepar dje8269 » 12 Mai 2015 à 09:07

Euh.....

Désolé j'ai pas tout compris , a part que ce n'est pas correct . :roll:
Mon Forum : Fantas-Pic
Mon theme actuel : Perso tiré de prosilver
Identifiant Test : test
Mdp : azerty
:!: Allez dans la zone de test en bas du forum !
dje8269
Empereur des posts
Empereur des posts
 
Messages: 1000
Enregistré le: 23 Fév 2010 à 20:46

Re: Ajout d'un bouton

Messagepar Mazeltof » 12 Mai 2015 à 12:03

'jour ici :wink:

tu mets deux fois le même élément : bouton_nouveau (parent/ancêtre) et bouton_nouveau (enfant/descendant)

Il va servir à quoi ce nouveau bouton ?
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3297
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Ajout d'un bouton

Messagepar dje8269 » 12 Mai 2015 à 12:13

Hello Mazeltof,

Je suis en train de péter un câble ; :evil:

Il serait a mettre en place en lieu et place du bouton qui existe déjà pour créer un nouveau topic .

Je ne comprends pas ou je le met deux fois ? . je créer ma classe qui s'appelle bouton_nouveau , et apres ndas le html je l'appelle cette class pour faire apparaitre le bouton non ?
Mon Forum : Fantas-Pic
Mon theme actuel : Perso tiré de prosilver
Identifiant Test : test
Mdp : azerty
:!: Allez dans la zone de test en bas du forum !
dje8269
Empereur des posts
Empereur des posts
 
Messages: 1000
Enregistré le: 23 Fév 2010 à 20:46

Re: Ajout d'un bouton

Messagepar Mazeltof » 12 Mai 2015 à 12:24

Ben si c'est pour le remplacer laisse celui la ^^

je ne comprends pas le but ... :roll:

dans le css tu mets :
dje8269 a écrit:
Code: Tout sélectionner
.bouton_nouveau  .bouton_nouveau  a{
background-image: url("./images/nouveau.gif");
}


tu devrais mettre par exemple :
Code: Tout sélectionner
.autre_classe  .bouton_nouveau  a{
background-image: url("./images/nouveau.gif");
}


ou :
Code: Tout sélectionner
.bouton_nouveau .autre_classe a{
background-image: url("./images/nouveau.gif");
}


ou encore :
Code: Tout sélectionner
.bouton_nouveau  a{
background-image: url("./images/nouveau.gif");
}
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3297
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Ajout d'un bouton

Messagepar cabot » 12 Mai 2015 à 12:29

Mazeltof a écrit:tu mets deux fois le même élément : bouton_nouveau (parent/ancêtre) et bouton_nouveau (enfant/descendant)

Qu'il y en ait un, deux ou plus ne change rien. ^^
La classe est créée sur le lien -a- dans le HTML, et les propriétés sont déclarées sur un lien contenu dans des éléments qui utilisent cette classe mais qui n'existent pas.


dje8269 a écrit:Il serait a mettre en place en lieu et place du bouton qui existe déjà pour créer un nouveau topic .

Pourquoi ne pas remplacer l'image tout simplement ? :o
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26821
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Ajout d'un bouton

Messagepar Mazeltof » 12 Mai 2015 à 12:38

ah ben voila ^^

suis pas bien réveillé moi ... je sors
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 3297
Enregistré le: 09 Mar 2009 à 23:02
Localisation: Arras

Re: Ajout d'un bouton

Messagepar dje8269 » 12 Mai 2015 à 13:32

Pourquoi ne pas remplacer l'image tout simplement ?


Ben si c'est pour le remplacer laisse celui la ^^



:oops: J'ai pas reussis . alors je me suis dis que j'allais en creer un , histoire d'apprendre encore un peu . Mais je pensais pas que ca allait etre aussi chaud .

Je crois effectivement que j'ai pas compris l'utilité du symbole "a" , dans une class . je fais vos modifs pour essayer et je file lire des cours sur ce fameux "a"

Merci a tous les deux
Mon Forum : Fantas-Pic
Mon theme actuel : Perso tiré de prosilver
Identifiant Test : test
Mdp : azerty
:!: Allez dans la zone de test en bas du forum !
dje8269
Empereur des posts
Empereur des posts
 
Messages: 1000
Enregistré le: 23 Fév 2010 à 20:46

Re: Ajout d'un bouton

Messagepar cabot » 12 Mai 2015 à 13:53

dje8269 a écrit:Je crois effectivement que j'ai pas compris l'utilité du symbole "a" , dans une class

Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26821
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Ajout d'un bouton

Messagepar dje8269 » 12 Mai 2015 à 14:16

Merci pour l'explication cabot, ça me fait bien avancé, même si je m'emmêle encore les pinceaux, y' a du mieux .

En fait le truc que j'essaye de faire; c'est que plutôt que d'avoir du texte dans le bouton; je voudrais que ce soit l'image le texte ? Je pense que je mis prend mal .

Je continue mes tests

EDIT:

Je sais que c'est pas du tout comme ca qu'il fallait faire, mais je suis enfin arriver a quelques choses; pas loin d'une demi journée quand même pour un simple bouton , et qui existait déjà en plus ;

Enfin bon ça fait plaisir quand même !
Mon Forum : Fantas-Pic
Mon theme actuel : Perso tiré de prosilver
Identifiant Test : test
Mdp : azerty
:!: Allez dans la zone de test en bas du forum !
dje8269
Empereur des posts
Empereur des posts
 
Messages: 1000
Enregistré le: 23 Fév 2010 à 20:46

Re: Ajout d'un bouton

Messagepar cabot » 12 Mai 2015 à 15:49

T'as bien bossé, du coup je te donne une soluce qui permet de ne pas modifier le HTML d'origine, il suffit d'ajouter ça dans le CSS :
Code: Tout sélectionner
.icon-button.post-icon {
	background: url("./images/nouveau.gif") 0 100% no-repeat;
	width: 96px;
	height: 30px;
	padding: 0;
	border: 0;
	text-indent: -50em;
}

.icon-button.post-icon:before {
	background: none;
}

.icon-button.post-icon:hover {
	background-position: 0 0;
}
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26821
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: Ajout d'un bouton

Messagepar dje8269 » 12 Mai 2015 à 16:33

Génial , c'est parfait . Bon ce n'était qu'un bouton de test ; Encore un grand merci

Par contre j'ai du modifier le hover , car avec ton code, seulement le dégradé de noir et blanc apparaissait ?

J'ai mis ca , je sait pas si c'est le plus optimisé. peut etre que ca charge deux fois l'image , plutôt que de la déplacer ?

Code: Tout sélectionner
.icon-button.post-icon {
	background: url("./images/nouveau.gif") 0 100% no-repeat;
	width: 96px;
	height: 30px;
	padding: 0;
	border: 0;
	text-indent: -50em;
}

.icon-button.post-icon:before {
	background: none;
}

.icon-button.post-icon:hover {
background: url("./images/nouveau.gif") 0 0 no-repeat;
}
Mon Forum : Fantas-Pic
Mon theme actuel : Perso tiré de prosilver
Identifiant Test : test
Mdp : azerty
:!: Allez dans la zone de test en bas du forum !
dje8269
Empereur des posts
Empereur des posts
 
Messages: 1000
Enregistré le: 23 Fév 2010 à 20:46

Re: Ajout d'un bouton

Messagepar cabot » 12 Mai 2015 à 17:01

Yep, tu charges l'image aussi sur le hover.

Sinon, tu peux déplacer les règles que je t'ai indiqué à la fin de colours.css, ça devrait passer.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26821
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque


Retourner vers [3.1.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité