Skip Navigation

[Resolved] Plz Explain [data-toolset-blocks-container=”long string of letters & numbers”]

This thread is resolved. Here is a description of the problem and solution.

Problem:

Style container block with custom CSS class names.

Solution:

You can edit the page/post, find and select the "Container block", in the sidebar, section "ID & Classes", setup your custom CSS class names, see my screenshot:

https://toolset.com/wp-content/uploads/2021/04/2014395-container_block_css.jpg

Then use those custom CSS class names to setup your custom CSS codes.

Relevant Documentation:

This support ticket is created 3 years, 7 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.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 5 replies, has 2 voices.

Last updated by chrisL-13 3 years, 7 months ago.

Assisted by: Luo Yang.

Author
Posts
#2013595

>>Tell us what you are trying to do?

I need to add CSS to various elements of my site created using Toolset blocks that I cannot add within the user interface. I looked at the page source and saw that all the views and most blocks have these sorts of identifiers [data-toolset-blocks-container="0c2cf8955b886a2e34d0273e89a587b5"] ...which seemed to me like unique identifiers that I can use to hang CSS declarations on, like
div.data-toolset-blocks-container[data-toolset-blocks-container="0c2cf8955b886a2e34d0273e89a587b5"] {border: 6px dotted pink]

...but I'm now seeing that some of these identifiers are appearing on at least two different elements, so my single-use CSS declarations are getting applied in another place. Which is not what I want.

What are these identifiers? Are they supposed to be unique? If not, how are they generated and applied to toolset page/template elements?

What is the link to your site?

hidden link

#2014395
container-block-css.JPG

Hello,

The "data-toolset-blocks-container" attribute is for admin side(react) usage, you can not use it to style the container block.

In your case, please edit the page/post, find and select the "Container block", in the sidebar, section "ID & Classes", setup your custom CSS class names, see my screenshot: container-block-css.JPG

Then use those custom CSS class names to setup your custom CSS codes.

#2014779

Thanks for the reply.

I'm glad for the clarification though I now have some work to do 😉

I also note that views are wrapped in div tags with unique id attributes eg: <div id="wpv-view-layout-614" class="[long list of stuff]">

Can I use those id attributes to write CSS declarations eg: div#wpv-view-layout-614 {border: 1px solid #ccc}?

cmkl

#2015511

Yes, you can use that id attributes to write CSS codes

#2015875

My issue is resolved now. Thank you!

#2026699

Actually, I am discovering much to my horror that Toolset renumbers the views it inserts into the div id="wpv-view-layout-614" tags that surround the content. I thought you said they were safe.