Creating custom views layout with sidebar and top filtering

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

Problem:

Setup grid layout manually.

Solution:

It needs custom CSS codes, see detail here:

https://toolset.com/forums/topic/creating-custom-views-layout-with-sidebar-and-top-filtering/#post-2134589

Relevant Documentation:

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.

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 4 replies, has 3 voices.

Last updated by Luigi Bella 3 years, 5 months ago.

Assisted by: Luo Yang.

Author

Posts

August 5, 2021 at 2:12 am #2134207

Luigi Bella

Screen Shot 2021-08-04 at 3.54.55 PM.png

Here is a page where I have a view with a post category being displayed: hidden link

I need to keep the overhead search bar and add some filters to a sidebar as well. Both would AJAX refresh the results.
Functionality should be similar to the View I have on this page: hidden link, but the layout needs to be like the attached screenshot.

Any help you can provide would be greatly appreciated!

August 5, 2021 at 9:35 am #2134589

Nigel

Supporter

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

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

Hi Luigi

A View outputs all of the markup for the filter section together, and then all of the markup for the results together.

It's not possible to output some of the filter section markup, then the results markup, then the remainder of the filter section markup.

If you are using the legacy Views editor (rather than blocks) then you have quite a lot of control over the markup, and you should be able to combine that with CSS to achieve the result you are looking for.

I think named template areas using CSS grid would be a good option, because you can set up a layout which is respected regardless of the order of the markup.

See this page for a description: hidden link, and in particular note the example given in the section "Naming a grid area".

I reproduce the demo here: hidden link

Note how I have shuffled around the order of the markup, with the content coming first and the footer before the header, but because of the CSS the result still appears in the expected layout.

August 5, 2021 at 11:16 pm #2135189

Luigi Bella

Thank you for your help! I don't have experience with CSS Grid prior to this and I seem to be doing something wrong, here is the URL: hidden link
And a page with just the View: hidden link

Can I get you access to take a look at the View on the backend?

August 6, 2021 at 8:09 am #2135441

Luo Yang

Hello,

According to our support policy, we don't provide custom codes support:
https://toolset.com/toolset-support-policy/

If you need more assistance for it, please provide a test site with the same problem, also point out the problem page URL + view URL, we can try to setup a demo in your website mentioned above

August 7, 2021 at 6:26 am #2136145

Luigi Bella

My issue is resolved now. Thank you!