When editing a block and Advanced → Custom CSS, the instructions say:
Custom CSS
Enter CSS rules without selector.
You can use this area to further customize your block.
To target the class of this block, use the .blockclass selector.
To target the ID of this block, use the #blockid selector.
Which is it? Do we enter the css rule with a selector or without one? This is confusingly worded.
Can someone provide a working example?
Thank you
You basically just replace it.
The advantage here is, that you can change the class or ID at any time without breaking your styling.
.blockclass {
color: red;
}
Of course you can also do more advanced stuff.
.blockclass.active > h2 {
color: red;
}
However, you can enter whatever you want, as far as I am aware, there are no restrictions. So if you want to type in the actual block ID or class, feel free to do so.
Thats’s strange - I tried that many many times and could not get my css to load on the front end.
Strange that the instructions say ‘enter CSS rules without selector’, as if to say that simply entering
color:red
would work. But it did not for me.
Entering
#div-c7c45be {color:red;}
or
.div-c7772a8 {color:red;}
also did not work
Regenerating CSS did not solve.
Did the changes reflect on back-end?
Could it be the case that you already set a style for this property inside the editor?
Well, it’s not wrong what it’s saying.
Do not type in a block selector, target your class or ID with the given universal selector.
It was hard to tell if the change was occurring on back-end due to the admin bar effecting the height. But in any case, on the front end my css was not being overridden. It was simply not there, even though I could handwrite in the same css using chrome dev tools and see the desired effect.
I must have been doing something wrong. Thanks for your suggestions.
Do you have a live site? So I could have a quick look if there are any issues.
Could you also post a snapshot of what you exactly typed inside the custom CSS area, just to double check that there are no errors.
I also do agree that the 1st line of the instruction could confuse people, in my opinion the first 2 lines are redundant and also do waste space, especially with the big margins.
Hi @webdev,
@Marius has said it all perfectly.
It is strange you were not seeing any changes, and that it wasn’t applied on the frontend. Definitely the first time this is reported. It would be great if you can reproduce this so that we see what’s going wrong.
Looking at this once again, the wording is confused and basically incorrect. Thanks for bringing it up.
I was attempting to reduce the height of my full screen modal by the height of the header so that the open modal sits exactly below the header and reaches to the bottom of the viewport. So in the custom CSS for the modal block I added this:
.modal-ca1784f {
height: calc( 100% - 56px);
}
I also tried the block ID to be more specific:
#modal-c5787c4 {
height: calc( 100% - 56px);
}
I attempted this before I discovered (and Marius confirmed) that I can simply type the calc into the Sizing setting for the modal. This latter approach achieved what I wanted.
However, repeating the same attempt today and adding the above code into the Custom CSS field again, I would expect to see it in Dev Tools, and see either this rule or the one entered via Sizing to be overruled (one overruling the other). But I only see the one from the Sizing field, which continues to work properly.
It doesn’t sound like anyone else is having issues with the Custom CSS field so it must be my environment or my syntax. I did regenerate CSS and remove/clear caching many times.
No issues at all on my side.
Here you can see where my custom CSS is added inside the Dev Tools.
Of course, also tested with the plain class .modal-cbca332
Btw. targeting the ID is not the correct way to go in this case.
The modal block contains various layers and there is a reason why there are quiet a few dedicated options inside the block options.
You need to be careful what you are doing with these kind of blocks, like modal, slider, etc.
I also would check the actual HTML structure on frontend first so I know exactly how to proceed.
Can you confirm, using the custom CSS area on a simple block, for instance a heading or a paragraph, is not working either?
