GradientBox colours not working

[fcecinati]

Hello!

I have tried to use gradientBox from many devices and every time I encounter the same problem: they render correctly using gradientColor with some colours (e.g. 'blue', 'maroon', or 'yellow'), but it doesn't work with others (e.g. 'orange, 'gray' or 'olive'). In particular, when it is not rendering correctly, the 'x' element to close the box is coloured correctly, but the rest of the header is white.

Minimum reproducible example:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
        gradientBox(title='Box',
                    gradientColor='yellow',
                    icon='fa fa-sort-numeric-asc',
                    width=12,
                    footer=list(h4('Hello')))
    )
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)

Produces this result:

While changing colour:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
        gradientBox(title='Box',
                    gradientColor='olive',
                    icon='fa fa-sort-numeric-asc',
                    width=12,
                    footer=list(h4('Hello')))
    )
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)

Produces the following:

Is there a way to solve this problem? Thank you!!

[DivadNojnarg]

According to the adminLTE2 CSS file (from line 5245-5334), there are only: teal, blue, light-blue, aqua, yellow, purple, green, red, black and maroon ... that are supported for gradient colors. olive does not belong to the list of gradient colors, even though it is a color of the adminLTE theme (see below). Therefore, it cannot work and this is the reason why you only see the collapse icon color changing.

Below is the full list of colors:

.bg-red,
.bg-yellow,
.bg-aqua,
.bg-blue,
.bg-light-blue,
.bg-green,
.bg-navy,
.bg-teal,
.bg-olive,
.bg-lime,
.bg-orange,
.bg-fuchsia,
.bg-purple,
.bg-maroon,
.bg-black,
.bg-red-active,
.bg-yellow-active,
.bg-aqua-active,
.bg-blue-active,
.bg-light-blue-active,
.bg-green-active,
.bg-navy-active,
.bg-teal-active,
.bg-olive-active,
.bg-lime-active,
.bg-orange-active,
.bg-fuchsia-active,
.bg-purple-active,
.bg-maroon-active,
.bg-black-active,

You see that a lot are not part of the gradient CSS, unfortunately.

[fcecinati]

Thank you! Your answer is very helpful. It may be worth updating the help for gradientBox, because it currently links to the page: https://adminlte.io/themes/AdminLTE/pages/UI/general.html for the choice of colours, where more colours are listed (including orange and grey for example).

Anyway, thanks to your link I have been able to customise my gradientBox specifying a new colour in the .css file as:

.bg-gray-gradient {
  background: #555555 !important;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #555555), color-stop(1, #555555)) !important;
  background: -ms-linear-gradient(bottom, #555555, #555555) !important;
  background: -moz-linear-gradient(center bottom, #555555 0%, #555555 100%) !important;
  background: -o-linear-gradient(#555555, #555555) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#555555', GradientType=0) !important;
  color: #000;
}

which I write here if anyone else struggles with it like I did.

Thank you very much!