Skip Navigation

[Resolved] How to use correctly ID & CSS Classes on blocks

This support ticket is created 3 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 2 replies, has 2 voices.

Last updated by kai-peterW 3 years, 5 months ago.

Author
Posts
#2088317

How to use correclty IDs & CSS Classes with the block editor?
I do not find any detail instructions how to use this feature correctly.
ID: Do you have to insert an ID with or without the # (number sign)?
CSS Classes: Do you have to insert CSS Classes with the . (dot) or without?
On some views I cannot insert an ID and/or CSS Classes? Why?
Often the inserted CSS class is not shown in the browser code inspector. Why?
Sometimes only IDs are working and shown in the inspector. Why?
In some views I cannot set any IDs and Classes. Why?
Do I have to write the CSS rules in the view block Custom CSS window under Custom JS & CSS? Or can I write the custom CSS rules in a separate stylesheet file?
Do I have to write first the custom CSS and then select this class in CSS Classes? Or can I first write a CSS Class and afterwards write the CSS rules?

Are there more styling guides or manual to use CSS and IDs correctly with Toolset?

#2088331

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Screenshot 2021-06-14 at 12.14.52.png

Because you can add only one ID to an element it is a simple text box where you add the id. You don't use the # prefix, that syntax is used by CSS selectors, but the id is added as an HTML attribute (e.g. id="targetid").

Because you can add multiple classes, these work more like adding tags, you need to hit enter (or space, or comma) after each class is entered.

See the screenshot for how that looks.

Again, you do not use the dot prefix, that is part of the CSS selector syntax, the classes themselves are added as an HTML element attribute, e.g. class="classone classtwo".

Which means it doesn't matter where you add the CSS style rules, in an external stylesheet, or using an option to add custom CSS to the page (via Toolset or some 3rd party product).

If there are times it doesn't seem to be working for you, please share specific details of what you have added where for us to be able to check.

#2088367

Dear Nigel, thank you for your support. My issue is resolved for now.
I will test it more in detail and will come back to you if I encounter more problems on the issue.
Thank you!