Skip Navigation

[Resolved] How to style the custom search form in Blocks editor

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

This thread was about styling Toolset elements. In the meantime, we published a full training course about designing WordPress sites. Check it out to learn how to style Toolset elements and your whole site.

This support ticket is created 4 years, 4 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
- 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 18 replies, has 3 voices.

Last updated by jamesW-26 4 years, 4 months ago.

Assisted by: Minesh.

Author
Posts
#1706321

Thanks Luo,

It's getting there ...

I'm able to display the full content of each post, however I have some questions that are not covered in the lesson document you linked above ...

1. How do I control the width of the drop-down selector? Do I need to use columns to do this or is there some other way?

2. How do I put the label for the drop-down selector on the left (instead of above) of the dropdown?

3. How do I get it to show just one post when it loads? Obviously once you've selected one in the dropdown, it shows only that post, which is good. But I need it to only show 1 post when it loads. Is there some way to set it to the first post in the list?

4. How do I get it to display on this page? hidden link Is there some way to create a "View" or something and use the Toolset Views widget in Elementor to display it?

Thanks,
James

#1706347
enable-pagination.JPG

Dear James,

Q1) Yes, you are right, you can use Toolset Grid block to style and format the custom search form, see our document:
https://toolset.com/course-lesson/responsive-columns-and-grids/

Q2) Same as above, you can create a grid block, with two column, display the label in the left, and input box in the right column

Q3) The Toolset WordPress Archive is using default pagination option setting from WordPress, you can see it here:
Dashboard-> Settings-> Reading, in section "Blog pages show at most", your website setting is 10
And you can set different pagination settings for each Toolset WordPress Archive, for example, edit the WordPress Archive
hidden link
select block "WordPress Archive", then you can enable pagination in the side bar, see screenshot enable-pagination.JPG, then you can set the different settings here

Q4) Since Toolset Blocks plugin is based on WordPress blocks editor, and both Elementor and WordPress blocks editor are page builders, it is not recommended to use them both to design the same page/post, in this case, you can create a post view with classic editor, then put this post view into Elementor editor, for example:
1) Dashboard-> Toolset-> Settings, in section "Editing experience", enable option "Show both the legacy and Blocks interface and let me choose which to use for each item I build"
2) Dashboard-> Toolset-> Views, create a new post view, the UI will be different, but the steps are similar,
3) Then follow our document to display above post view into Elementor editor:
https://toolset.com/2018/07/toolset-elementor-integration/

#1707339

Hi Luo,

I have some questions about your answers ...

1. Using columns is quite limiting, is there no other way to control the width of the dropdown? Custom CSS maybe? If so, where is the best place to put the css?

2. You've confirmed that it can be done, but you didn't explain HOW to put the label on the left of the dropdown. Creating a grid doesn't do anything. The label still sits on top of the dropdown.

3. Using this pagination option seems to work, although I have two problems ... A. The field "Label for the first 'default' option" cuts off part of what I've entered, and B. There is pagination at the bottom of the page which I do not want.

4. Are you saying that I now need to totally recreate what we've done in a View? If so, then we need to go back to the start and I need your help in building it. The interface is totally different and you have not provided any instructions on how to do it. I am fine with the integration with Elementor, but need help to build the View.

James

#1707547
label.JPG
custom-css.JPG

Q1) You can add your custom CSS codes in "Custom CSS" input box, see screenshot custom-css.JPG

Q2) As I mentioned above:
https://toolset.com/forums/topic/how-to-style-the-custom-search-form-in-blocks-editor/#post-1706347

you can create a grid block, with two column, display the label in the left, and input box in the right column

And I have setup a demo in your website:
hidden link

See screenshot label.JPG

Q3) I have setup a demo view here:
hidden link

And a demo page here:
hidden link

For your reference.

#1709867

Hi Luo,

So I have gone to the new blocks editor demo you have created, added the Post content (body) as a single field, however it removes the formatting of the page.

The formatting works fine in the other one we were working on: hidden link

But not on this new one: hidden link

Also, the new one shows all posts when the page loads, it should only be showing 1 post.

Thanks,
James

#1709905

I am not understand the questions:

Q1) In the problem page:
hidden link

