creer un menu avec des images differente suivant la page affichée

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

au fait ....... avec 32 x 32 mes icones sont minable niveau resolution .. comment tu as fait dans tes screenshots pour avoir la meme qualité ? car mes png initiaux sont 1200 X 1200 .. ( je recupere le travail de qqun d'autre, un stagiaire de mon asso )

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

je viens de faire la manip et bien sur .... j'ai du louper qqchose car ca ne marche pas ...
pourtant tout correponds a ce que tu as mis ... mais aucune changement de visuel ( pas de couleur etcetc) ...
j'ai juste mes icones dans le menu

as tu une idée du bug ?

[Rajoz]

Re : creer un menu avec des images differente suivant la page affichée

je ne connais pas bootstrap et en gros qu'est ce qu'une framework du coup comparée a joomla ?

Framework = ensemble d'outils

Bootstrap est un ensemble d'outils (HTML, CSS, JS). Ces outils vont faciliter le développement des templates et des vues de composants en évitant d'avoir tout à re-développer à chaque fois.

Par exemple puisque l'on parlait des colonnes gauche-centre-droite :

• si l'on a pas Bootstrap : il va falloir calculer la largeur que l'on veut pour ces trois colonnes et adapter leur comportement si l'on veut être responsive
• avec Bootstrap il suffit d'indiquer une classe définie de Bootstrap pour que la largeur soit définie et le comportement soit responsive : <div class="span3"> va indiquer une colonne responsive de 3 douzièmes de la largeur (en douzièmes parce que la grille de Bootstrap comporte 12 éléments par ligne)

Voici la documentation de référence sur la version 2.3.2 de Bootstrap (celle utilisée dans Joomla) : http://getbootstrap.com/2.3.2/ (en anglais)

Pour trouver de la doc et des tutos en français il suffit de chercher sur Google "bootstrap joomla" et de filtrer en français, il y en a beaucoup.

Amicalement,
Rajoz

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

... dois je choisir "custom " dans "parametres avancés" du template ?
car dans ce cas la j'ai un peu une difference mais pas ce qui est attendu ( juste le lien en rouge dans le menu quand on clique)

pour infos j'utilise "personnal.css" que j'ai un peu modifé ( juste des pixel par ci par la ) ainsi que "position.css"

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

... voila ce que j'ai sur mon site test brouillon apres avoir fait les manip comme indiquées :


je suis dubitatif ... ou ai je planté ?

[Rajoz]

Re : creer un menu avec des images differente suivant la page affichée

au fait ....... avec 32 x 32 mes icones sont minable niveau resolution .. comment tu as fait dans tes screenshots pour avoir la meme qualité ? car mes png initiaux sont 1200 X 1200 .. ( je recupere le travail de qqun d'autre, un stagiaire de mon asso )

1200x1200 c'est énorme ! Je ne sais pas ce que représentent ces images ou photos mais ce qui est sûr c'est qu'en réduisant à 32x32 ça va pixelliser un max...

J'ai pris mes icônes 32x32 sur internet. Il y a pas mal de sites où l'on peut trouver des icônes sympas et gratuites.

Amicalement,
Rajoz

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

.... OUPSSSS !!!! j'ai melangé mes index.php ...

pour lnstant il y a du mieux mais c'est pas parfait .... je fait un point dans un petit moment ...

[Rajoz]

Re : creer un menu avec des images differente suivant la page affichée

dois je choisir "custom " dans "parametres avancés" du template ?
pour infos j'utilise "personnal.css" que j'ai un peu modifé ( juste des pixel par ci par la ) ainsi que "position.css

Dans les paramètre avancés (Style du template) c'est bien "Personnel qu'il faut choisir" (c'est la valeur par défaut). Sinon on perd tout le style défini dans personnal.css

... voila ce que j'ai sur mon site test brouillon apres avoir fait les manip comme indiquées :
[ATTACH=CONFIG]28072[/ATTACH]

La pièce jointe n'est pas visible. Dans le forum il faut faire "Aller en mode avancé" pour que les images puissent être visibles.

aucune changement de visuel ( pas de couleur etcetc)
j'ai juste mes icones dans le menu

Pas facile de déboguer à l'aveugle, avec un lien sur le site ce serait tellement (trop) facile... Et en plus, je viens de voir que je me suis fait griller sur une partie de mes réponses (index.php).

Bon, on va procéder par étapes dans le même ordre que mon exemple.

1) Copie du template
Le template utilisé par défaut doit être maintenant celui qui a été copié (beez3new dans mon exemple)

2) Création des liens
Elle semble s'être bien passée mais la phrase "j'ai juste les icones" me gêne parce qu'il devrait y avoir les icônes ET les textes des liens. Pour que les textes soient visibles il faut dans les liens mettre le paramètre "Ajouter un titre au menu" à Oui (c'est la valeur par défaut).

