18041 sujets

Questions générales et questions de débutants

Intégration de bouton dans le menu du site

Bonjour à toute la communauté,

Un ami m'a parlé de alsacreation suite au problème que je rencontre.

Je n'y comprend rien en css mon domaine c'est plus le design donc je suis plus porté photoshop que dreamweaver :$

Mon problème va peut être vous faire sourire car je pense que c'est quelque chose de banal mais pour moi c'est une montagne lil. J'ai utilisé la fonction recherche mais je n'ai pas trouver réponse à mon problème sur le forum Smiley decu

Donc en fait je souhaiterais intégrer des boutons dans le menu du site www.studiotropical.fr fait avec wordpress.

J'ai générer le code css avec http://www.cssbuttongenerator.com/homepage.php et j'obtiens le code suivant : https://www.dropbox.com/s/w1x8vgdivonu91e/Codes%20Menus%20Principaux.docx pour le menu principal 

<style type="text/css">
.classname {
	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #010b1a) );
	background:-moz-linear-gradient( center top, #3d94f6 5%, #010b1a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#010b1a');
	background-color:#3d94f6;
	-webkit-border-top-left-radius:5px;
	-moz-border-radius-topleft:5px;
	border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	border-top-right-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	border-bottom-left-radius:5px;
	text-indent:0px;
	border:1px solid #337fed;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:40px;
	line-height:40px;
	width:130px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #1570cd;
}
.classname:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #010b1a), color-stop(1, #3d94f6) );
	background:-moz-linear-gradient( center top, #010b1a 5%, #3d94f6 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#010b1a', endColorstr='#3d94f6');
	background-color:#010b1a;
}.classname:active {
	position:relative;
	top:1px;
}</style>



et le code pour le menu déroulant :

<style type="text/css">
.classname {
	-moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	-webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
	box-shadow:inset 0px 1px 0px 0px #97c4fe;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #010b1a) );
	background:-moz-linear-gradient( center top, #3d94f6 5%, #010b1a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#010b1a');
	background-color:#3d94f6;
	-webkit-border-top-left-radius:5px;
	-moz-border-radius-topleft:5px;
	border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-border-radius-topright:5px;
	border-top-right-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	border-bottom-right-radius:5px;
	-webkit-border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	border-bottom-left-radius:5px;
	text-indent:0;
	border:1px solid #337fed;
	display:inline-block;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	font-style:normal;
	height:30px;
	line-height:30px;
	width:200px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #1570cd;
}
.classname:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #010b1a), color-stop(1, #3d94f6) );
	background:-moz-linear-gradient( center top, #010b1a 5%, #3d94f6 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#010b1a', endColorstr='#3d94f6');
	background-color:#010b1a;
}.classname:active {
	position:relative;
	top:1px;
}</style>





J'ai essayer de chercher avec l'inspecteur du navigateur quel fichier modifier et quel serais la ligne ou il faut que j'intègre le code si je me trompe pas j'ai trouver qu'il fallait modifier le fichier custom_style.css et modifier la ligne 70. Fichier à modifier : https://www.dropbox.com/s/2x76vp0xsgc8bkw/custom_style.css

#navigation-menu ul.sf-menu > li > a > span { color:#000000; }
#navigation-menu ul.sf-menu > li.current-menu-item > a > span, #navigation-menu ul.sf-menu > li.current_page_item > a > span { color:#000000; }
#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover, #navigation-menu ul.sf-menu > li.current_page_item > a > span:hover { color:#EBA223; }
#navigation-menu ul.sf-menu > li > a:hover span { color:#EBA223; }


Sauf que quand je met le code et que je renvoi le fichier sur le serveur et bien ca me modifie la couleur du texte du menu mais aucun bouton n'apparait Smiley decu

Donc si quelqu'un aurait une idée pour intégrer le bouton du menu et du menu déroulant cela m'enlèverait une grosse épine du pied Smiley smile

Merci d'avance
Thomas
Modifié par thomas31400 (25 Jul 2014 - 15:36)
Salut,

Envoie plutôt le code où tu as remplacé .classname par ton selecteur. Et si tu ne l'as pas fait le problème vient de là ^^.
en fait le code que j'ai copier dessous j'ai juste fait des tests en le collant dans le fichier custom_style.css dans différentes parties exemple :

#navigation-menu ul.sf-menu > li > a > span { ICI }

#navigation-menu ul.sf-menu > li.current-menu-item > a > span, #navigation-menu ul.sf-menu > li.current_page_item > a > span { OU ICI }

#navigation-menu ul.sf-menu > li.current-menu-item > a > span:hover, #navigation-menu ul.sf-menu > li.current_page_item > a > span:hover { OU ICI }

mais rien ne fonctionne Smiley ohwell j'y comprend rien en codage lol
Es-tu sûr d'avoir uploader ton fichier au bon endroit ? (http://studiotropical.fr/wp-content/themes/u-design/styles/custom/custom_style.css) car il n'y a pas ton nouveau CSS.
Oui je l'avais réuploader au bon endroit mais j'ai remis le fichier source quand j'ai vu que ca fonctionner pas et que ca me changer juste la couleur du texte du menu sans m'implanter le bouton.

Je pense que je dois pas coller le code au bon endroit surtout donc c'est pour ca que je voulais une explication avant de remettre le fichier Smiley smile
Ce que tu peux éventuellement faire pour tester tes modifications tranquillement c'est de faire clique droit sur la page d'afficher le code source et de l'enregistrer dans un fichier local au format HTML.

Ensuite tu repères la fin de ta balise head et tu insères ton CSS dans une balise 
<style></style>


Ainsi tu pourras tester en local sans impacter ton site en production et faire les ajustements nécessaires. Par la suite, tu pourras placer ton CSS à la place de l'ancien. Ou alors plus simplement (et plus salement) mettre dans ton head directement ton CSS en prod. Ainsi tu écrases tes styles précédent et tu ne t'occupes pas de remplacer les sélecteurs. C'est clair de ton côté ? ^^
Sujet clos
Aller à