Easy-Design.Net forum




Aide générale SOS pour le theme de base

soupaloignon Membre non connecté

EDN actif(ve)

Rang

Avatar

Inscrit le : 11/02/2010 à 09h01

Messages: 20

Le 16/04/2010 à 21h45
Bonjour à tous,

Je ne sais pas si c'est vraiment le bon forum (plutôt que celui de PhpBoost) mais comme cela concerne le design, et plus particulièrement les css, je me suis dit que j'étais au bon endroit :)
(bon si c'est pas le cas faut le dire hein ;)

Je cherche à modifier le design du menu horizontal déroulant du thème de base de PhpBoost.

Pour les liens de 1er niveau, j'ai modifié la couleur et c'est tout. Accessoirement je cherche à l'aligner à droite et là je sèche (j'ai réussi à aligner à droite le menu horizontal non déroulant, mais le déroulant je ne trouve pas)

Le gros problème que j'ai par contre c'est avec les liens déroulant de ce menu. Je n'arrive à rien faire. J'ai tripatouillé dans tous les sens les fichiers default.css et global.css et le seul truc que je suis arrivé à faire c à mettre une bordure de 10px sur un sous menu... Dont je n'ai aucune utilité d'ailleurs :d

Bon bref, je n'ai pas encore une idée précise du design que je voudrais faire, je voudrais juste déjà comprendre comment ce menu fonctionne et dans quel(s) fichier(s) il peut se modifier.

Voici une capture d'écran avec les 2 états de ce menu : http://monserveur.info/ftp/phpboost-20.png


L'image du haut c'est quand on descend du lien "Bienvenue" niveau 0 (je l'appelle comme ça dans cet exemple) et que l'on arrive au lien "Pourquoi ce site ?" niveau -1 (je l'appelle comme ça dans cet exemple)

Donc à ce stade il y a déjà ce rectangle blanc cassé, avec un petit rectangle bleuté a gauche, plus une bordure. Bon déjà rien que ça, impossible à localiser.


La 2ème image c'est lorsque le pointeur s'approche du lien "Pourquoi ce site ?". Il y a un rectangle qui s'affiche par dessus le 1er, plus petit que le 1er, et de couleur bleutée. C'ets le seul truc que je suis arrivé à faire, c'est à mettre un 10px en border por ce rectangle. J'étais tout content, me disant que le reste devait pas être loin, que dalle :).

Bon, j'en ai mis une tartine, mais c'est pour ne pas faire perdre de temps à la personne, s'il y en à une, qui pourrait me répondre. On sait de quoi on parle là.

A grand merci d'avance pour tout élément qui me fera avancer. Edité par soupaloignon Le 16/04/2010 à 21h48
   
saturnin Membre non connecté

Administrateur

Rang

Avatar

Administrateur

Inscrit le : 08/08/2009 à 22h19

Messages: 3963

Le 16/04/2010 à 22h26
il me semble que tu veut parler de ce tpl :
/templates/default/framework/menus/links/horizontal_scrolling.tpl

si il est disponible dans ton thème ce sera celui la qui sera pris en compte.

par contre a froid sans voir c'est un peu sec.

mais l'image est codé dans le tpl, et les valeur transmise par php.
ce n'est donc pas du css pour l'image en elle meme.

pour ce qui est des background et de leur localisation, firebird devrais t'aider si tu ne l'a pas déjà.

signaturesaturnin


Accroche toi au clavier, je retire le shell...
Site web    
soupaloignon Membre non connecté

EDN actif(ve)

Rang

Avatar

Inscrit le : 11/02/2010 à 09h01

Messages: 20

Le 16/04/2010 à 23h10
Merci pour ta réponse,

Je ne connaissais pas ce tpl, donc c'est toujours utile d'accroitre ses connaissances.

Par contre pour ce que je veux faire cela n'interviens pas, car c'est clairement du css. Pour Firebug oui je l'ai utilisé bien sur, mais cela ne m'avance pas du tout
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 16/04/2010 à 23h24
Bonsoir soupaloignon,

Je regarderais cela demain^^ Par contre as-tu un lien où le soucis est visible?

swan_signature

Site web    
soupaloignon Membre non connecté

EDN actif(ve)

Rang

Avatar

Inscrit le : 11/02/2010 à 09h01

Messages: 20

Le 17/04/2010 à 00h10
Merci de ton intervention Swan :)

