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.

    Finding module classes

    Scheduled Pinned Locked Moved Unsolved Troubleshooting
    11 Posts 3 Posters 4.1k 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.
    • J Offline
      jakuk
      last edited by

      Hi there, I’m trying to change the colour of different modules, can anyone tell me how to find the different classes within a module for example, I’ve changed the newsfeed to yellow the topics are shown in yellow but the “BBC 12 yours ago” is still in white, so how do I find out what the class is called?

      Thanks in advance.

      Jack

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

        @jakuk welcome to the fun…

        each module can have its own…

        in MagicMirror/css/main.css or custom.css, or in the module folder ???.css

        you should find their classes, prefixed with the .(dot)modulename

        now, finding where its used is either

        1. in the module config
        2. in the module code. (usually module_name.js)…
          this is tedious, finding each place where the class= or style= uses some value.

        BBC 12 hours ago is an RSS feed I guess, so the rss/newsfeed module

        when the modules are provided by MM, they are in the modules/defaults folder

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • brobergB Offline
          broberg Project Sponsor
          last edited by

          the classes can be found either by checking the “inspector” with your browser or in the modules .js-file

          the “12 hours ago” uses the class “dimmed” that decides the color of that section.
          So

          .newsfeed .dimmed {color: yellow}
          
          1 Reply Last reply Reply Quote 0
          • J Offline
            jakuk
            last edited by

            Thank you for your reply’s, yes when going into the .js folders I search for class, and then work through all the classes to see which ones I want… so thank you for your help… I’m stuck on the calendar module… I have changed the symbol, time, title of the reminder, all works fine, my problem is I can’t seem to find the class for the actually calendar name I renamed it family calendar. Can you help with his please…

            Thanks

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

              @jakuk looking at the code, there are config options for each calendar url

              the title is

              	titleClassForUrl: function (url) {
              		return this.getCalendarProperty(url, "titleClass", "");
              

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              J 1 Reply Last reply Reply Quote 0
              • J Offline
                jakuk @sdetweil
                last edited by

                @sdetweil yes I found that too but putting this code in my custom.css file won’t change the follow of the name of the calendar? Am I doing it wrong?
                Thanks again

                .calendar .titleClass {
                Color: yellow

                }

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

                  @jakuk AND in addition, it goes in the config file where u defined your calendar entry

                  calendars: [
                            {
                              symbol: "family ",
                             url: "webcal://c....",
                             titleClass:   class_name
                             ... and there are other classes for each part... 
                            },
                  

                  and color is lowercase

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  brobergB 1 Reply Last reply Reply Quote 0
                  • brobergB Offline
                    broberg Project Sponsor @sdetweil
                    last edited by

                    @sdetweil said in Finding module classes:

                    and color is lowercase

                    It’s good practice, but css doesn’t care about upper/lowercase

                    1 Reply Last reply Reply Quote 0
                    • J Offline
                      jakuk
                      last edited by

                      Sorry i’m really confused now, in my config file i have this. I don’t have a titleClass, i have named the calendar under the header?
                      Do i just need to put color under the config ?

                      },
                          {
                            module: 'calendar',
                            header: 'Family Calendar',
                            position: 'top_left',
                            fetchInterval: '30000',
                            config: {
                              calendars: [
                                {
                                  symbol: 'calendar-check-o',
                                  url: ********
                                }
                              ],
                              titleReplace: {
                                'De verjaardag van ': '',
                                '\'s birthday': ''
                              },
                              excludedEvents: []
                            }
                          },
                          {
                      
                      S 1 Reply Last reply Reply Quote 0
                      • S Offline
                        sdetweil @jakuk
                        last edited by sdetweil

                        @jakuk you need to do two things, for each change

                        1. add a css entry to specifically identify the behavior
                        2. tell the calendar module to use your class
                          so, inside the calendar entry add the titleClass: class_name (step 1)
                          to the config (with appropriate commas etc)

                        you do NOT have to change the original class (if one is used, in case of title, none is specified)

                        Sam

                        How to add modules

                        learning how to use browser developers window for css changes

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • 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