3) Ajout dans index.php de l'appel de custom.css
Afficher le code source de la page (CTRL-U dans le navigateur, ou via un clic droit puis "Afficher la source").
Il doit y avoir plusieurs lignes commençant par <link rel="sylesheet" ... /> avec dans l'ordre le chargement de :

• system.css
• position.css
• layout.css
• print.css
• general.css
• personnal.cs
• custom.css

Comme indiqué ci-dessus, la dernière de ces lignes doit être le chargement de custom.css :

<link rel="stylesheet" href="http://monsite/templates/beez3new/css/custom.css" type="text/css" media="screen,projection" />

Si cette ligne n'existe pas il se peut que ce ne soit pas le bon index.php qui ait été modifié (ce doit être templates/beez3new/index.php) ou qu'il ait mal été sauvegardé ou qu'il y ait eu une faute de frappe.

4) Erreur dans le custom.css
Le fichier pourrait ne pas avoir été sauvegardé au bon endroit : templates/beez3new/css/custom.css ou ne pas être lisible par le site ou avoir une faute de frappe.
Pour vérifier si custom.css est bien pris en compte modifier une des valeurs et voir le résultat. Par exemple au début de custom.css pour #header modifier le padding-top: 12em; en padding-top: 50em;
En rafraîchissant l'affichage du site (CTRL-F5), le bandeau avec le logo devrait descendre en laissant un espace entre le menu et le bandeau.

Amicalement,
Rajoz

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

merci bcp .... j'ai effectué la meme demarche que celle que tu viens de proposé ... donc tu confirme bien ma betise

par contre que coups 3 question custumisation du menu
ou dois je influer et dans le ficheir position.css ou personnal.css ou donc custom.css et comment dois je faire faire pour :

1/ centrer mon menu sur la page
2/ avoir le fond du menu de la meme couleur que mon fond de site
3/ et donc supprimer la bordure de perimetre du menu pour ne laisser que les onglet de couleur...

merci de nouveau ... je recommence a prendre des habitude petit a petit...

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

... je tourne et retourne les css dans tout les sens ... rien ne se centre .... grrrr ...

[lefabdu51]

Re : creer un menu avec des images differente suivant la page affichée

... je tourne et retourne les css dans tout les sens ... rien ne se centre .... grrrr ...

pour info:
vu que tu as copié le template, tes mises à jour sont à l'abri, donc le tout est d avoir une sauvegarde du fichier personal.css à jour.
Tu modifies les classes existantes directement dans ce fichier.
Tu ajoutes tes css perso en bas de ce fichier.
normalement, dans ton code source tu devrais voir les balise li de tes éléments de menu.
Elle n'existent pas dans le code css, donc c est a toi de les écrire.
C'est comme la classe search.

ensuite pour positionner ton menu : #header ul.menu
Normalement, c est ce que firebug te dit non?
..... pour appliquer une marge automatique, tu doit positionner ton module. Si c est des div qui flottent bah tu ne pourras pas.
En bas du fichier personal.css, tu as les requêtes média.
De base, il n y en as que deux résolutions de traitées les résolution inférieures à 480px ou les ecrans de bureau.
Tout le reste c est a toi de l'écrire.
Sans compter que tu peut en rajouter.

