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 (https://dl.dropboxusercontent.com/u/15783900/Availability.png)
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 (https://dl.dropboxusercontent.com/u/15783900/Photo.png)
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 (https://dl.dropboxusercontent.com/u/15783900/Actual-Photo.png).
Any help would be much appreciated. I am so close.
1) Availability Legend (https://dl.dropboxusercontent.com/u/15783900/Availability.png)
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 (https://dl.dropboxusercontent.com/u/15783900/Photo.png)
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 (https://dl.dropboxusercontent.com/u/15783900/Actual-Photo.png).
Any help would be much appreciated. I am so close.
Comments
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.
Kevin
Thanks again!