I'm running this website with grav: northernazaerialphotography.com. I have a book today button in the bottom right of each page. I've tried to add additional styling to the button to invert the normal coloring scheme, so that the button is white text on blue background when not hovered over, and white background with blue text when hovering over it. I've tried to add this in my custom.css file in the antimatter theme by adding a float-right class, that I use to keep the button on the right side and I've also tried to use it to overwrite the default coloring for the button, namely implementing the color changes above. This is the contents of the custom.css file:
.fa-instagram, .fa-facebook {
font-size: 30px !important;
width: 50px;
}
.float-right {
float: right !important;
background: #1BB3E9;
color: #fff;
}
.float-right:hover {
color: #1BB3E9 !important;
background: #fff !important;
}
.test {
color: #fff;
}
I added the test class above just to see if this problem was not limited to just one class.
When I load the button on my page and inspect the css, I find that the float: right; CSS from the float-right class is included, but no other lines. Opening the css file in my browser shows that there are several lines missing:
The file here: http://www.northernazaerialphotography.com/user/themes/antimatter/css/custom.css
Has these contents:
.fa-instagram, .fa-facebook {
font-size: 30px !important;
width: 50px;
}
.float-right {
float: right !important;
}
This is only some of what I have in the custom.css file. I would assume this is because of the way that Grav optimizes the css, or something else, but is there a way for me to either a) include the css that is being left out, or b) change the coloring of the button without using the custom.css file?
Thanks,