classPattern not working right

[bjwelker]

I use classPattern on my wifes calendar to give the Kids records other color. Now the Problem when i set styleName to 15 and use smaller styles in classPattern like classPattern: [["xxx", "style9"], ["xxx", "style5"], ["xxx", "style11"]], only the names with style number higher then the styleName working. lower classPattern style only showing the styleName style. This problem is only with classPattern, symbolPattern is working as aspected

[eouia]

You mean, assign several styleName to the same pattern("xxx")? I need more details, Show me your config of classPattern section.

[eouia]

If you set several style names to the same pattern as your writing; classPattern: [["xxx", "style9"], ["xxx", "style5"], ["xxx", "style11"]], The styles will be overridden by CSS cascading rules. so the css properties are mixed and overridden. And if you use my default custom style, since all of styles have the same properties and priority, so only one of those styles will be shown. (others will be overridden). Is this your case?

[bjwelker]

{ name: "Katja", symbol: "human-female@md", styleName: "style15", url: "https://basic.ics", classPattern: [["xxx1", "style9"], ["xxx2", "style5"], ["xxx3", "style11"]], symbolPattern: [["xxx1", "child@fa"], ["xxx2", "child@fa"], ["xxx3", "child@fa"]], interval: 300000, },

I try to show all of events wich don´t match xxx1 xxx2 or xxx3 in style15 and only the matching events in the other styles. but that don´t work if the number is smaller then in styleName. style15 won´t get overwritten from style9 but style16 can overwrite. Clear now ?

[eouia]

Now I understand what's your problem. :) Ok, that is the CSS rule. style15 is assigned to events as default, and after that style9 is assigned to a specific event additionally. But style15 and style9 both have the same priority. thus, late-defined style15 override style9. that is not the bug, but it is the normal CSS rule. To solve this; 1) If you are an expert of CSS; modify priority by CSS selector adjustment. (not easy but so fun) 2) Or, just copy style5, style9, style11 and paste them into ~/MagicMirror/css/custom.css (this css is the last CSS to be loaded, so CSS rules of this file will override other priors) 3) Or, change the order in preset.css. send them to lower position of style15.

[bjwelker]

Ah Copy them to custom.css an give them other names and use that names the right ?

[eouia]

Just copy and paste them. But if you want to use other names, as your wish. (but you should change config.js also for using new stylename)

[bjwelker]

Number 1. in your solution i don´t understand how to change the CSS priority. Issnt it possible to change the code that classPattern get a default so you dont use styleName anymore ?

[eouia]

Don't mind solution 1.

• Open ~/MagicMirror/css/custom.css
• Copy belows and paste.

  .CALEXT .style5 {
  background-color:#33C;
  color:#FFFFFF;
  }
  .CALEXT .style9 {
  background-color:#C3C;
  color:#FFFFFF;
  }
  .CALEXT .style11 {
  background-color:#3CC;
  color:#FFFFFF;
  }

  I think this might give the result of what you wanted.

[bjwelker]

That works 👍

[eouia]

Good to you. I'll close this issue, have a nice day.