CSS Reference

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

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()