🥳
PowerShell Universal
Ironman SoftwareForums
v3
v3
  • About
  • What's New in v3?
  • Get Started
  • Additional Resources
  • Installation
    • Docker
    • Upgrading
    • Uninstall
  • Licensing
  • System Requirements
  • Supported Browsers
  • Cmdlet Help
  • Modules
  • API
    • About
    • Endpoints
    • Security
    • Error Handling
    • Rate Limiting
  • Automation
    • About Automation
    • Scripts
      • Parameters
    • Jobs
    • Schedules
    • System Events
    • Terminals
    • Triggers
    • Queues
  • User Interfaces
    • About
    • Dashboards
      • Dashboards
      • Examples
      • Components
        • Pages
        • Dynamic Regions
        • Element
        • Error Boundary
        • HTML
        • Custom Components
          • Building Custom JavaScript Components
        • Data Display
          • Alert
          • Badge
          • Chip
          • Data Grid
          • Date and Time
          • Icon
          • List
          • Markdown
          • Table
          • Timeline
          • Tooltip
          • Tree View
          • Typography
        • Data Visualization
          • Charts
          • Image
          • Map
        • Feedback
          • Backdrop
          • Modal
          • Progress
          • Skeleton
        • Inputs
          • Autocomplete
          • Button
          • Checkbox
          • Code Editor
          • Date Picker
          • Editor
          • Floating Action Button
          • Form
          • Radio
          • Rating
          • Select
          • Slider
          • Switch
          • Textbox
          • Time Picker
          • Transfer List
          • Upload
        • Navigation
          • Drawer
          • Link
          • Menu
          • Stepper
          • Tabs
        • Layout
          • Grid Layout
          • Grid
          • Hidden
          • Stack
        • Utilities
          • Protect Section
          • Transitions
        • Surfaces
          • AppBar
          • Card
          • Paper
          • Expansion Panel
      • Interaction
      • Marketplace
      • Role Based Access
      • Scheduled Endpoints
      • Sessions
      • Themes
        • Cascading Style Sheets
        • Styles
      • Custom Variable Scopes
      • Migrating From Universal Dashboard 2.9
    • Pages
      • Alerts
      • Bar Chart
      • Button
      • Card
      • Form
      • iFrame
      • Image
      • Line Chart
      • Liquid Chart
      • Paragraph
      • Statistic
      • Table
      • Variables
  • Desktop
    • About Desktop Mode
    • File Associations
    • Hotkeys
    • Pages
    • Protocol Handlers
  • Platform
    • Cache
    • Modules
    • Monitoring
    • Notifications
    • Published Folders
    • Templates
    • Translations
    • User Sessions
    • Variables
  • Configuration
    • About
    • API
    • Command Line Options
    • Environments
    • Feature Flags
    • Git
    • Hosting
      • Azure
      • High Availability
      • IIS
    • Login Page
    • Management API
    • Persistence
    • App Settings
    • Security
      • Best Practices
      • Access Controls
      • App Tokens
      • Client Certificate
      • OpenID Connect
      • PowerShell Protect
      • SAML2
      • WS-Federation
    • Repository
    • Running as a Service Account
    • Best Practices
  • Development
    • Debugging Scripts
    • Editor
    • Hangfire
    • Logging
    • Profiling
    • Visual Studio Code Extension
  • Changelog
  • Extension Changelog
  • Legacy Universal Dashboard Docs
Powered by GitBook

Copyright 2025 Ironman Software

On this page
Edit on GitHub
Export as PDF
  1. User Interfaces
  2. Dashboards
  3. Themes

Cascading Style Sheets

Use cascading style sheets with Universal Dashboard.

PreviousThemesNextStyles

Last updated 3 years ago

You can use a cascading style sheet (CSS) by add a .css file to a published folder and then passing it to the -Stylesheets parameter for New-UDDashboard.

For example, the dashboard.ps1 file would look like this.

New-UDDashboard -Title "Server Monitor" -Content {


} -Stylesheets @("/assets/theme.css")

You could then setup a published folder to provide the assets route. This is what the contents of publishedFolders.ps1 will look like.

New-PSUPublishedFolder -RequestPath "/assets" -Path "C:\assets"

Within the C:\assets folder, you can place any assets you'd like to access on the /assets route.

You can then create a style sheet to manipulate whatever portion of the dashboard you'd like.

.ud-dashboard > div {
    background-image: url("/assets/image.jpeg");
}

This produces a dashboard with a background image of Austin the dog sleeping in a pile of dirt.

Determining the Correct Class Names

Every Material UI component has a series of global class names that you can use to apply styles throughout your dashboard. To determine the correct class names, you can view the a particular component's API documentation. There is a list of the global class names that apply to that component.

Within your CSS file, you can use these class names to override styles throughout your dashboard. If you wanted to set all success alerts to have a red background, you could create a CSS file like this.

.MuiAlert-standardSuccess { background-color: red !important;  }

For example, here is the .

CSS documentation for the Alert component
Assets folder