AppStack Theme problems within the Dashboard

GHSix commented on Jan 27, 2023

I see two design problems:

1- Menu icons are misaligned:

--

2- When in Dark Mode, the texts of the graphics (D3) and the Panel's menu (on the right) are black and almost unreadable:

--

Sebastian Morales commented on Jan 30, 2023

1 . You can add the following CSS rule to your Dashboard's index.php to set fixed width for menu icons so that menu text are aligned:

<style>
a.sidebar-link i {
  width: 1rem !important; // change this to a width you want
}

</style>

2 . Pls inspect the chart text (e.g label text) you want to change color to see their DOM selector and add the followng CSS rule to your board:

class MyBoard extends \koolreport\dashboard\Dashboard
{

    protected function widgets()
    {
        return [
            Html::style("
                #{chart name/id} svg {DOM selector} text {
                    fill: white;
                }
            "), 
        ...

If you omit the DOM selector, all text in your chart will be white.

KoolReport commented on Jan 31, 2023

@GHSix: Thank you very much for letting us know this issue, we have sent this topic to dev.team for bug fixes and improvement for AppStack theme.

Added to first point of Sebastian, you may created your own css file and use css property of Application to register your css to dashboard.

Here is the link of Application properties

Thank you very much.

GHSix commented on Jan 31, 2023

The menu one that was hard on eyes for me is fixed.

App.php

protected function onCreated()
{
    $this->css('assets/css/dash.css');
}

dash.css

a.sidebar-link i {
    width: 1rem !important;
    text-align: center;
}

The other two, dropdown-item and chart text, are AppStack Theme css that is changed dynamically, so I hope it make into next version soom.

Thank you.

KoolReport's Forum

AppStack Theme problems within the Dashboard #2962

Build Your Excellent Data Report