[Resolved] Style views – HELP

[Author]

Posts

[blessingO]

I am struggling with the view section. I have successfully set up my taxonomies and all the custom fields. I can successfully and dynamically show them on the front end.

However, my BIGGEST problem is how to show it beautifully. My images are too big and their sizes cannot be made consistent using toolset, the loop is showing differently as I want them to show. I want a horizontal/rectangular style - i.e. unformatted style - see photo.

I have attached an example of how it should be from another site. I want the logo on the left and the custom fields/title in the middle, and an 'apply' button on the right. Why is this so difficult to do?

This is the page currently hidden link

I am so tired.

Please help me.

[Luo Yang]

Hello,

I suggest you try these:
1) In views loop, display a Toolset grid block with three columns:
https://toolset.com/block-item/grid/
https://toolset.com/course-lesson/responsive-columns-and-grids/

2) In above grid block
insert the a Toolset image block for logo field:
https://toolset.com/block-item/image/
And you can customize the image size to what you want
For other post fields, please try the Toolset single field block:
https://toolset.com/block-item/single-field/

If you need more assistance for it, please provide a test site with the same problem, fill below private message box with website login details, I can setup a demo for you

[Luo Yang]

I have tried the Staging site you provided above, but get below error:
Error 526
Invalid SSL certificate

So can not login into your website, for the screenshot you mentioned above:
https://toolset.com/wp-content/uploads/2022/02/2300853-Screenshot_2022_02_23_at_10.55.37.png
It seems that you are going to add CSS style to each item, if it is, you can try Toolset container block, see our document:
https://toolset.com/course-lesson/container-blocks/

For example, in the view's loop, add a container block, style it as what you want, in this container block, add the grid block, and format as it what you want.

[blessingO]

The login details are correct.

Please login without the https protocol.

Thank you!

[Luo Yang]

I have done below modifications in your website:
Edit the page "Views", in view's loop, add a Toolset container block, and put the grid block into the container block, add "Box Shadow" into container block, see my screenshot container-block-style.JPG

It is only a demo for your reference, you can follow the document I mentioned above to style the container block:
https://toolset.com/course-lesson/container-blocks/

[blessingO]

Thanks, that helped.

Now, my loops are breaking my footer on the front end.

Why is this happening? - see attached.

[Luo Yang]

I have checked it again with my chrome browser, it works fine, see my screenshot loop3.JPG

Is this problem resolved? and it might be a cache issue, please try to clear your browser cache and test again

[blessingO]

No, sorry, it's the archive pages that are causing my footer to break. See these two archive taxonomy pages for example:
hidden link
hidden link

Also, there is a problem here, someone has just identified a possible issue, see this code below from my website:
<div class="post-grid bb-masonry" style="visibility: visible; position: relative; height: 0px;">

The height:0px may be causing the problem, I am not sure but the problem is certainly coming from toolset and its inline style.

Please help.

[Luo Yang]

I have checked it in your staging website:
hidden link
hidden link

But don't see the similar issue, can you reproduce the same problem in above staging website?

[blessingO]

I have created a new staging site for you.

Staging site login: staging.studyoverseas.net (please try both HTTP and HTTPS)
Username: studyoverseas
Password: studyoverseas

WP Admin:
Username: toolset
Password: toolset-2022

Also, I appreciate that we are in two different time zones, but this ticket is moving too slow. I would say maybe it can be prioritised so that we quickly get it done and you can move on with other clients.

[Luo Yang]

It is a CSS conflict, you can use CSS codes to override it, for example, edit the WordPress Archive "Scholarships Archive", in section "Custom CSS", add below codes:

.bb-masonry{
height:auto !important;
}

Test it in frontend:
hidden link
It works fine.

[blessingO]

Thanks, but I don't understand what you want me to do.

Do you have a solution and if you have a solution, what do I need to do?

My theme has a CSS code section where I can add CSS codes. What do I need to input in this CSS section?

[Luo Yang]

You can follow our document to add CSS codes into WordPress Archive:
https://toolset.com/course-lesson/adding-custom-css-to-templates-archives-and-views/#steps-for-adding-css-to-a-wordpress-archive
section "Steps for adding CSS to a WordPress Archive"

[blessingO]

I have many toolset archives so I have added the CSS globally.

However, the CSS broke my blog page (it had no issues before I added the CSS) - see attached hidden link

Do you not have any CSS solution that can apply globally without breaking other CPTs?

[Luo Yang]

Since it is a CSS conflict with your theme, it is not recommended to add the CSS globally, I suggest you setup it in each Toolset WordPress Archive to avoid more unexpected issues.