dreamRs / fresh

Thank you for fresh and shinyWidgets! They really have made it easy for a beginner like me to do cool things in Shiny. However, I am struggling to use fresh to customise the style of shinyWidgets::radioGroupButtons(). I'd like to change the background colour and remove the shadow from the active button, to make the buttons have a similar appearance to the default "flatly" buttons shown below (though using different colours):

I've been able to use fresh::bs_vars_button() to customise the style of the non-active buttons to how I want them, and I've been able to remove the shadow from the active button, but only by going in to the CSS file and manually changing .btn.active{background-image:none;outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)} to have box-shadow:none, but I haven't been able to change the background colour of the active button.

Am I missing something, or are these variables just not currently exposed for customisation within fresh? Is there still some way that I can make these changes?

Many thanks.

Hello,
Glad you like those packages :)
Unfornately you can't customize everything in Bootstrap... When a button is clicked, it gets the status and the class "active", by default this class changes the color of the button by darkening it by 10%. It's here in the SASS files :

fresh/inst/assets/bootstrap-3.4.1/default/stylesheets/bootstrap/mixins/_buttons.scss

Line 26 in 1e08da0

background-color: darken($background, 10%);

I think you can only do it in CSS with something like this:

library(fresh)
library(shinyWidgets)

library(shiny)

ui <- fluidPage(
  use_theme(
    create_theme(
      theme = "default",
      bs_vars(input_group_addon_bg = "red"),
      bs_vars_button(
        default_color = "#FFF",
        default_bg = "#95a5a6",
        default_border = "#95a5a6"
      ),
      output_file = NULL
    )
  ),
  tags$style(
    ".btn-default.active {background-color: #95a5a6 !important;}",
    ".btn-default:hover,.btn-default:active,.btn-default:focus {background-color: #95a5a6 !important;}"
  ),
  radioGroupButtons(
    inputId = "somevalue2",
    label = "With custom status:",
    choices = names(iris),
    status = "default"
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

Victor

Ah that's really helpful and exactly what I wanted, thank you Victor!

Difficulty styling `shinyWidgets::radioGroupButtons()`