couleur en tête et couleur du template

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] couleur en tête et couleur du template

    Bonsoir.
    J'ai migré sous joomla 4 et je voudrais modifier la couleur du bandeau du haut du template, le corps et l'intitulé accueil en haut du bandeau à gauche.
    Sous joomla c'était le background-color du template qu'il fallait modifier.(Background color Ligne +ou - 7196 du fichier css/template css)
    Je séche.
    Merci de vos réponses.
    @+

    Cliquez sur l'image pour l'afficher en taille normale  Nom : site joomla.jpg  Affichages : 113  Taille : 4,7 Ko  ID : 2031359
    Dernière édition par patdal03 à 24/09/2021, 19h42

  • #2
    Bonjour,
    Sous joomla c'était le background-color du template qu'il fallait modifier.(Background color Ligne +ou - 7196 du fichier css/template css)
    C'est une mauvaise idée de modifier le template. Il faut créer un fichier custom.css dans le dossier ccs du template qui contiendra toutes les personnalisations

    En ce qui concerne l'intitulé accueil, ce doit être le titre du menu qu'il faut changer.

    Pour modifier la couleur du bandeau et le corps, il faut identifier les classes à modifier puis écrire les règles correspondantes dans le fichier custom.css
    Voici un exemple
    Code:
    /*couleur bandeau*/
    .container-header {
    background: darkred;
    }
    /*taille de la police du menu*/
    .navbar a,
    .navbar button {
    font-size: 2rem;
    }

    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


    • #3
      NB : user.css et pas custom.css dans le cas de ce template
      Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

      Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

      Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

      Commentaire


      • #4
        Envoyé par woluweb Voir le message
        NB : user.css et pas custom.css dans le cas de ce template
        C'est aussi custom.css avec cassopeia. testé ce matin car j'avais un doute. les 2 noms sont admis

        CORRECTION
        C'est uniquement user.css. Hier pour répondre à un post sur mon plugin customcss, je l'avais installé. Il charge par défaut le custom.css du template
        Désolé
        Dernière édition par lomart à 21/09/2021, 08h44
        woluweb aime ceci.
        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


        • #5
          Envoyé par lomart Voir le message

          C'est aussi custom.css avec cassopeia. testé ce matin car j'avais un doute. les 2 noms sont admis

          Bonjour,

          Avec certain template, comme Cassiopeia par exemple, uniquement un fichier user.css est accepté. Un fichier custom.css n'est pas reconnu.

          Commentaire


          • #6
            Pour info, on peut voir le nom du fichier dans le fichier joomla.asset.json :

            Home of the Joomla! Content Management System. Contribute to joomla/joomla-cms development by creating an account on GitHub.


            On voit ainsi p ex dans ce fichier qu'on peut aussi créer son propre user.js si on veut ajouter du javascript
            Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

            Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

            Commentaire


            • #7
              Bonjour,
              j'ai le navigateur chrome et avec un clic droit j'ai l'option inspecter.
              Vous me conseillez "il faut identifier les classes à modifier puis écrire les règles correspondantes dans le fichier custom.css"
              Comment je fais pour trouver les classes ?
              D'avance merci de votre aide.
              @+

              Commentaire


              • #8
                Comment je fais pour trouver les classes ?
                Pour comprendre l'inspecteur de code : https://www.youtube.com/watch?v=aRk_OkUqDbY
                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


                • #9
                  Bonsoir,
                  J'ai créé un fichier user.css.
                  Les couleurs des bandeaux sont modifiés.
                  Comment faire pour modifier la couleur du bandeau ?
                  Cliquez sur l'image pour l'afficher en taille normale  Nom : user.css_rouge.jpg  Affichages : 0  Taille : 3,0 Ko  ID : 2031411
                  J'ai vu que je pouvais modifier le css/global/colors_alternative.min.css en modifiant la valeur color primary à : "eeb9c4".
                  La couleur des bandeaux haut et bas sont modifiés.
                  Est ce la bonne solution pour les bandeaux du template ?
                  Si oui comment j'ecris cela dans le user.css
                  D'avance merci pour les réponses.
                  Cliquez sur l'image pour l'afficher en taille normale  Nom : colors_alternative.min.css.jpg  Affichages : 0  Taille : 112,6 Ko  ID : 2031412
                  Dernière édition par patdal03 à 21/09/2021, 20h50

                  Commentaire


                  • #10
                    si c'est une couleur définie par le template cassiopeia, vous pouvez simplement changer la couleur comme suit (en adaptant le cas échéant le nom de la couleur)... et ça adaptera TOUS les endroits où elle intervient

                    Code:
                    :root {
                    --cassiopeia-color-primary: #ff0000;
                    }
                    Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

                    Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

                    Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

                    Commentaire


                    • #11
                      Pour des changement localisés :

                      /* Change couleur des fonds*/
                      body {
                      background-color : #xxxxxx;
                      }

                      .container-component {
                      background-color : #xxxxxx;
                      }

                      /* change couleur fond fil d'ariane*/
                      .breadcrumb {
                      background-color: #xxxxxx;
                      }

                      /*change couleur de fond des cartes */
                      .card {
                      background-color: #xxxxxx;

                      }

                      Commentaire


                      • #12
                        Bonsoir,

                        Pour que le changement de couleur s'applique je dois modifier les valeurs directement dans le fichier css/global/colors_alternative.min.css
                        Ce n'est pas normal. Ce fichier est chargé avant user.css qui devient prioritaire

                        Enfin qui serait chargé s'il se trouvait dans le sous-dossier css. Actuellement, il est ignoré.
                        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
                          Bonsoir,

                          "Enfin qui serait chargé s'il se trouvait dans le sous-dossier css. Actuellement, il est ignoré."

                          Ah là là ...j'ai eu un doute.
                          Si j'avais mis le fichier user.css dans le dossier css cela aura fonctionné.

                          Par contre j'aimerai supprimer le dégradé du bandeau du haut : quel paramètre dois je modifier ?

                          Merci pour les informations.

                          Cliquez sur l'image pour l'afficher en taille normale

