[RÉGLÉ] Petits ajustement dans feuille de style CSS

[FrankyBoy]

Bonjours à tous, j'aurais besoin de vous pour m'éclairer sur comment régler 2 détails dans mon site http://cimentierstlaurent.com qui ont rapport avec les feuilles de styles CSS pour le positionnement et l'affichage.

- Le premier détail est comment faire disparaitre le rectangle bleu sur le lien actif du menu principale en haut intégré dans un module du nom de ''mainnav1''!

- Le deuxième détail est comment faire pour centrer dans le site le texte du menu de bas de page intégré dans un module du nom de ''bottommenu'' ?

Merci à l'avance de votre aide !!!

[PhilJ]

Re : Petits ajustement dans feuille de style CSS

Bonjour,

j'aurais besoin de vous pour m'éclairer sur comment régler 2 détails dans mon site [...] qui ont rapport avec les feuilles de styles CSS pour le positionnement et l'affichage.

- Le premier détail est comment faire disparaitre le rectangle bleu sur le lien actif du menu principale en haut intégré dans un module du nom de ''mainnav1''

—

.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {

background-color: transparent; /* directive modifiée */

}

Le deuxième détail est comment faire pour centrer dans le site le texte du menu de bas de page intégré dans un module du nom de ''bottommenu''

—

#bottomMenu {

display: table; /* directive ajoutée */

}

Idéalement, vous insérerez ces modifications en surcharge (override) des feuilles de style du template d'origine, dans un fichier custom.css.


Cordialement,



PhilJ

[FrankyBoy]

Re : Petits ajustement dans feuille de style CSS

Serait t'il possible de me donner la procédure en détail pour ajouter ces justifications dans les CSS car je suis encore débutant en prog. je suis graphiste à l'origine et non webmaster, désolé et merci!!!

[PhilJ]

Re : Petits ajustement dans feuille de style CSS

Bonjour,

Serait t'il possible de me donner la procédure en détail pour ajouter ces justifications dans les CSS car je suis encore débutant en prog. je suis graphiste à l'origine et non webmaster, désolé et merci!!!

Vous n'avez pas à être désolé. Tout le monde commence par être débutant .


=> Plusieurs réponses à votre question sont envisageables :

1 – Certains templates offrent d'emblée la possibilité d'ajouter des directives CSS personnalisées directement depuis l'administration de Joomla (Extensions > Templates > Votre template).

2 – D'autres permettent nativement de définir un fichier de personnalisation — généralement appelé custom.css (chemin comme ci-dessus).

3 – Sinon, il vous est toujours possible de modifier votre fichier template.css. Inconvénient : en cas de mise à jour du template, vos modifications risquent fort d'être écrasées.

4 – Autre solution : faire une copie du template et travailler sur cette copie.

