Petits ajustement dans feuille de style CSS

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

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

    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 !!!

  • #2
    Re : Petits ajustement dans feuille de style CSS

    Bonjour,


    Envoyé par FrankyBoy Voir le message
    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
    Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

    Commentaire


    • #3
      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!!!

      Commentaire


      • #4
        Re : Petits ajustement dans feuille de style CSS

        Bonjour,


        Envoyé par FrankyBoy Voir le message
        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>' :
        Code:
        [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
        Dernière édition par PhilJ à 04/02/2015, 09h24
        Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

        Commentaire


        • #5
          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!!!

          Commentaire


          • #6
            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 "

            Commentaire


            • #7
              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 )

              Commentaire


              • #8
                Re : Petits ajustement dans feuille de style CSS

                Bonjour,


                Envoyé par FrankyBoy Voir le message
                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
                Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                Commentaire


                • #9
                  Re : Petits ajustement dans feuille de style CSS

                  Bonjour,


                  Envoyé par getbackers19 Voir le message
                  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 :-\
                  Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                  Commentaire


                  • #10
                    Re : Petits ajustement dans feuille de style CSS

                    Envoyé par getbackers19 Voir le message
                    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.
                    Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                    Commentaire


                    • #11
                      Re : Petits ajustement dans feuille de style CSS

                      Envoyé par PhilJ Voir le message
                      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

                      Commentaire


                      • #12
                        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
                        UP, le plugin universel à découvrir sur https//up.lomart.fr
                        bgMax
                        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                        Commentaire


                        • #13
                          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é.
                          Créateur de sites internet — Agence web indépendante http://www.e-33.fr | http://www.quali-site.fr (région de Bordeaux)

                          Commentaire


                          • #14
                            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

                            Commentaire

                            Annonce

                            Réduire
                            Aucune annonce pour le moment.

                            Partenaire de l'association

                            Réduire

                            Hébergeur Web PlanetHoster
                            Travaille ...
                            X