Dernier point: quel est le style modchrome que tu appliques a tes modules ?

@rajoz :
Pour beez 3, tu peut faire exactement le même paramétrage et intégrer Bootstrap de la même manière.
Il faut juste changer le style des module en html5.
Ensuite le positionnement relèves des paramètres avancés de chaque module.
second paramètre a modifier, ajouter com_content dans la liste des composants recquerant bootstrap.
Si tu as d'autres composants, tu peut les ajouter, ce qui permet d'avoir une seule version chargée.

La grosse difference entre Beez et Protostar deux est le positionnement des éléments par défaut.
Tu ne réalise pas les mêmes mise en page. Il n'y a qu'à voir la position du fil d'ariane par défaut.
Dans beez 3, il est avant l'article , et sur protostar il est après.
Et la position position-7 est située à droite.

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

merci pout ta reponse
oui j'ai bien ciblé l'endroit que je devait "toucher" pour modifier mon menu

mais ...
soit j'utilise les mauvaise requete css
soit ... je ne sais pas
mais rien ne bouge, ne se center donc pas et rien ne s'efface

[Rajoz]

Re : creer un menu avec des images differente suivant la page affichée

Bonjour khrystoff,

ou dois je influer et dans le ficheir position.css ou personnal.css ou donc custom.css

Personnellement, je préfère utiliser mon propre custom.css plutôt que de modifier les fichiers css faisant partie du template :

• avantage : les modifications sont regroupées à un seul endroit (il y a 15 CSS dans Beez3 ! ), de la façon dont est modifié index.php custom.css est lu en dernier et est donc prioritaire. Cela ressemble (un peu) à la méthode de surcharge de Joomla
• inconvénient : les puristes pourrraient objecter qu'un élément pourra être défini deux fois, dans le CSS du template puis dans le custom.css et que c'est redondant.

comment dois je faire faire pour :
1/ centrer mon menu sur la page
2/ avoir le fond du menu de la meme couleur que mon fond de site
3/ et donc supprimer la bordure de perimetre du menu pour ne laisser que les onglet de couleur...

Réponse aux trois questions : il faut modifier le ul du menu (en rouge ce qui est nouveau)

#header ul.menu {
    top: 5.5em;
[COLOR=#ff0000]    border: none;
    box-shadow: none;
    background: #fff;
    text-align: center;
[/COLOR]}

Amicalement,
Rajoz

[khrystoff]

Re : creer un menu avec des images differente suivant la page affichée

moi je suis aussi de l'avis de faire un custom, surtout lorque il y a un travail d'equipe ...
merci pour ta reponse je vais tester cela meme si mon background n'est pas blanc mais autre ... bon ca c'est un detail

marrant qu'il faille utiliser text-align ...

[Rajoz]

Re : creer un menu avec des images differente suivant la page affichée

Bonjour lefabdu51,

Merci beaucoup pour ces infos sur l'intégration possible de Bootstrap dans Beez3.

Ce qui me gêne dans Beez3 ce sont les 17 surcharges déjà existantes en particulier celles pour com_content. Dans Protostar il n'y en a aucune ce qui me facilite la vie pour en créer.

Ma règle perso (avant les aspects techniques) : le meilleur template c'est celui que l'on connait le mieux.
Je n'ai jamais utilisé Beez3 et je n'ai donc jamais eu à faire l'effort de l'étudier.
Par contre pour Protostar, au début de J!3 j'ai dû donner des formations sur ce template. Ensuite je l'ai utilisé pour un certain nombre de projets. Maintenant c'est celui que je connais le mieux. C'est d'ailleurs tout naturellement que je l'ai utilisé quand j'ai créé le site help.joomla.fr avec la traduction de l'aide de l'administration.

Amicalement,
Rajoz