Change appearance of calendar header

[Marco Sabato]

Hi,

is there any way to change the appearance of the google-theme calendar header?

I found the css here:

http://code.google.com/p/gwt-cal/source/browse/trunk/gwt-cal-demo/war/google-cal-style.css?r=293

I think I have to change:

/* Calendar header */

.google-cal .gwt-calendar-header I just want to change the "baby-blue" background color #C3D9FF into another color. Whats the easiest way to do this? Greetings

[Brad Rydzewski]

Include the following entry in your own style sheet:

.google-cal .gwt-calendar-header {

background: #FFFFFF !IMPORTANT;

}

--
You received this message because you are subscribed to the Google Groups "gwt-cal" group.
To view this discussion on the web visit https://groups.google.com/d/msg/gwt-cal/-/5LG30J70ejkJ.
To post to this group, send email to gwt...@googlegroups.com.
To unsubscribe from this group, send email to gwt-cal+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/gwt-cal?hl=en.

[Carlos Tasada]

Hi Marco,

I don't have the code in front of me right now, but take a look to the GoogleAppointmentTheme class. I think to remember there is an open issue to move all this code to pure CSS.

Regards,

Carlos.

--

[Marco Sabato]

wow, thanks for the super fast answer.

 sadly:

.google-cal .gwt-calendar-header {

background: #FFFFFF !IMPORTANT;

} did not work. I also tried the other css methods: .google-cal .gwt-calendar-header .year-cell .google-cal .gwt-calendar-header .day-cell ... but also without any effect. @ctasada: I found the class GoogleAppointmentTheme but I don't know what I should change? Do you have further ideas?

[Carlos Tasada]

When you create an appointment you are probably specifying an STYLE.COLORNAME, try changing the RGB color used in the constructor.

If still doesn't work, I hope I'll have some time tomorrow to  check where is the problem

Regards

--

You received this message because you are subscribed to the Google Groups "gwt-cal" group.

To view this discussion on the web visit https://groups.google.com/d/msg/gwt-cal/-/cW6zMA5I_qYJ.

[Brad Rydzewski]

Try this:

.gwt-cal .gwt-calendar-header .day-cell {

background: black !IMPORTANT;

}

This changes the header background (for just the cells) to black. I was able to get this working by using the chrome developer tools and using inspect element on the following demo:

http://google.latest.gwt-web-calendar.appspot.com/

The chrome developer tools definitely will help you pinpoint exactly what style needs to be changed for every element.

Alternatively, you could also implement your own theme. gwt-cal has a Google and Apple theme. You could add your own and declare it in your module.xml

--

You received this message because you are subscribed to the Google Groups "gwt-cal" group.

[Marco Sabato]

@bradr: thanks a lot. I was able to change the calendar header into grey/dark.

I had to overwrite some css methods as you described. Also thanks for the hint with the chrome developer tool because

otherwise I was not able to find the correct css methods.