[Resolved] using CSS to format loop items

[Author]

Posts

[perryA]

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

[Minesh]

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?

[perryA]

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

[Minesh]

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.

[Minesh]

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/

[perryA]

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?

[Minesh]

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 🙂

[perryA]

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

[perryA]

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?

[Minesh]

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

[perryA]

My issue is resolved now. Thank you!