Thank you! I finally got it. Problem #1 solved. I still have 8 problems to go(!).
The next problem - the design changes when the slider moves.
I designed what the slider should look like in Beaver Builder, but the design looks different when the slider moves:
hidden link
See the attached images.
Is there a way for the slide to retain its design when it slides?
Hi, if the slider uses AJAX to update, problem relates to page builders which use shortcodes or similar means to perform their magic and how this functionality is registered (which is, naturally, outside of our control).
Visual Composer shortcodes, for example, are registered on page load. When you use Views to update the page using ajax, the registration of the page builder shortcodes is lost and so the updated content prints the unparsed shortcodes to the page. The shortcodes need to be re-registered, but they are only registered on page load, which means that the page must be reloaded for them to work and updating the content with ajax fails to render correctly.
Any other plugin which updates the content area via ajax would be in a similar position of losing the page builder formatting.
There may be an internal function which can be used to re-initialise Beaver Builder on the page after an ajax update—you would have to ask Beaver Builder for details—and if so we could trigger when the page is updated with ajax after pagination or a custom search filter is changed.
Otherwise, the best approach here is to use basic HTML and CSS to design each "page" of results, so that no special functions are required to apply those styles to each page. You could do this by copying the markup generated for one element in the first page of results, and applying that markup to the loop template.
Thanks, how do I copy the markup generated for one element in the first page of results, and apply that markup to the loop template?
It's an advanced technique that involves getting the relevant pieces of code from the browser inspector. Someone with knowledge of HTML and CSS may be able to analyze the generated HTML and CSS, then transpose it into the loop template, replacing text, images and other markup with Toolset's shortcodes. Some relevant documentation:
https://developers.google.com/web/tools/chrome-devtools/
https://toolset.com/documentation/customizing-sites-using-php/functions/
https://toolset.com/documentation/user-guides/views-shortcodes/
OK, I'm starting to figure this out. It is very difficult for me.
I created a new slider that looks very basic.
Where do I edit the CSS - in the Loop Editor or in the "Templates for this View" section?
You can do it in either place, with more or less the same results. If you apply it in the Loop Editor, the CSS will be inserted in the page automatically whenever this View is shown. If you apply it in the Templates for this View section, the CSS will be inserted in the page automatically whenever this Content Template is shown - which could be other areas outside the current View.
Thank you, I'm making progress.
How do you make all the columns in the slider to have equal height?
One way is to assign a fixed height to all the boxes, like 250px. Then all the boxes will be the same size. You must also anticipate what happens when the content is very long, because when you set a fixed height the content may spill out of the box if you don't accommodate those cases. Text overflow, text wrap, and white-space can all be managed with CSS to create truncated text:
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
Thank you.
I have 3-4 problems left.
Now I would like to create pagination arrows like the ones I created previously with Beaver Themer.
They can be found here:
hidden link
Attached is a screenshot as well.
How can I do this?
Thanks.
Let's address your additional concerns in separate tickets. Thanks for helping us keep the forum organized!
My issue is resolved now. Thank you!
