this is my first question here, hope I am doing this right :)

I am trying to change the colours of the calendar on this page: https://realsailing3.vanbruben.de/dehler-41-shelter.

But the classes are as long as

".monthly-fluid .ext_month_day_nox, .monthly-fluid .ext_month_day_nox_r, .ext_month_day_nox.morning_occ_nox"

or

or

.monthly-fluid .cur_month_day_nox.arrival_day

I have tried to separate them with a dot but i get the message "dont use adjoining classes"

Any idea of how I can change these colours?

Thank you very much!!

code picture

CodePudding user response：

try to add !important with that property.

.monthly-fluid td.reserved_nox {
    background-color: #f0c2c2 !important;
}

CodePudding user response：

It shouldn't matter how long the classes are. If you've used an email client such as Outlook before, classes act the same way as tags do in Outlook. You can "categorize" each element as cur_month_day_nox or no_start or nocuscol, or any combination of them. Then when the element is styled using CSS, the file will describe how elements will appear based on their categorizations. Each description is called a "rule."

We want to look for a rule which modifies the background-color, since our objective is to change it the color of the day. While the element is selected in the Inspector, If you look on the right pane called Styles and scroll enough, you'll find the following CSS rule:

.monthly-fluid .cur_month_day_nox {
    background-color: #c2dfd0;
}

This style "selects" any elements which have the class .cur_month_day_nox, which is all the green days with the exception of today (at the time of writing, that's February 1st). So, you can double click the color value and change it. You should see all the green days change instantly.

Edit: For a weird reason, the class names are different on your end, but regardless the approach is the same.