# Using custom styles with CSS

    library(sortable)

## Using custom styles

Sometimes you want to take control of the styling of your app, e.g. changing colours or sizes.

The functions `rank_list()` and `bucket_list()` allows you to set a custom CSS class, and you can then define your own CSS rules that modifies your shiny app.

The default CSS style for a rank list is `default-sortable`, but you can specify your own class by modifying the `class` argument.

For example, to add `custom-sortable` to the CSS class, use:

    rank_list(
      class = c("default-sortable", "custom-sortable"), # add custom style
      ...
    )

Then you can use any of the standard techniques to Style your apps with CSS to modify your styling.

For example, to modify the `custom-sortable` class using a `shiny` tag, use:

    tags$style(
      HTML("
        .rank-list-container.custom-sortable {
          background-color: #8A8;
        }
        .custom-sortable .rank-list-item {
          background-color: #BDB;
        }
      ")
    )

This app contains a fully worked example that turns the background colours of the `rank_list` into shades of green:

## Source code

    ## Example shiny app with custom css

    library(shiny)
    library(sortable)

    ui <- fluidPage(
      fluidRow(
        column(
          width = 12,
          tags$b("Exercise"),
          rank_list(
            text = "Drag the items in any desired order",
            labels = list(
              "one",
              "two",
              "three",
              "four",
              "five"
            ),
            input_id = "rank_list_1",
            class = c("default-sortable", "custom-sortable") # add custom style
          ),
          tags$style(
            HTML("
              .rank-list-container.custom-sortable {
                background-color: #8A8;
              }
              .custom-sortable .rank-list-item {
                background-color: #BDB;
              }
            ")
          ),
          tags$b("Result"),
          verbatimTextOutput("results")
        )
      )
    )

    server <- function(input, output) {
      output$results <- renderPrint({
        input$rank_list_1 # This matches the input_id of the rank list
      })
    }

    shinyApp(ui, server)