Two CSS Overrides I Can't Change (Element Style)

I am currently working on some CSS Override for my Booking Page. It has been going well, until I hit a snag. I used Firebug to inspect elements and noticed that the following two can't seem to be changed through CSS, since they are tied to 'Element Style'. Unfortunately, I do not know how to edit that stuff and am hoping to get some help.

1) Availability Legend (
I am trying to change the square (i.fa.fa-square) and text colors to match what I changed through CSS Override. The only way seems to be through Element Style.

2) Photo (
Here is an example of what I want. I was able to replicate it through 'Inspect Element', but I don't know what code I need to customize it. I need 'background-size: cover' and 'height: 400px' to get what you see in the photo. Unfortunately , those two options are found under 'Element Style'. Here is what it actually looks like at the moment (

Any help would be much appreciated. I am so close.


  • Hi WildExodus,

    It appears that your image links are not working right now, so I can only give you the answer to your first question.

    While those elements do have an inline element style attribute, you can override that attribute with a "!imporant" tag in your css property. As far as selecting individual squares is concerned, you can make use of the ":nth-of-type(n)" selector to change the color of individual squares.

    Here is a quick example that makes a black, blue, and purple square:

    .cf-item-cal-action > i:nth-of-type(1) {
    color:black !important;
    .cf-item-cal-action > i:nth-of-type(2) {
    color:blue !important;
    .cf-item-cal-action > i:nth-of-type(3) {
    color:purple !important;

    If you can update the photos for question 2, I might be able to offer some suggestions for that one.

  • Thank you. My problem had been resolved so I removed the images.

    Thanks again!
Sign In or Register to comment.