Card Amazing - KoolReport

Victoria Rodriguez commented on Nov 25

Hi! I have a problem, when I want to change the styles of the Amazing card, for example the color of the value, it doesn't work. I have tried changing the color and style but none of it works. I have tried both using cssStyle and cssClass, but neither option works.

ChartCard::create(array(
    "title" => "Number of Estimations",
    "value" => count($data),
    "preset" => "primary",
    "chart" => array(
        "dataSource" => $chart_data
    ),
    "cssClass" => array(
        "icon" => "icon-clock d-flex justify-content-end",
        "title" => "text-lg m-0 align-items-center",
        "card" => "card-print"
    ),
    "cssStyle" => array(
        "icon" => "font-size:30px; color:white;",
        "title" => "color: white;",
        "value"=>"font-style:italic",

    )
));

Another separate question, I have seen that the background color of the card can take 4 colors: "primary", "info", "warning", "danger". There is the possibility of giving it a personalized color without the wave design losing its transparent color. I have tried changing the color, for example to green, this change works, but the wave design loses its transparent color.

Sebastian Morales commented on Nov 26

1 . It seems like there's a bug with Amazing ChartCard's cssStyle and cssClass for "value". We will fix this in the next version of Amazing package. Meanwhile you could apply a fix yourself by opening the file koolreport/amazing/ChartCard.tpl.php and replace this line:

        <h4 class="mb-0"><?php echo $this->formatValue($this->value, $this->valueFormat); ?></h4>

with this one:

        <h4 class="mb-0 <?php echo($valueClass)?" $valueClass":""; ?>" <?php echo ($valueStyle)?"style='$valueStyle'":""; ?>><?php echo $this->formatValue($this->value, $this->valueFormat); ?></h4>

2 . You could use the following css rule to change card's background color while retaining a chart's transparent color:

    <style>
        .amazing[widget-name="MyChartCard"] .card {
            background-color: lightblue !important;
        }
    </style>
    <?php
        \koolreport\amazing\ChartCard::create(array(
            "name" => "MyChartCard",

If there's any issue let us know. Rgds,

Victoria Rodriguez commented on Nov 26

Thanks, the first point about h4 worked but it didn't work for the background. What other suggestion can you give me?

<?php
    use \koolreport\amazing\ChartCard;

    ChartCard::create(array(
        "title" => "Number of Estimations",
        "value" => count($data),
        "preset" => "primary",
        "chart" => array(
            "dataSource" => $chart_data
        ),
        "cssClass" => array(
            "icon" => "icon-clock d-flex justify-content-end",
            "title" => "text-lg m-0 align-items-center",
            "card" => "card-print"
        ),
        "cssStyle" => array(
            "icon" => "font-size:30px; color:white;",
            "title" => "color: white;",
            //"card" => "background-color: #2d0909;"
        )
    ));
?>
<style>
    .amazing[widget-name="Number of Estimations"] .card {
        background-color: red !important;
    }
</style>

Sebastian Morales commented on Nov 27

Would you mind inspecting the card, go to div class="card ..." and see which background-color rule overrides the red one?

Victoria Rodriguez commented on Nov 27

Yes, of course:

Sebastian Morales commented on Nov 28

Could you pls go to tab "Computed" and see whether the custom background-color rule for ".amazing[widget-name="Number of Estimations"] .card" applies for the element and if it does why the .bg-primary one supersedes it?

Victoria Rodriguez commented on Nov 28

It looks like this:

Sebastian Morales commented on Nov 29

Oh, you should set ChartCard's name like this:

    ChartCard::create(array(
        "name" => "Number of Estimations",

instead of setting title:

    ChartCard::create(array(
        "title" => "Number of Estimations",

The "name" property will decide the card's widget-name attribute, while "title" does not.

Victoria Rodriguez commented on Nov 29

It doesn't work, I also tried commenting on "preset" and it doesn't work either:

ChartCard::create(array(
    "name" => "Number of Estimations",
    "value" => count($data),
    "preset" => "colorCard",
    "chart" => array(
        "dataSource" => $chart_data
    ),
    "cssClass" => array(
        "icon" => "icon-clock d-flex justify-content-end",
        "title" => "text-lg m-0 align-items-center",
        "card" => "card-print"
    ),
    "cssStyle" => array(
        "icon" => "font-size:30px; color:white;",
        "title" => "color: white;",
        //"card" => "background-color: #2d0909;"
    )
));
?>


<style>
    .amazing[widget-name="Number of Estimations"] .card {
        background-color: red !important;
    }
</style>

Sebastian Morales commented on Dec 2

Again, pls inspect the .card div element and click on its computed background-color to expand to see exactly which rules apply to it.

Victoria Rodriguez commented on Dec 2

That color from appstack is applied to card class

The card looks like this:

Sebastian Morales commented on Dec 3

You need to expand on Computed tab's background-color of the div .card element to see all CSS rules that apply to it:

Victoria Rodriguez commented on Dec 3

You see the same color applied:

Sebastian Morales commented on Dec 4

Would you mind clicking on the arrow icon at the beginning of the background-color line to see all the CSS rules?

Victoria Rodriguez commented on Dec 4

Before I had forgotten to mention that I was using Appstack and webpack. Thank you very much for your help these days. I was already able to solve it with a custom class inside the style tag above the php fragment.

KoolReport's Forum

Card Amazing #3397

Build Your Excellent Data Report