En fait ce n'est pas un souci dans le sens où les menus fonctionnent. Donc tout va bien à ce niveau.

Le souci vient du fait que je ne comprends carrément pas quoi faire, et où le faire, pour arriver à modifier l'existant.

Non, pas de lien, c'est en local pour le moment. Il y a juste les captures que j'ai faites et qui sont sur un post plus haut
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 17/04/2010 à 12h40
Bonjour soupaloignon,

Bah là pour le coup pour moi c'est un soucis de ne pas avoir de visuel... Je pense bien savoir d'où viens ton soucis.



1)

Citation:
Donc à ce stade il y a déjà ce rectangle blanc cassé, avec un petit rectangle bleuté a gauche, plus une bordure. Bon déjà rien que ça, impossible à localiser.


Le petit rectangle bleuté est une image qui se situe dans "/templates/Ton_Thème/theme/images":

Pour le css, c'est cette partie de code dans le "global.css" à la ligne 194 :

Code CSS :
.dynamic_menu li li {
background:#FFFFFF url(images/bgmenu.png) repeat-y scroll 0 0;
color:#0578CC;
}




2)

Citation:
La 2ème image c'est lorsque le pointeur s'approche du lien "Pourquoi ce site ?". Il y a un rectangle qui s'affiche par dessus le 1er, plus petit que le 1er, et de couleur bleutée. ... etc....


C'est le hover du survole du lien.

Le code est dans le "global.css " aussi... Pour exemple dans le thème "base" il est défini comme ceci (à la ligne 203):

Code CSS :
.dynamic_menu li li a:hover {
    background-color:#D2E3F1;
    border:1px solid #8BBFE8;
}


J'espère que c'était bien cela que tu voulais ...

swan_signature

Site web    
soupaloignon Membre non connecté

EDN actif(ve)

Rang

Avatar

Inscrit le : 11/02/2010 à 09h01

Messages: 20

Le 17/04/2010 à 12h53
Merci pour ta réponse swan. J'avais repéré ces lignes à priori. Le problème venait que lorsque j'y faisais des modifications, voire des suppressions, cela n'avait aucun effet. D'où à me demander si je travaillais bien sur le bon fichier css :)

En tout cas tu valides déjà que c'est bien global.css, c'est déjà important car je commençais à avoir un sérieux doute.

Je pars dans un petit moment chez ma compagne, donc je ne vais pas tester ça de suite. Mais je m'y replonge dès que possible et je te tiens au courant

En tout cas merci pour ton aide, c'est vraiment très sympa de ta part.

Passez un bon we ;) Edité par soupaloignon Le 17/04/2010 à 12h54
   
saturnin Membre non connecté

Administrateur

Rang

Avatar

Administrateur

Inscrit le : 08/08/2009 à 22h19

Messages: 3963

Le 17/04/2010 à 16h47
quand on touche au fichier CSS il faut (dans le cas ou ne voit pas les modification dans firebug) regénéré le cahe du CMS, et celui du navigateur (si sa persiste)

dans le cas ou les modification ne sont toujours pas perceptible, voir si le client ftp fait bien la mise a jour.
une suppression du fichier avant le re-transfert peut etre nécessaire chez free (des fois y a des couic)

si il persiste un doute firebug permet de voir si le fichier mien en <link> est bien le bon (dans le header)

signaturesaturnin


Accroche toi au clavier, je retire le shell...
Site web    
soupaloignon Membre non connecté

EDN actif(ve)

Rang

Avatar

Inscrit le : 11/02/2010 à 09h01

Messages: 20

Le 19/04/2010 à 11h44
Bonjour,

Saturnin : Merci pour ces infos, mais j'avais vidé les caches pendant mes tests


Swan : J'ai fait les modifs sur un de mes sites, pour que cela soit visible en ligne. Ca se passe ici :
http://soupaloignon.net/web/news/news.php
(j'ai refait le menu horizontal déroulant que j'avais en local. Menu de test situé en menu central haut)

