I’ve been trying to find out how to change the colour of the Card Header from a readymade bloc. I initially tried applying a bg colour using a custom class. That displayed ok in Blocs put in Preview and live site the bg looks to be light grey which I take to be the default. After looking in Inspector I believe the class I need to change is within Bootstrap:
Since no one has replied to help you master the card header…
If you want to change all the card headers to be one colour, just add the class .card-header to the class manager and change the background colour. No need to add the class to anything, it’s already being used in the HTML, you are just over-ridding the bootstrap default styling…
I’m only on my phone and out of the office. So guessing here.
Did you happen to add some CSS manually to the CSS input zone in the code editor? The CSS we add there only applies in preview. In which case you are likely over-riding your over ride
Yes, the value in the code editor matches that which I had copied and pasted from the Inspector in my original post. That’s why I got stuck as I can see it is controlled by bootstrap and overwriting what I was able change and view myself via Blocs. I’ve removed from the code editor now and sure enough the header colour is as I declared in .card-header.
I’ve just joined Blocs Master so sure understanding will deepen from now on.
Have fun. You can always ask in the forum here if you need some clarification to understanding how CSS works and specificity (the laws of CSS) and questions about the bootstrap framework. Understanding the basics can help a lot.
