Skip Navigation

[Resolved] Traffic-Light-System #2

This support ticket is created 6 years, 6 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.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 1 reply, has 2 voices.

Last updated by Nigel 6 years, 6 months ago.

Assisted by: Nigel.

Author
Posts
#877692

Hi Nigel,
because the other thread is marked as resolved (https://toolset.com/forums/topic/need-a-special-view-using-a-traffic-light-system/#post-874090), I opened up this new thread.
Thanks to your explanation and this video hidden link I now have a basic understanding how Toolset works.
My client asked, if it is possible to display the events like in this Template: hidden link
Just scroll a little bit to the "Upcoming Events". He asked if it is possiblr to do it like this? The traffic-light should than be shows when you hover the image. Would that be possible with Toolset? I think I need CSS3 and JavaScript, right? I found some code snippes like this for the hover effects, but it's not the same als like in the Template: hidden link
I also found this: https://stackoverflow.com/questions/13769655/dynamic-image-overlay-with-jquery
So, from my knowledge that I now have from Toolset, if I want it to display as it is in th Template example, I should use the view plugin for displaying the events (in combination with a template??) and a content template to display a single event, If I click on an Event, right?
Thanks
Thorsten

#882719

Nigel
Supporter

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

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

Hi Thorsten

Sorry for the delay getting back to you, I've been on vacation.

You would make a Content Template to determine how to display single Event posts, yes.

You would create a View to generate a list of Event posts. The output section of the View specifies the HTML generated for the list of posts, and may include some wrapper markup applied to the whole list, as well as the markup which is repeated for each post during the iterations of the loop.

You can enter that markup for each iteration directly in between the wpv-loop tags in the Loop Output Editor, but it is commonplace to gather together the markup in a template. If you use the Loop Wizard you have the option to automatically create such a template, and it is linked to the View and displayed immediately after the Loop Output Editor for ease of use.

You will also find the template listed along with other Views templates at Toolset > Content Templates.

Now, Views will help generate the scaffold markup to output the list of posts in grids or tables or lists, but it doesn't concern itself much with the styling of the output.

So you certainly can output the Event posts in a grid with a hover effect that displays caption text (with a traffic light label, for example), which can be done just with CSS, no JS required.

I would suggest you use a tool such as codepen.io to work on your design to get a static version of the markup displaying how you want, and then the task becomes getting Views to output the markup in the desired format and copying across your custom CSS.

I can't help with the design, but if you have something working in something like codepen and need help reproducing it with Views then let me know, I can help with that.