Change Color of Colum Background

Universal Dashboard Universal Dashboard Help
1

Hi Guys

How do I change the color of New-UDColumn background, there is no other option more than -Style, but how do I set it lets say to RGBA(100,100,100,0.5)?

2

Hello @sanjosetour I couldnā€™t personally see the style parameter mentioned in the documentation Grid - PowerShell Universal however I know this parameter exists in New-UDStyle so if you add that component to your dashboard you could do something like the below to achieve what you are after.
Not saying this is the best way but this does allow you to style any component on your dashboard.

New-UDRow -Columns {
    New-UDStyle -Content {
  New-UDColumn -SmallSize 12 -Content {
        New-UDPaper -Content { "xs-12" } -Elevation 2
    }
    } -Style 'background: RGBA(100,100,100,0.5)'
  
    New-UDColumn -SmallSize 12 -Content {
        New-UDPaper -Content { "xs-12" } -Elevation 2
    }
}
3

thank you, but still not working for
New-UDTableColumn -Property ValorUnitario -Title ā€œImporte Saldoā€ -IncludeInExport -IncludeInSearch -Style ā€˜background: RGBA(255, 99, 71,1)ā€™

4 
  New-UDStyle -Content { New-UDTableColumn -Property ValorUnitario -Title "Importe Saldo"  -IncludeInExport -IncludeInSearch } -Style 'background: RGBA(255, 99, 71,1)'

also didnt work

5

Hello again @sanjosetour ok I thought you were on about New-UDColumn anyways I looked at the documentation here Table - PowerShell Universal and used the example givenā€¦however like yourself I was unable to style the component even though I found the class was .MuiTableCell-head that you need to customiseā€¦then I found this documentation:-
Cascading Style Sheets - PowerShell Universal
So you can easily copy the CSS rule from the browser then add the background color for that. I will record a quick gif to show the styling is possibleā€¦

tried
tried941Ɨ559 428 KB

Or I did infact build a custom component and published that the other day which you can read about here:- React Flexy Table | Powershell Blog
which also gives you an alternative component to use

1 Like
6

thank you, Iā€™ve figured it out now!

1 Like