5 – Autre solution encore (que j'utilise toujours pour ma part) : utiliser un petit plugin, tel que 'Open Potion Head and Body'. En l'occurrence, cette extension est gratuite mais pour le télécharger vous devez disposer d'un compte Facebook. Lien de téléchargement direct : http://www.openpotion.com/website-de...oomla/#plugins.

Installez-la et placez cette simple ligne dans la zone 'Just before </head>' :

[INDENT]<link rel="stylesheet" href="/templates/[COLOR=#008000]votre-template[/COLOR]/css/custom.css" type="text/css" />
[/INDENT]

Remplacez votre-template dans le code ci-dessus par le nom du dossier de votre template.

Bien entendu, si le nom custom.css ne vous revient pas, vous pouvez toujours en utiliser un autre (par exemple personnel.css ou modifications.css).


La mini commande <link ... /> va injecter dans le code source du site un lien appelant un fichier custom.css... que vous n'avez plus qu'à créer et à déposer dans le dossier /templates/votre-template/css.

Avantage : contrairement aux autres plugins de la même espèce, le plugin 'Head and Body' injectera le lien appelant le fichier de surcharge en tout dernier, juste avant la balise de fermeture de l'en-tête (= </head>). C'est un avantage, car de cette façon, les directives de custom.css seront les dernières à « parler ». Or, comme vous savez, c'est toujours celui qui parle le dernier qui a raison .

Pour créer ce fichier de surcharge, rien de plus simple : utilisez un éditeur de texte simple, le très modeste bloc notes de Windows par exemple (Notepad en anglais), ou bien, plus agréable à utiliser, Notepad2 ou encore Notepad++. Évitez d'utiliser un traitement de textes.

Collez les codes CSS utiles dans votre nouveau fichier. Enregistrez-le sur votre ordinateur en lui donnant le nom custom.css, puis déposez-le dans le dossier /templates/votre-template/css du serveur où se trouve votre site. Rechargez votre page. C'est tout.

Si rien n'a changé comme vous le souhaitiez, veuillez vérifier que le fichier custom.css se charge bien comme prévu (= CTRL+U, puis regardez juste avant </head>). Si ce n'est pas le cas, relisez les conseils ci-dessus une trentaine de fois (au moins) jusqu'à les savoir absolument par cœur .

Si vous apportez ultérieurement des changements à ce fichier, pensez à toujours faire et à toujours conserver des sauvegardes de ses versions successives (par exemple, depuis l'explorateur de Windows : gardez enfoncée la touche CTRL, cliquez le nom du fichier puis, tirez vers le bas avec votre souris sans relâcher le bouton de la souris).



Bonne journée.



PhilJ

[FrankyBoy]

Re : Petits ajustement dans feuille de style CSS

Merci beaucoup de prendre le temps de m'expliquer!

Votre plugin à marché avec les commandes pour l'ensemble des pages mais bizarrement ne veut pas s'appliquer pour la page d'accueil par défaut et en plus, seulement celle du menu principale en haut. Il manque un petit détail seulement je crois et nous s'y somme!!!

[getbackers19]

Re : Petits ajustement dans feuille de style CSS

Pour ma part quand j'ai des petites modifications à faire j'utilise firebug pour repérer la ligne et la feuille concernée puis j'applique mes modifs (pour ton lien bleu: bootstrap.min.css ligne 9) je suis aussi débutant mais c'est la méthode que j'utilise et sa marche après je sais pas si c'est "conforme "

[getbackers19]

Re : Petits ajustement dans feuille de style CSS

Idéalement, vous insérerez ces modifications en surcharge (override) des feuilles de style du template d'origine, dans un fichier custom.css.

Pour la méthode "surchage" ou faut il appeler le fichiers custom.css? (possible que ma question soit stupide mais je n'ai pas bien compris )

[PhilJ]

Re : Petits ajustement dans feuille de style CSS

Bonjour,

Votre plugin à marché avec les commandes pour l'ensemble des pages mais bizarrement ne veut pas s'appliquer pour la page d'accueil par défaut et en plus, seulement celle du menu principale en haut. Il manque un petit détail seulement je crois et nous s'y somme!!!

Effectivement bizarre, la feuille de style ajoutée n'est pas chargée en page d'accueil (faites CTRL+U pour le voir). De l'extérieur il est impossible de comprendre et de dire pourquoi :-\

Il est bien sûr possible de « rattraper le coup », même si cela complique un tout petit peu les choses.

Par exemple, vous pouvez télécharger et installer ce module (module, cette fois, pas plugin) : http://www.hyde-design.co.uk/free-jo...ons/custom-css.

Ensuite :
—

1. Rendez-vous dans le module.
   —
2. Onglet 'Assignation de menu' : cochez uniquement le lien pointant vers la page d'accueil.
   —
3. Onglet 'Paramètres avancés' : cochez 'Yes' pour 'Use an external CSS file?', et collez l'adresse de votre custom.css juste en dessous (= champ 'CSS URL'), c.-à-d. : /templates/nigeriancarpentry/css/custom.css.
   —
4. Onglet 'Module' (le premier à gauche) :
   —
   • Champ 'Position' : choisissez une position, si possible inoccupée du template dans la disposition de la page d'accueil, et si possible une position module située dans la partie haute du template.
     —
   • Champ 'Statut' : mettez à 'Publié'.
     —
   
   
5. Enregistrez, et vérifiez que tout va bien en rechargeant votre page d'accueil (= touche F5, ou bien CTRL+F5 si cela ne suffit pas).

Cordialement,



PhilJ

[PhilJ]

Re : Petits ajustement dans feuille de style CSS

Bonjour,

Pour ma part quand j'ai des petites modifications à faire j'utilise firebug pour repérer la ligne et la feuille concernée puis j'applique mes modifs (pour ton lien bleu: bootstrap.min.css ligne 9) je suis aussi débutant mais c'est la méthode que j'utilise et sa marche après je sais pas si c'est "conforme "

Oui, Firebug (ou équivalent) est évidemment indispensable. Mais modifier bootstrap.min.css est risqué, car à la moindre mise à jour de ce fichier, il faudra réintervenir :-\

[PhilJ]

Re : Petits ajustement dans feuille de style CSS

Pour la méthode "surchage" ou faut il appeler le fichiers custom.css? (possible que ma question soit stupide mais je n'ai pas bien compris )

...Je vous ai donné le truc : il faut me relire une bonne trentaine de fois. En général, c'est très efficace .

Sérieusement : le principe est d'installer et de configurer un plugin qui va injecter un appel à un fichier CSS supplémentaire (que nous nommons ici custom.css) qui se chargera en dernier, donc dont les directives prévaudront toujours sur toutes celles qui auront été chargées avant lui. Montre en main, c'est une à deux minutes de travail.

[getbackers19]

Re : Petits ajustement dans feuille de style CSS

Bonjour,




Oui, Firebug (ou équivalent) est évidemment indispensable. Mais modifier bootstrap.min.css est risqué, car à la moindre mise à jour de ce fichier, il faudra réintervenir :-\

Effectivement, même si c'est pas avec ce fichier j'ai déjà eu à refaire des modifs après une mise à jour mais je ne savais pas que c'était à cause de sa merci pour l'info je vais me pencher la dessus

[lomart]

Re : Petits ajustement dans feuille de style CSS

Sérieusement : le principe est d'installer et de configurer un plugin qui va injecter un appel à un fichier CSS supplémentaire

Sans vouloir faire de pub, le plugin CustomCSS dispo sur mon site est hyper simple à configurer : il suffit de l'installer et de l'activer
Il prend en charge le fichier custom.css présent dans le répertoire CSS du template. Comme le plugin est appelé après le template, il sera toujours en dernier.
[Hors sujet] il prend aussi en compte un fichier custom.css pour l'administration du site

[PhilJ]

Re : Petits ajustement dans feuille de style CSS

@lomart : j'ai déjà utilisé ton plugin. Je ne me souvenais pas qu'il se chargeait en dernier. Désolé.

[FrankyBoy]

Re : Petits ajustement dans feuille de style CSS

Désolé du temps de ma réponse j'étais vraiment occupé c'est dernier temps et je pouvais même pas travailler sur le site de mon client!
Un gros merci c'est complètement réglé! je peux dire mission accomplit pour ce site!

Merci PhilJ pour ton aide si précieuse, tu est indispensable dans ce forum