Forum : Modifications ou correction de thèmes existants / Exagone. Modification dans style.css

Modéré par : Skippy bmag jpb
Index du Forum » » Modifications ou correction de thèmes existants » » Exagone. Modification dans style.css

Loudgi

Posté : 11-09-2010 20:32

Bonjour à tous !

Je veux modifier le thème Exagone.

Plus particulièrement le menu Exagonale du header.


/************************************************************************

Mise en forme du menu

*************************************************************************/



/*************** Menu exagonal***************/



/* Style Ecriture Exagonal */

#outer {width:100%;vertical-align:center;}

/* hack for IE5.5 */

* html #outer {height:350px; he\ight:330px;}

#hex {padding:0; margin:0 auto; list-style:none; width:325px;}

#hex li {displaylock; float:left; width:104px; margin-right:4px;  height:120px;}

#hex li.p1 {padding-left:54px;}

#hex li.p2 {margin-top:-26px;}

#hex li a {text-decoration: none; color: #ff0000; cursor:pointer; font:large; font-weight : bold;}

#hex li b {text-decoration: none; color: #ffffff; cursor:pointer; font:large; font-weight : bold;}



/* Couleurs Exagone extérieur*/

#hex li a b {displaylock; width:0; height:0; overflow:hidden; border-bottom:30px solid /*#984040*/ #ffffff; border-left:52px dotted transparent; border-right:52px dotted transparent;}

#hex li a span {displaylock; width:104px; height:60px; line-height:59px; text-align:center; background: #ffffff; font-size:11px; font-family: arial, veradana, sans-serif;}

#hex li a em {displaylock; width:0; height:0; overflow:hidden; border-top:30px solid #ffffff; border-left:52px dotted transparent; border-right:52px dotted transparent;}

/* hack for IE5.5 */

* html #hex li a b, * html #hex li a em {width:104px; height:30px; w\idth:0; he\ight:0;}



/* Bloc exagonal central - Accueil par def*/

#hex li a.inner b {border-bottom-color: #9f0707;}

#hex li a.inner span {background: #9f0707;}

#hex li a.inner em {border-top-color: #9f0707;}



/* Bloc exagonal exterieur - couleur survole*/

#hex li a:hover {white-space:normal; color: #626262;}

#hex li a:hover b {border-bottom-color: #b4b3b3;}

#hex li a:hover span {background: #b4b3b3;}

#hex li a:hover em {border-top-color: #b4b3b3;}



/* Bloc exagonal interieur - couleur survole*/

#hex li a.inner:hover b {border-bottom-color: #ededed;}

#hex li a.inner:hover span {background: #ededed;}

#hex li a.inner:hover em {border-top-color: #ededed;}



/* hack for IE5.5 */

* html #flower b {width:39px; height:46px; w\idth:0; he\ight:0;}

#flower a, #flower a:visited {text-decoration:none;}

#flower b.p1 {border-right:39px solid #cccccc;}

#flower b.p2 {border-left:39px solid #9e9e9e;}

#flower b.a1 {top:1px; left:9px;}

#flower b.a2 {top:1px; right:9px;}

#flower b.a3 {top:27px; left:7px;}

#flower b.a4 {top:27px; left:54px;}

#flower b.a5 {top:53px; left:9px;}

#flower b.a6 {top:53px; right:9px;}



#flower a:hover {white-space:normal; cursor:pointer;}

#flower a:hover b.p1 {border-right:39px solid #9e9e9e;}

#flower a:hover b.p2 {border-left:39px solid #cccccc;}

/*btn_LB*/



#ico_men_LB {

	position:absolute;

	vertical-align:middle;

	padding : 10px;

	margin:15px 0 0 0;

	z-index:100;

}



#ico_men_RB {

	position:absolute;

	right: 0;

	vertical-align:middle;

	padding : 10px;

	margin:15px 0 0 0;	

	z-index:100;	

}

Je cherche à inverser les exagone exemple :
Exa du mileu en rouge écriture blanche.
Exa extérieur en blanc écriture rouge.

Et quand on survole avec la souris exa extérieur prend couleur et écriture mileu, vice versa.

Comment puis-je arriver à ça ?


#hex li b {text-decoration:none; color: #ffffff; cursor:pointer; font:large; font-weight : bold;}

Voici ça c'est moi qui est ajouté pour essayer d'arriver à ce que je veux mais bon.

Message édité par : Loudgi / 13-09-2010 16:01

Profil

Skippy

398

Styles Team (TST)

Posté : 12-09-2010 18:45

Hello

Alors se que tu demande là demande beaucoup de temps à retrouver les classes, car si mes souvenirs sont bons un hexagone est constitué de 3 parties...

Mais ce que tu peux faire c'est une capture d'écran et à partir de cela retrouver le code couleur que j'ai utilisé.
Exemple l'hexa du milieu : le gris foncé correspond au code couleur -> #9e9e9e

Donc dans ton code tu remplaces tout les #9e9e9e par ta couleur.

Si tu n'y arrive pas je regarderai de plus près.

Salutations

Profil

www

Loudgi

Posté : 13-09-2010 14:10

Citation : Skippy

Hello

Alors se que tu demande là demande beaucoup de temps à retrouver les classes, car si mes souvenirs sont bons un hexagone est constitué de 3 parties...

