Hello,
You can do this with ease by using a CSS selector. For example, the forum that this thread is in has the ID 2657. You can then do this:
body[data-page-identifier="com.woltlab.wbb.Board"][data-board-id="2657"] .wbbThreadList {
background-color: red;
}It looks awful with the red color, but you should get the idea 
Hi Alexander,
Thanks for your help with this. Is it possible using CSS to get the thread list to look like this?
To some degree yes, but you would still be facing the issue to create data out of thin air. Both the image and teaser text is something you don‘t have on the thread list, everything else could be achieved with some clever use of CSS grids and display: contents. But without the image and teaser text there is little point in making the changes, because these kind of visualizations really depends on those.
To some degree yes, but you would still be facing the issue to create data out of thin air. Both the image and teaser text is something you don‘t have on the thread list, everything else could be achieved with some clever use of CSS grids and display: contents. But without the image and teaser text there is little point in making the changes, because these kind of visualizations really depends on those.
Could you use the attachment image from the first thread?
This data is not readily available and requires extra PHP logic to load/evaluate the attachments and to pick the first image, including exposing that data to the template. The same goes for an excerpt from the first post: It‘s possible, but needs both extra PHP code and template code to make that data available.
This data is not readily available and requires extra PHP logic to load/evaluate the attachments and to pick the first image, including exposing that data to the template. The same goes for an excerpt from the first post: It‘s possible, but needs both extra PHP code and template code to make that data available.
Thanks for that insight.
So I could theoretically use conditional logic in the template to say "if forum is x then use this code else use normal template code" to get around not being able to assign custom templates to single threadlist. Furthermore, I could then, in my custom template code, use php code to call the teaser/attachment image to display in the threadlist?
This really isn't a huge project I'm pushing for at the moment. I'm more worried about getting my custom pages completed before I work on this. However; it's nice to have a roadmap when working.
Yes, it is possible. In fact, you do not even need a custom template (this should always be the last resort), because there are per-thread template events that you can use. Look for the {event name='…'} slots in the templates which can be accessed through template listeners.
Combined with a PHP event listener you would then be able to provide the required data for the template listener.
Finally, the CSS: Once everything is available in the template, all you need is a clever use of display: grid (place elements within the thread “box”) and display: contents (allows you to get rid of wrapper elements, needed for the grid to work). If you are new to CSS grids there will be some kind of a learning curve involved, but once you wrap your head around it, you will be amazed of what kind of powerful tool you suddenly have at hand.
Bonus points for this: Not a single template needs to be modified to get this done.
Yes, it is possible. In fact, you do not even need a custom template (this should always be the last resort), because there are per-thread template events that you can use. Look for the {event name='…'} slots in the templates which can be accessed through template listeners.
Once again. Thanks for your help with this. I would honestly prefer not to edit any templates because it can become messy and inflexible. I saw in the doc an xml file that seemed to want to inject some custom javascript. Are the xml files part of an actual plugin that needs to be written or can the template listeners be used alone and not part of a plugin?
Finally, the CSS: Once everything is available in the template, all you need is a clever use of display: grid (place elements within the thread “box”) and display: contents (allows you to get rid of wrapper elements, needed for the grid to work). If you are new to CSS grids there will be some kind of a learning curve involved, but once you wrap your head around it, you will be amazed of what kind of powerful tool you suddenly have at hand.
I'm familiar with css grids and actually love them. However; there are so many out there (bootstrap being the most famous). More recently I've been trying to wrap my head around the use of flex boxes and I think they're very clever.
Are the xml files part of an actual plugin that needs to be written or can the template listeners be used alone and not part of a plugin?
Those are always part of an actual plugin. But even plugins are anything but complicated, we have a tutorial series in the manual and newer versions of WoltLab Suite ship with integrated developer tools. These allow you to create packages and XML-PIPs through a user-friendly GUI.
I'm familiar with css grids and actually love them. However; there are so many out there (bootstrap being the most famous). More recently I've been trying to wrap my head around the use of flex boxes and I think they're very clever.
Hah. No. Those CSS grids you are referring to are inflexible garbage in comparison. They are ready-made CSS and HTML snippets, but as the name suggest, they introduce a lot of noise into your HTML. In fact, they are basically glorified tables.
I‘m talking about display: grid which is a relatively new feature of CSS. And if you think that flex box is clever, then you will really appreciate CSS grids. It‘s flex box on steroids
Hah. No. Those CSS grids you are referring to are inflexible garbage in comparison. They a ready-made CSS and HTML snippets, but as the name suggest, they introduce a lot of noise into your HTML. In fact, they are basically glorified tables.
I‘m talking about display: grid which is a relatively new feature of CSS. And if you think that flex box is clever, then you will really appreciate CSS grids. It‘s flex box on steroids
Oh nice. I will take a read into it.
Thanks again for all your insight. I will have a lot to read up on in order to accomplish this. I think I'll focus on the CSS grid for now so I can get my custom pages completed first.
Don’t have an account yet? Register yourself now and be a part of our community!
