How to change the colour of the popup event's header and background

How to change the colour of the popup event's header and background

by Adma Lim -
အကြောင်းပြန်မှု အရေအတွက်: 4
Hi

I just started to experiment how to use CSS in styling my moodle theme. I would like to share with you the css code on how to change the colour of the popup event when you rollover over a particular date.

.cal_popup_caption
{background-color:#7DBD00; font-size:0.8em;} /*Change the Header's color*/

.cal_popup_fg {
font-size:0.8em;
background-color:#FFFFFF; /*Change the content's background colour*/
}


I have attached the image of the above code would to the pop-up.

Hope this would be useful for other beginners who are customizing their own theme.

Thanks.
ပျှမ်းမျှအဆင့်သတ်မှတ်ချက်များ:Useful (2)
Adma Lim ထံသို့ အကြောင်းပြန်ရာတွင်

Re: How to change the colour of the popup event's header and background

by Frank Ralf -
Hi Adma,

Thanks for sharing! I added a link to this thread to Themes FAQ#Colors
Adma Lim ထံသို့ အကြောင်းပြန်ရာတွင်

Re: How to change the colour of the popup event's header and background

by Mary Evans -
Core developers ၏ ရုပ်ပုံ Documentation writers ၏ ရုပ်ပုံ Peer reviewers ၏ ရုပ်ပုံ Plugin developers ၏ ရုပ်ပုံ Testers ၏ ရုပ်ပုံ
Thank you Adma, for this useful piece of css mark-up, it's one I've been meaning to track down, but which sadly ended up at the bottom of my to-do list!

I'm sure other Moodlers will find this useful too.

Thanks again

Mary
Mary Evans ထံသို့ အကြောင်းပြန်ရာတွင်

Re: How to change the colour of the popup event's header and background

by Adma Lim -
Frank & Mary, You're welcome!

I have benefited from the moodle forums and I'm happy that finally I could contribute back to the community with this piece of CCS code.

BTW, i m using moodle v: 1.9.1

Now, I am trying out to change the colour for the repeating events, as I have just noticed that only the first day of the recurring event is being coloured and the rest of the 3 days are not colored (only underlined). If I manage to code the CCS for this, I would post up to this forum again.
Adma Lim ထံသို့ အကြောင်းပြန်ရာတွင်

Re: How to change the colour of the repeating events

by Adma Lim -

this is the code. I tried on my localhost and it works when viewing on FF.


#calendar .minicalendar .duration_global,
.minicalendar .duration_user
{
border-bottom-style: none !important;
border-top-style: none !important;
}