Skip Navigation

[Resolved] using CSS to format loop items

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

Problem:
How to format the container block to add the border.

Solution:
The border is set from the container block. Please check the following image:
=> https://nimb.ws/Hx6IQY

You can find the proposed solution, in this case with the following reply:
https://toolset.com/forums/topic/using-css-to-format-loop-items/#post-1608113

Relevant Documentation:
Advanced Styling with Container Blocks

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

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10: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/Kolkata (GMT+05:30)

This topic contains 10 replies, has 2 voices.

Last updated by perryA 3 years, 11 months ago.

Assisted by: Minesh.

Author
Posts
#1606007

Tell us what you are trying to do? Just apply basic formatting to text in the loop

Is there any documentation that you are following?

Is there a similar example that we can see?

What is the link to your site?hidden link

#1606821

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Can you please share a brief description of your issue to what text you want to apply what CSS?

#1607069

So in the view I've created for the COMMERCIAL PROJECTS page...

I'd like to turn the individual posts into "cards" so there is a 1 pt border around each project, reformat the heading, make the description type smaller and a text button that says "See more". But I can't even modify the name of the Project title (currently set to H3). I wrapped the WPV-POST-LINK in an H3 tag with a class -- but the class has no effect (in the CSS I set it to change the color of the type).

I need help in getting selectors to work.
1) How do I target type to reformat in the view?
2) How do I target the individual posts in that view to format them (add a 1pt border, add padding, format the text a bit)?

I can share my login info if you send me a private info submission form--

Thanks,
Perry

#1607071

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Yes sure. Can you please share access details.

Also, please share a screenshot what fields you want to target and what CSS you want to apply.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

#1608039

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

I am not sure if you are aware about Toolset blocks.

If you use blocks, you can design your view visually and it offers lots of blocks design attributes using which you can design your block view without adding any shortcodes.
Please check the test block view I've created:
=> hidden link

And how it looks on the frontend.
=> hidden link

More info:
=> https://toolset.com/documentation/user-guides/gutenberg/
=> https://toolset.com/documentation/user-guides/gutenberg/container-blocks/

More info with videos:
=> https://toolset.com/2019/12/learn-how-to-build-templates-archives-and-views-with-blocks/
=> https://toolset.com/2020/04/create-dynamic-testimonials-in-wordpress/

#1608109

Yes -- the block editor helps a lot! A few issues:

I've been modifying the Commercial Projects Page content template--
1) I added a "single field" block to display the excerpt text for the post -- but it look like it sets the line height of the text to 0 (even when the setting are set to 1.5 or higher
2) When I preview the content on the page (hidden link), there is an orange border around the post. How do I get rid of it?

#1608113

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

1) I added a "single field" block to display the excerpt text for the post -- but it look like it sets the line height of the text to 0 (even when the setting are set to 1.5 or higher
==>
I've set the line-height to 1.5 em and I can see its working (the output set to raw of the single field)

2) When I preview the content on the page (hidden link), there is an orange border around the post. How do I get rid of it?
==>
The border is set from the container block. Please check the following image:
=> hidden link

Additionally, I can see there are few previous tickets also still open. please close the ones which need to be closed 🙂

#1608157
Screen Shot 2020-05-01 at 8.28.39 AM.png

So the border I set with the container per your instructions is the thin gray rule around the box. I can't figure out where the orange line is coming from? See screen cap

#1608171

Minesh -- you guys might want to change your evaluation when tickets close. it rates the difficulty of the problem for me to solve from 1 to 5 -- well if I had to go to tech support it was pretty hard for me to solve. Does that mean was it easy to solve after I recieved tech support?

#1608173

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Ass, that border was added by adding custom CSS. I removed that and I can see now the thin gray border 🙂

#1608175

My issue is resolved now. Thank you!

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.