Mais ce que tu peux faire c'est une capture d'écran et à partir de cela retrouver le code couleur que j'ai utilisé.
Exemple l'hexa du milieu : le gris foncé correspond au code couleur -> #9e9e9e

Donc dans ton code tu remplaces tout les #9e9e9e par ta couleur.

Si tu n'y arrive pas je regarderai de plus près.

Salutations

C'est exacte l'exagone est découpé en 3 partie :


/* Bloc exagonal central - Accueil par def*/

#hex li a.inner b {border-bottom-color9f0707;}

#hex li a.inner span {background9f0707;}

#hex li a.inner em {border-top-color9f0707;}

Le "b" le haut de l'exa.
le "span" le milieu.
le "em" le bas de l'exa.

on utilise la propriété "inner" pour renseigner les infos sur la couleur intérieur.

on utilise la propriété "hover" pour renseigner les infos lors du survole du pointeur de la souris.

Comme tu peux le constater, j'ai déja commencé à modifier les exagones, j'ai déja le résultat attendu.
En faite, je souhaite mettre l'écriture du bloc central en blanc.

Car j'ai choisis le rouge pour l'écriture des exa, mais pour mon bloc centrale qui est rouge-bordeaux bha c'est pas très lisible.

Je souhaite modifier juste l'écriture de ce bloc.

PS: -J'ai déja commenter certaine section pour que ce soit + facile à se repérer.
-Si je fais des erreurs de vocabulaire ds le domaine CSS vas-y corriges moi, ça me permet d'apprendre en même temps. (je dis "propriété" mais bon je sais pas si c'est correcte.)

Merci beaucoup de ton aide.

Message édité par : Loudgi / 13-09-2010 14:56

Profil

Skippy

398

Styles Team (TST)

Posté : 13-09-2010 14:19

Oui c'est ça.

Pour ton bloc centrale, ce que tu peux faire c'est d'ajouter un style dans la balise correspondant à ce lien, dans le fichier header.html
Ainsi tu écrases la classe du fichier CSS en attribuant une proprieté style dans la balise < a href... style="color: #fff" ...

Je sais pas si j'ai été assez clair.

A+

Profil

www

Loudgi

Posté : 13-09-2010 15:04

Donc si je comprends bien dans ce code (extrait de header.php)


		

			

				

					FAQ

					FORUMS

					DOWNLOADS

					ACCUEIL

					NEWS

					RUBRIQUES

					

							<?php

							if(autorisation(1)) 

							{

							?>	

							

								

								

									DECONNEXION

																

							<?php

							}

							elseif (autorisation(0)) 

							{

							?>

								

								

									INSCRIPTION

																					

							<?php

							}

							?>

Je modifie la partie :




					ACCUEIL

par :


					ACCUEIL

et dans mon style.css


/* Style Ecriture Exagonal */

#outer {width:100%;vertical-align:center;}

/* hack for IE5.5 */

* html #outer {height:350px; he\ight:330px;}

#hex {padding:0; margin:0 auto; list-style:none; width:325px;}

#hex li {displaylock; float:left; width:104px; margin-right:4px;  height:120px;}

#hex li.p1 {padding-left:54px;}

#hex li.p2 {margin-top:-26px;}

#hex li a {text-decoration:none; colorff0000; cursor:pointer; font:large; font-weight : bold;}

J'ajoute :


#hex li exa_text_int {text-decoration:none; colorffffff; cursor:pointer; font:large; font-weight : bold;}

C'est bien ça ??

PS:

= #

c'est le site qui remplace.

Message édité par : Loudgi / 13-09-2010 15:29

Profil

Loudgi

Posté : 13-09-2010 15:55

Et bien j'ai trouvé, les propriétés n'existait pas dans le CSS il fallait donc les créer, voici ce que j'ai dans mon style.css dans la rubrique exa :




/* Bloc exagonal interieur - couleur survole*/

/* au dessusCouleur texte exa interieur - survole */

#hex li a.inner:hover {white-space: normal; color: #ff0000;} 

#hex li a.inner:hover b {border-bottom-color: #ededed;}

#hex li a.inner:hover span {background: #ededed;}

#hex li a.inner:hover em {border-top-color: #ededed;}

J'ai commenté la ligne en question.
Quand on ne spécifie pas à qui on attribut les propriété {xxxxxxx} dans le hex li a.inner:hover
alors ça considère que c'est du texte qu'on parle.

enfin en gros.

Voila

Merci en tous cas.

Bonne continuation à toi Skippy ! tu fais du bon taf

! bon courage

Message édité par : Loudgi / 13-09-2010 15:57

Profil

Skippy

398

Styles Team (TST)

Posté : 14-09-2010 15:24

Non ça n'est pas ça que je disais, mais de remplacer ta balise classe par la balise style. Ainsi tu aurais défini tes propriétés directement dans le header.html, sans te soucier de retrouver quelle classe va avec quoi.

Mais ! Mais tu as eu tout à fait raison de t'y prendre ainsi, car c'est la façon la plus propre de gérer la CSS

Content que tu es trouvé la soluce.

N'oublie pas de fermer le sujet si tu as ta réponse. Merci

A+

Profil

www