OK, well if it helps, the Essential theme paints every block white, whether you want it white or not.
The css used is this...
.block { background: white;}
To disable this you need to add this CSS...
.block { background: none;}
To disable that background and also add a new color you need to do this:
.block { background: none; background-color: #eeeeee; } or whatever colour code you prefer.
Cheers
Mary
Hi Mary,
I am trying to change colors of 4 different html blocks using their instance id...i followed your steps but i cant get it to change color ... can you please help... ? anyting else i should add???
I am using Moodle 3.1 with Adaptable theme.
#inst133.block_html.block.header {
background-color: #890;
}
Thanks
You are adding too many things together...so try this instead:
#inst133.block_html .header {
background-color: #890;
}
Notice the .header is separate and NOT connected like you wrote it.
Hope this helps?
Mary
I dunno what to say,
you're awesome ...thank you so much...
but can you explain to me the separation in .header for future reference
The separation relates to how the classes are in the html.
If the classes are on the same object, then there is no gap eg. the css for
<aside id="inst4" class=" block block_navigation card m-b-1" aria-labelledby="instance-4-header" data-block="navigation" role="navigation">could be written as Hi Zaid,
You need to be familiar with both HTML and CSS to really understand this, but generally speaking you do not need to connect all CLASSES to an ID unless targeting a specific element, or because they already exist in a stylesheet and you want to customise that particular element.
In your case...
The HTML mark-up for that block will be something like this...
<div id="inst133" class="block-html block">
<div class="header>
<div class="title">
<h2>...</h2>
</div>
</div>
</div>
As you can see the ID in this case in CSS is written as #inst133 and also has two classes attached to it. In CSS these are written as
In this case you do not need both of these classes, in fact you should not need any as #inst133 is unique and so will work on it's own.
Notice, however, that the next <div class="header"> is not included here as that falls beneath in a separate division of it's own. And that is the reason for the separation in the final CSS..
#inst133.block_html .header {
background-color: #890;
}
Hope that helps with your learning?
Cheers
Mary