It is displaying a post classic post view using Elementor editor, if you want to format/style the same result, you can try with Blocks Editor instead of Elementor editor, it is not recommended to use both page builders to design the same page/post, it will conducts unexpected conflicts.

See our document:
https://toolset.com/course-lesson/creating-a-view/

Q2) Also, the new one shows all posts when the page loads, it should only be showing 1 post.

I am not under the question, please open the URL you mentioned above:
hidden link

It is using option "All month", why do you want to display only one post, which post do you want to display?
Please elaborate the questions with more details, thanks

#1710029

Hi Luo,

This is getting a little frustrating. At the beginning, I sent you a link with a page on another website that did everything exactly as I needed it to be. It only showed 1 post at a time, the page was formatted, everything. All you needed to do was to look at it, work out how to achieve it with Toolset, and give me the info. I'm coming to you to provide answers and a recommendation on the best way to set things up. So I would appreciate if you knew whether or not they work before you suggest them.

To answer your last response ...

Q1) My point is that the formatting is fine on the first blocks editor you helped me create. Why would it not work on the new one? This seems to be a problem with Toolset software. Blocks does not seem to have the ability to style the content how we need it, this is why we used Elementor.

Q2) I covered this before at the top of this ticket. It should only ever show 1 month at a time. I do not want it too ever show all months, or to even have the option in the dropdown to show all months.

Thank you,
James

#1712251

Q1) Please have a look to those pages you mentioned above:
Archive page:
hidden link

This is designed with Toolset WordPress Archive:
hidden link
It is using Blocks Editor

page:
hidden link
You are using Elementor editor to design above page:
hidden link

Blocks editor and Elementor editor are different page builders, so it conducts the problem, you won't get same design.
As I mentioned above, you can try with Blocks Editor instead of Elementor editor

Q2) Can you answer my above question?
Open URL:
hidden link
It is using option "All month", and you are going to display one post, which post do you want to display, please provide the post URL, I need to test it, thanks

#1715673

Luo, both of those pages you put links to above are NOT created with Elementor. I created the first one as per your instruction using Blocks. You created the second one, also using Blocks. They are both pulling in posts which are created in Elementor. So why does this page format them correctly hidden link and this one doesn't hidden link ?

By the way, I'm not looking for an explanation from you. I just want you to fix it and make it work. If you can't, please pass this support ticket on to someone else who can. I'm beyond frustrated with how you are handling this.

James

#1715703

Please check your original questions:
https://toolset.com/forums/topic/how-to-style-the-custom-search-form-in-blocks-editor/#post-1706321

Q4) You are asking for: use the Toolset Views widget in Elementor
So I setup a demo for you with Elementor page builders.

And it conducts the problem: the format of those two pages are differently.
In order to get the same format, You will need to create a page, and design it with block editor by following the document I mentioned above:
https://toolset.com/course-lesson/creating-a-view/

And I have create a new page with demo for your reference:
hidden link

Please let me know if you still need assistance from other supporters.

#1715713

No Luo, this is my original question ...
---
Set up a page with functionality like on here: hidden link

I can set up a custom post type with a post for each month. I'm just not sure how to build a page to display them on with a drop-down selector.
---
https://toolset.com/forums/topic/set-up-dynamic-page-with-drop-down/

I did not set up anything. I asked for advice and help on the best way to build it.

#1715727

I did copy the text from your own post.
https://toolset.com/forums/topic/how-to-style-the-custom-search-form-in-blocks-editor/#post-1706321

According to our support policy, we prefer one question one ticket:
https://toolset.com/toolset-support-policy/
So I have to create this ticket for the new questions.

Please let me know if you still need assistance for it. thanks

#1715729

You never finished on the first ticket!

This is bullshit.

Please pass this on to another support person who can actually help.

#1715769

Minesh
Supporter

Languages: English (English )

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

Hi James - this is Minesh here, Luo asked me to help with this ticket further. I hope this is OK.

The thing was that, the following View that is created by Luo is created using Classic View but building the loop output using the blocks.
=> hidden link

I've created another test page where I've created the view "show-key-dates-with-filter" using Blocks and added the post body filed using single field block within view's loop and search filter for your taxonomy at top with the following page and I can see the styling is working as expected.
=> hidden link

#1715815

Thank you very much Minesh,

The only thing that needs tweaking now is to have it only show 1 post when the page first loads.

Thank you,
James