MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Comment avoir une couleur différente du TITRE pour chaque calendrier

    Scheduled Pinned Locked Moved Solved Troubleshooting
    12 Posts 2 Posters 2.7k Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M Offline
      Mastrapi
      last edited by

      Bonjour à tous
      Comment avoir une couleur différente du TITRE pour chaque calendrier (Le Brusc, Agenda Ludo, Jours Fériés), merci pour votre aide
      jsCalendrier.jpg Calendrier.jpg

      S 1 Reply Last reply Reply Quote 0
      • M Offline
        Mastrapi @sdetweil
        last edited by

        @sdetweil encore merci beaucoup, ca fonctionne

        1 Reply Last reply Reply Quote 1
        • S Do not disturb
          sdetweil @Mastrapi
          last edited by

          @Mastrapi you would have to do 4 instances of the calendar module

          you can have different colors of events all in one instance

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          M 1 Reply Last reply Reply Quote 0
          • M Offline
            Mastrapi @sdetweil
            last edited by

            @sdetweil J’ai fait cela
            Screenshot_1.jpg

            S 1 Reply Last reply Reply Quote 0
            • S Do not disturb
              sdetweil @Mastrapi
              last edited by sdetweil

              @Mastrapi OK, now there is a hard way, or easy way

              hard way, use the developers window to get the ID assigned to each module instance
              .opps it might change if the order in config.js changes

              the easy way

              add

              classes:"....",
              

              after the module:

              with a unique string for each

              then in custom.css

              .xxxx .module header {
                 color: vvvv;
              }
              

              vvvv is the color to use

              note the leading dot in both cases

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              M 1 Reply Last reply Reply Quote 0
              • M Offline
                Mastrapi @sdetweil
                last edited by

                @sdetweil Dans css j’ai renseigné celaccs.jpg

                ou dois-je mettre classes:“???”, et que dois-je mettre à la place de ???

                S 1 Reply Last reply Reply Quote 0
                • S Do not disturb
                  sdetweil @Mastrapi
                  last edited by

                  @Mastrapi sorry, typo on my part, phone knows better!

                  .module_header

                  {
                       module"....",
                        position:"....",
                        classes:"......"
                         config:{
                               ....
                         }
                  }
                  

                  see here https://docs.magicmirror.builders/modules/configuration.html#module-configuration

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  S 1 Reply Last reply Reply Quote 0
                  • S Do not disturb
                    sdetweil @sdetweil
                    last edited by

                    @Mastrapi

                    classes

                    mom,
                    dad,
                    finances
                    travel

                    any meaningful string (in quotes of course)

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    M 1 Reply Last reply Reply Quote 0
                    • M Offline
                      Mastrapi @sdetweil
                      last edited by

                      @sdetweil Désolé je ne comprend pas
                      Screenshot_2.jpg

                      de plus si dans css j’indique une couleur, tous les calendriers auront la même couleur, non ?

                      S 1 Reply Last reply Reply Quote 0
                      • S Do not disturb
                        sdetweil @Mastrapi
                        last edited by

                        @Mastrapi Non, vous utilisez la valeur de chaque classe pour les rendre uniques.

                        .PAPA .module_header { 
                             color: red;
                         }
                        

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        M 1 Reply Last reply Reply Quote 0
                        • M Offline
                          Mastrapi @sdetweil
                          last edited by

                          @sdetweil Je suis vraiment désolé d’abuser de votre patience
                          Mais ca ne fonctionne pas
                          Regardez mon .js et mon .css
                          Qu’est ce qu’il ne va pas ? merci encore
                          papajs.jpg css.jpg

                          S 1 Reply Last reply Reply Quote 0
                          • S Do not disturb
                            sdetweil @Mastrapi
                            last edited by

                            @Mastrapi Mon erreur

                            .PAPA .module-header {
                               color: xxx;
                            }
                            

                            Tiret (-) au lieu de trait de soulignement (_)

                            Maintenant, votre .module-header
                            modifiera TOUS les en-têtes
                            1742108210724-css.jpg

                            Sam

                            How to add modules

                            learning how to use browser developers window for css changes

                            M 1 Reply Last reply Reply Quote 0
                            • M Offline
                              Mastrapi @sdetweil
                              last edited by

                              @sdetweil encore merci beaucoup, ca fonctionne

                              1 Reply Last reply Reply Quote 1
                              • S sdetweil has marked this topic as solved on

                              Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                              Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                              With your input, this post could be even better 💗

                              Register Login
                              • 1 / 1
                              • First post
                                Last post
                              Enjoying MagicMirror? Please consider a donation!
                              MagicMirror created by Michael Teeuw.
                              Forum managed by Sam, technical setup by Karsten.
                              This forum is using NodeBB as its core | Contributors
                              Contact | Privacy Policy