Using custom styles with CSS"

  collapse = TRUE,
  comment = "#>"

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:

  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:

    .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:

  class = "shiny-app-frame",
    src = "",
    width = "100%",
    height = 450

Source code

  system.file("shiny-examples/custom_css/app.R", package = "sortable")

Try the sortable package in your browser

Any scripts or data that you put into this service are public.

sortable documentation built on Aug. 15, 2022, 1:05 a.m.