Nom : image_37041.jpg 
Affichages : 1195 
Taille : 8,7 Ko 
ID : 2031503

                          Cliquez sur l'image pour l'afficher en taille normale

Nom : image_37037.jpg 
Affichages : 1242 
Taille : 59,6 Ko 
ID : 2031500

                          Commentaire


                          • #14
                            Si j'avais mis le fichier user.css dans le dossier css cela aura fonctionné.
                            Oui, c'est même obligatoire
                            Par contre j'aimerai supprimer le dégradé du bandeau du haut : quel paramètre dois je modifier ?
                            Utiliser le code que j'ai fourni dans mon premier post

                            Redéfinir les variables CSS, c'est bien pour changer la couleur de tous les éléments du site : fond, texte, lien, ...
                            Par contre cela ne fait que changer les couleurs utilisées par le dégradé (sans le supprimer ou l'écraser)

                            le code de templates/cassiopeia/css/user.css doit être
                            Code:
                            :root{
                              --cassiopeia-color-primary : #eeb9c4;
                              --cassiopeia-color-link: #30638d;
                              --cassiopeia-color-hover: #954b56;
                            }
                            /*couleur bandeau*/
                              .container-header {
                              background: var(--cassiopeia-color-primary);
                            }
                            /*taille de la police du menu (a ajuster)*/
                            .navbar a,
                            .navbar button {
                              font-size: 2rem;
                            }
                            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


                            • #15
                              Bonjour,
                              Après modificatidon du user.css j'ai bien mes bandeaux haut et bas de la bonne couleur ainsi que le fond du body.
                              Je vous remercie de votre aide.
                              @+


                              Dernière édition par patdal03 à 30/09/2021, 09h48

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X