Card custom layout in expanded board view

Hi, Just wondering if someone could point me in right direction.

I’m trying to change card layout in expanded board view.
It seems bit troublesome to have overview of many cards on small screens, it requires lots of scrolling.
Compact view its fantastic for seeing more cards, but also limits information displayed.

I’m trying to achieve something middle of road… ie Compact ish card in expanded view.
Here is example of standard card…
standard card

And here is possible idea of layout I’m looking after
smaller card

btw… I have already removed task_id and assigne_name
there is also some customization of whats is displayed in BoardCustomizer Plugin … but I’m more after re-positioning items… especially footer.

Any advise , perhaps info about which files/ templates need to be modified would be great…
Although this is new world to me I would love to spend some time learning and tweaking this great software.
Many thanks.

2 Likes

Are you trying to do this via plugin or pure css?

Hi BlueTeck,

Eventually would love to do it as plugin, however don’t yet have enough understanding how to even start plugin development…

At the moment I’m only tinkering (and learning) code in template files (that’s how I removed task Id and assignee name… - thanks to other forum posts )

Don’t really understand yet whole Kanboard structure of files etc … or even code, its bit of guess work for me… my programming skill is limited to Delphi which I last used few years ago. However I’m willing to learn …and get back to coding.

What would you recommend to get myself upto speed? :stuck_out_tongue:

Anyway going back to custom card layout…
I was think initially to modify templates. (as it seems most likely for me to succeed ) Hopefully anyway :smiley:

Many thanks

There is a old example plugin: https://github.com/kanboard/plugin-example-theme

Maybe this is a good start. In the plugin.php file is defined, what the plugin does.

With $this->template->setTemplateOverride('header', 'theme:layout/header'); the original Kanboard template/header.php is replaced with the layout/header.php in the sample plugin. So you don’t have the change the core files, you could replace them via additional files in your plugin folder.

And take a look in the plugin development section in the does.

Here is the part with template overrides https://docs.kanboard.org/en/latest/plugins/overrides.html#template-overrides

2 Likes

Thank you BlueTeck!

Your message was really helpful as I have managed to apply previous changes in form of plugin… instead of changing core files.
Also had some progress in trying to achieve custom layout.
However not entirely yet sure what I’m doing as although it seems to work I don’t know how to control formatting… I believe I have broken some ccs part of it. Excuse my ignorance…

Here is what I got so far:
1st attempt

I’ve used template override for
/board/task_private.php
/board/task_footer.php

Essentially in task_private.php under expanded view I’m only calling footer and avatar.
task_footer.php now also renders dropdown and edit as well as Task title and everything else.

I’m not able yet to remove Task title "large bottom margin / spacing…
and as per image above… all sections are together with same formatting… ie Category is no longer aligned to right etc (also task-board-icons are no longer grey and small)

Only way I so far found to group sections together (like tags , date, category) was by using:
<div style=“display:inline-block”…
which I believe is responsible for messing up formatting… I’n not sure though.
Anyway thanks again… would much appreciate any new pointers if you find spare minute.
Cheers!

1 Like

Just a word of encouragement to say that if you were to release this as a plugin, I, and possibly quite a few others, would be interested in using it :slight_smile: being able to compact card elements (especially tags, categories, etc.) into a single row is one of the limitations of what I couldn’t do with simple “custom CSS” rules… so I’ll be keeping an eye on this thread!

1 Like

Thanks nekohayo for encouragement ! :smiley:

Yeah sure hopefully I will get it to stage when its good enough for public release (thats if/when I learn how to release plugin :stuck_out_tongue_winking_eye: )
Even If I wont be able to achieve this I can always share my changes so you can apply those yourself.
tbh if you don’t mind fact that Category and due date are not always in same place, this already seem like decent improvement. (I mean if there is no tag/ date Category will be aligned to left - ie not all card look same )

Anyway on other note I have noticed slight nuisance having cards “semi-compacted” : there seems to be a lot tool tips appearing erratically … Initially assumed it was down to my code changes but later found out its just default behaviour… after quick forum search I coincidentally found your post about side bar to eliminate unpredictable tool tips behaviour… I got to agree that would be way better solution as it would also show all info on side bar even with compacted board view…

all this made me question my custom view idea but same time I don’t think I will be using lots of field with tooltips so I might be able to live with it… this may not be case for others though.

OK I’ve done some progress with custom view…
As I wasn’t able to keep nice look/ formatting in my original concept I tried to go further and actually do some sort if auto - resize view…
I reordered items based of my use starting with category (which mostly will be present)

This approach ain’t pretty and quite “busy” but it seems to compact cards to quite good degree… Especially when used with BlueTeck BoardCustomizer plugin…

Here is example of few cards on board with 6 columns. Card size is related to amount of information on card:

Here is example with some of items removed using BoardCustomizer plugin.

auto-size with BoardCustomizer

I’m finding difficult to tweak formatting … (I cannot find Date formatting ) I hopefully will be able to improve it a little bit…

Main drawback with this idea: information isn’t fixed to same position… cards can be bit confusing ( perhaps this will not bother me too much… dont know yet)
I guess it may work well with board containing less columns.
Whats your thoughts? thanks

update:
with BlueTeck material design it looks not too bad

auto-size with BoardCustomizer material design

here with 5 columns

auto-size with BoardCustomizer material design  5 columns

I think that last one (“here with 5 columns”) looks really good.

Hey don’t suppose this went anywhere? I find the default card layout is extremely wasteful in terms of space utilisation and also doesn’t show task description. I’d love to change it!

Not sure, but I also just recently made a compact layout:

I had to add a couple of hooks to Kanboard in order to do it cleanly (no hard coding positions in css, elements adapt properly)

My code is not yet fully cleaned up, but I plan to submit a pull request to kanboard for the extra hooks and divs that I added.

Dear Jieiku
do you have any update on you custom layour of card. secondly can you please share details of your files and which files to be replaced.
Asim