How to change the background color for upcoming_events module?

posts: 40

All; I'm pretty new to Tiki. I've been creating a collaboration website for my team for the last few weeks using Tiki-8.3. It is hosted on my employer's Linux server and is running under lampstack-5.3.13-0 ( which provides Apache 2.2.15, PHP 5.3.13 and Mysql 5.5.21). I'm using Feb12 as the theme. I don’t know much about css but I've created a custom.css file

/* $Id: custom.css Liz Wilson 7 May 2012 $
        Feb12 theme right side bar ( col3) customization.
      Right side bar now matches left side(col2) bar color
        width: 240px;
        overflow: visible;
        background: #A8CCE2 url(feb12/columnbg.jpg) repeat-x;
/* this section changes the calendar font color for today's date  */
.highlight {
        font: bold 1em Arial, sans-serif;
        background: url(feb12/cal-highlight.JPG) repeat-x;
        border: 1px solid #5aa5cf;
        color: #CC0000;
        font-size: 80%;
        text-decoration: none;
        line-height: 200%;
        padding: 2px 4px;

I have assigned the upcoming_events module to PageTop. The problem is that the background color for events is so dark the foreground text is unreadable. I used Firebug for Firefox to discover the HTML code number of the background ( it's #0D348D, thinking I'd just add something to my custom.css that would over-ride the color, but when I search all the files in the tiki-8.3 directory structure using 'find . -exec grep -il 0D348D {} \;' there are no files with that code! I've tried removing the custom.css file and cleaning the cache in Tiki and in my Firefox and IE sessions then starting new sessions but the background color of the event stays the same. I haven't made changes to any of the seeded files — I've check the timestamps to be sure and nothing has been updated this year.
So I have 2 questions. How is the color code being generated? How do I change it so that the display is easier to read?
Any help would be very welcome. Thanks in advance

posts: 2428 Czech Republic


each module has special class named by the module name, e.g.

So I think this could work for you:

.box-upcoming_events * { /* put the tag you want to override instead of the star here */
	background: #A8CCE2; /* overrides bg image too */
	color: 666; /* you can also override color of the text */

To make sure it overrides always you can put an !important pointer there:

.box-upcoming_events * {
	background: #A8CCE2 !important;


posts: 40

Thanks for the very quick reply, Luci! I really appreciate it. Unfortunately I'm still struggling with this. As I said I really don't have much experience with css.

From Firebug I can see the element that's causing the trouble --
td class="module vevent" style="background-color:#0D348D"

I tried your suggestion

.box-upcoming_events module {
	background: #A8CCE2; /* overrides bg image too */

	color: 666; /* you can also override color of the text */

and refreshed everything but it doesn't work. I think I'm using the wrong tag but I don't know which is the right one. Can you point me in the right direction?
Thanks a bunch!

posts: 2428 Czech Republic

Well, it does not work, because "module" is not a tag.

In this case you need to use .module as a class and with !important, because we are overriding inline style:

.box-upcoming_events td.module {
	background: #A8CCE2 !important; /* overrides bg image too */

	color: 666; /* you can also override color of the text */


posts: 40

Luci, you are a **STAR**!!!

That works perfectly AND I've learned a lot from our exchange. I can't thank you enough for helping me and for showing such patience with a complete beginner.

Thank you, thank you, thank you ... biggrin

posts: 2428 Czech Republic

No problem, my pleasure :-)

And welcome to the Tiki community !
We can't help ourselves but that is what we are ... ;)


Upcoming Events

No records to display