Pour la partie située en ligne 194
Code CSS :
.dynamic_menu li li {
background:#FFFFFF url(images/bgmenu.png) repeat-y scroll 0 0;
color:#0578CC;
}


Imaginons que je veuille enlever totalement ce 1er cadre, si je place le code en commentaire le design ne bouge pas, comme s'il héritait de propriétés graphiques situées ailleurs.
Donc ma 1ere question pour cette partie de code serait de savoir comme faire pour pour que ce cadre n'apparaisse pas

Pour la partie située en ligne 203:
Code CSS :
.dynamic_menu li li a:hover {
    background-color:#D2E3F1;
    border:1px solid #8BBFE8;
}

Là par contre cela n'a aucun impact (c'est pour ça que lors de mes 1ers test, avant le message sur ton forum, je n'y comprenais rien).
Sur le lien que je t'ai donné en haut de ce message voici le css modifié que j'ai.
Code CSS :
.dynamic_menu li li a:hover {
    background-color:#FFFFFF;/*D2E3F1*/
    border:10px solid #ffffff;/*8BBFE8*/
}

Comme tu peux le voir cela n'a aucun impact


Une autre question plus générale. En modifiant ce qui se trouve à la ligne 194, cela impacte également sur l'administration du site. C'est voulu que l'admin et la partie publique partagent le même css ?


   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 19/04/2010 à 13h06
Bonjour soupaloignon,

Alors pour le problème du css, certaines propriétés sont prisent dans "/templates/default/theme/default.css"....

Pour contrecarré cet anicroche, tu va le dupliquer au même endroit, mais dans le thème base...

Ensuite tu vas ouvrir le "header.tpl" du thème base et changer la ligne 10 :

Code TPL :
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print, handheld" />


Par celle-ci:

Code TPL :
 
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/default.css" type="text/css" media="screen, print, handheld" />


Cela permettra à ton thème d'être complètement indépendant du thème default ;)



Citation:
1)

Citation:
Donc à ce stade il y a déjà ce rectangle blanc cassé, avec un petit rectangle bleuté a gauche, plus une bordure. Bon déjà rien que ça, impossible à localiser.


Le petit rectangle bleuté est une image qui se situe dans "/templates/Ton_Thème/theme/images":

Pour le css, c'est cette partie de code dans le "global.css" à la ligne 194 :

Code CSS :
.dynamic_menu li li {
background:#FFFFFF url(images/bgmenu.png) repeat-y scroll 0 0;
color:#0578CC;
}



Tu retrouvera cette le ".dynamic_menu li li" dans le défaut.css" à la ligne 131, rajoute le "hover " aussi dedans à la suite :)




Et dis moi si tu vois des changements. N'oublie pas de régénéré les caches...

swan_signature

Site web    
soupaloignon Membre non connecté

EDN actif(ve)

Rang

Avatar

Inscrit le : 11/02/2010 à 09h01

Messages: 20

Le 19/04/2010 à 19h08
Merci swan pour toutes ces infos,

Bien vu le coup du default.css dans le thème base ;)

Finalement je m'en suis sorti en mettant un transparent ici:
Code CSS :
.dynamic_menu li li a:hover {
    background-color:transparent;
    border:0px solid #ffffff;
    color:#373737;

En faisant le border de la 2ème lige devient actif, alors qu'avant il ne l'était pas. Pas variment compris la raison, mais bon ça marche.

Avec tout ces paramètres je suis arrivé à alléger le css, donc c'est bon pour moi


Un dernier point, lié à ce menu horizontal déroulant. Je voudrais l'aligner à droite, alors que par défaut il est à gauche.

Pour le menu horizontal non déroulant j'avais rajouté ça pour l'aligner à droite :
Code CSS :
text-align: right;


Dans templates/default/theme/default.css
ligne 214
Code CSS :
/* Menu Horizontal */
div.menu_horizontal {
    padding: 10px;
}


Par contre cette manip ne marche pas pour le menu horizontal déroulant. Tu aurais une idée ?


   
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie