Skip to content

CSS Reference

This page contains the CSS selectors names for styling RPGM in a program, by using custom CSS code in the project settings.

Danger

This section is outdated and will be updated soon.

GUI

  • .pgm-gui for the whole GUI screen
  • .pgm-guiform for the inner container of the GUI
  • [data-click="gui:submit"] is the "Submit" button

Generic widgets classes

  • .pgm-gui-element is the surrounding div for each widget
  • .pgm-guimessage is the green/yellow/red message for R conditions
  • .pgm-guihelp is the small help line below widgets

Widgets

You might need to prepend .pgm-guiform for not modifying buttons or inputs which are outside the pgm program. For example: .pgm-guiform button.

  • .pgm-gui-box: Global class for all list/box widget
  • [data-columns] or [data-col]: A column for the column widget
  • input[type="date"] for date widgets
  • button for buttons
  • [id^="pgm-gui-graph-"] for graphs
  • .pgm-gui-hot for grids
  • .pgm-gui-image for images
  • input[type="slider"] for sliders
  • input[type="range"] for numbers
  • input[type="checkbox"] for checkboxes on/off
  • .pgm-gui-switch and pgm-gui-slider for the custom on/off switch
  • .pgm-gui-progressbar for horizontal progress bars
  • Circle progress bars are svg elements containing a <text> and a <circle class="pgm-gui-progresscircle"> element
  • Multi-selects are select, input[type="checkbox"] and input[type="radio"]
  • Tabs: Container <div> is .pgm-gui-tabs-container
  • The tabs header list is .pgm-gui-tabs and individual tabs are .pgm-gui-tabs [data-tab]
  • The tab container is .pgm-gui-tabs-contents and each tab is in a .pgm-gui-tabs-content
  • input[type="text"] and textarea for text widgets

Specific to the Grid

  • .excel-colname, .excel-rowname
  • .excel-colname.excel-headerselected, .excel-rowname.excel-headerselected
  • .excel-firstcelldiv for the top left cell
  • .excel-content tr for the rows of the content
  • .excel-cellselector the selected cell (by default: border: 2px solid #4b89ff;)
  • .excel-rangeselector the selected range (by default: border: 1px solid rgb(231, 76, 60); background-color: rgba(231, 76, 60, 0.12);)

Scripts

  • .script: entire script executing screen
  • .script-left: Left part with the spinner
    • .script-spinner-container and .script-spinner: The spinner
  • .script-right: Right part
    • .script-info: Info
    • .script-status: Status of the script
    • .script-timer: The timer
    • .script-progress: The progress part
    • .script-progressbar: The progressbar
      • .script-progressbar-inner: The inner part of the progressbar
    • .script-text: The custom text set by script.setProgress()