Finding module classes

jakuk

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

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

in the module config
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

broberg

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}

jakuk

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

sdetweil

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

the title is

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

jakuk

@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

}

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

broberg

@sdetweil said in Finding module classes:

and color is lowercase

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

jakuk

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: []
      }
    },
    {

sdetweil

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

add a css entry to specifically identify the behavior
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)