Custom.css

Reply to Custom.css on Wed, 03 Aug 2016 18:01:29 GMT

MichMich — Wed, 03 Aug 2016 18:01:29 GMT

I have two calendars in one calendar module as well. I use different icons for both calendar.

With this in mind, you could do some fancy css like:

tr:has(.fa-icon1) td .bright{
   color: red;
}
tr:has(.fa-icon2) td .bright{
   color: green;
}

I did not try it out, but It might work.

Reply to Custom.css on Wed, 03 Aug 2016 17:48:22 GMT

bscarano — Wed, 03 Aug 2016 17:48:22 GMT

Maybe what’s I’m asking isn’t possible.

I have the calendar module that pulls from 2 different calendars (main and FB birthdays. Both display together. What I’d like to do is show one calendar in one color and the other in another one.

Is this possible to do or am I asking too much?

Brendon

Reply to Custom.css on Wed, 03 Aug 2016 17:43:01 GMT

MichMich — Wed, 03 Aug 2016 17:43:01 GMT

@bscarano It’s not officially supported, but every module instance get’s it’s own id. If you take a look at the generated html, you’s see something like: id="module_2_calendar". This means you can use the following css:

#module_2_calendar td {
  color: #ff0000;
}

But please note: since this isn’t an official feature, I can’t give any support on this, nor do I promise it will keep working in the future.

Reply to Custom.css on Wed, 03 Aug 2016 17:08:08 GMT

bscarano — Wed, 03 Aug 2016 17:08:08 GMT

Not to Hijack the thread, but is there a way to change the color on just specific calendars if I have more than one in the module?

Reply to Custom.css on Sun, 24 Jul 2016 03:56:44 GMT

KirAsh4 — Sun, 24 Jul 2016 03:56:44 GMT

You don’t need a monitor on the pi to see the console. Any browser, anywhere, that can access the pi, can see the HTML output. In Chrome, hit 'F12' to open the console. At the top, make sure 'Elements' is selected. Now twiddle down the little arrows on the left, starting with the BODY tag. As you hover over the ones that just popped up, it highlights in the browser. 'region top bar' is where the calendar lives, twiddle that open. Hover over the 'region top left, center, right' and you can figure out where to go from there …

Reply to Custom.css on Sun, 24 Jul 2016 03:47:09 GMT

amanzimdwini — Sun, 24 Jul 2016 03:47:09 GMT

@KirAsh4
I am having trouble with that, since I run my pi headless & inspect the output from somewhere else (mirror is in workshop).
I am having trouble interpreting the Chrome output. But I solved the problem the way I always do: brute hack. I like the idea of TD better, though.

Reply to Custom.css on Sun, 24 Jul 2016 03:41:53 GMT

KirAsh4 — Sun, 24 Jul 2016 03:41:53 GMT

It helps to look at the HTML generated when the mirror is running. You should be able to pull it up in your browser’s console facility. Then you can figure out which (repeating) element can be used.

Reply to Custom.css on Sun, 24 Jul 2016 03:38:04 GMT

amanzimdwini — Sun, 24 Jul 2016 03:38:04 GMT

@KirAsh4
Was actually trying to set the FONT SIZE (didn’t realize that that has its own special problems). I like the idea of take a “dummy” element like TD & will see if that works. Thanks for the hint!

Reply to Custom.css on Sat, 23 Jul 2016 07:09:20 GMT

KirAsh4 — Sat, 23 Jul 2016 07:09:20 GMT

Because the various styles have an explicit color (white), you can’t simply set a color on the main class. However what you can do is set it on one of the elements, like 'TD':

.calendar td {
  color: #ff0000;
}