Need a help for customizing some elements of kanboard

Yazan · November 20, 2019, 8:41pm

Dear All,
Greetings…

I am glad to join this community and also to be a user in the git hub to begin learning (and hopefully contributing) once I acquire the enough experience.

I suggested recently the use of Kanboard in the company where I work, and they accepted that but with some small modifications that I am trying to do from tree days (reading all the documentation about hooks, attaching, template overriding…etc) and the only thing I could do is to change the app logo by using the theme-plus plugin (https://github.com/phsteffen/kanboard-themeplus), but no way to release (or at least to discover from where I can begin) all these modifications that I am describing for you in the attached image.

It is really urgent for me, and I am not asking you to make the changes for me, what I need is to learn in witch sections of the code I have to focus and witch php files or css files I need to add, also to know if using a plugin is really a good Idea or if it is better to change a files in the core (I know it sound strange, but what shall I do?)… I have only a very small knowledge in CSS style sheets but a decent php knowledge , anyway I am not trying to change all the theme of the app, so hope i can get to do them without the need of being an expert in css style sheets. The image is self-explained, hope I can find a fast help here since they may reject the idea if i cannot apply the changes.

Any ideas?

Sorry for my poor English…

Thanks a lot!..

creecros · November 21, 2019, 1:06am

Customizer plugin can do a few of those for you.

For what it cant do, use css, or take a look at the corresponding templates in the template folder

Yazan · November 22, 2019, 9:06am

Thanks a lot creecros… Effectively, I installed Customizer and could upload the logo and the icon correctly, then after navigating into the folders of the plugin to see how it is doing the things, I could manage to use one of its css files to create my own (since I have no experience in css), then in collaboration with the navigator element inspector’s tool I think I will be able to complete the requirements that are related to the colors and the fonts (css related) as you can see in the capture below. The only thing that remains difficult for me is how to remove the list menu and also replace the overview with the “my dashboard” menu. Hope anybody can help with that.
Thank you…

creecros · November 24, 2019, 2:24pm

To remove the List:

Override this template:

github.com

kanboard/kanboard/blob/master/app/Template/project_header/views.php

<ul class="views">
    
    <?= $this->hook->render('template:project-header:view-switcher-before-project-overview', array('project' => $project, 'filters' => $filters)) ?>

    <li <?= $this->app->checkMenuSelection('ProjectOverviewController') ?>>
        <?= $this->url->icon('eye', t('Overview'), 'ProjectOverviewController', 'show', array('project_id' => $project['id'], 'search' => $filters['search']), false, 'view-overview', t('Keyboard shortcut: "%s"', 'v o')) ?>
    </li>

    <?= $this->hook->render('template:project-header:view-switcher-before-board-view', array('project' => $project, 'filters' => $filters)) ?>

    <li <?= $this->app->checkMenuSelection('BoardViewController') ?>>
        <?= $this->url->icon('th', t('Board'), 'BoardViewController', 'show', array('project_id' => $project['id'], 'search' => $filters['search']), false, 'view-board', t('Keyboard shortcut: "%s"', 'v b')) ?>
    </li>

    <?= $this->hook->render('template:project-header:view-switcher-before-task-list', array('project' => $project, 'filters' => $filters)) ?>

    <li <?= $this->app->checkMenuSelection('TaskListController') ?>>
        <?= $this->url->icon('list', t('List'), 'TaskListController', 'show', array('project_id' => $project['id'], 'search' => $filters['search']), false, 'view-listing', t('Keyboard shortcut: "%s"', 'v l')) ?>
    </li>

This file has been truncated. show original

Remove the List, lines 17-19

To replace the Overview with My dashboard:

Remove lines 5-6, and hook the template for the dropdown, https://github.com/kanboard/kanboard/blob/master/app/Template/project_header/dropdown.php to one of the hooks, i.e. template:project-header:view-switcher-before-board-view.

If I have to explain further, I may as well just do it.

Yazan · December 9, 2019, 9:29am

Thanks a lot creecros, that worked for me…
Will invistigate how to improve the colors with more ‘brillant’ ones…
Thank you again…

Topic		Replies	Views
Adding a theme switcher Feature Requests	2	1878	April 5, 2020
Customised login page	4	2284	March 29, 2019
Avatars With Kanboard CSS Plugins	7	890	November 1, 2019
Usability of Kanboard UI	28	4963	January 6, 2023
Customizer plugin doesn't work correctly Plugins	3	73	June 21, 2024

Need a help for customizing some elements of kanboard

Related topics