Styling Reference • Docs

Table of Contents

Styling Reference

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

Page under construction.

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

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