How feasible would it be to specify a shape for the New-UdCard command. I know we can add icons to the card or tile, but changing the actual shape of the card.
for example
I set the status of the icon to match the status of the object (e.g. web server etc)
It would likely require some custom CSS to change the actual shape of the card. Since cards are just made out of UD elements, it should be pretty straight forward.
When you say change the shape of the card, what are you looking to achieve exactly? More rounded cards or something?
so the example above, as if it’s possible to set say and ICON.PNG file as the card shape and set the colour of the icon based on the condition/state .
Say for example I have a Web server , using the web icon, the status is green (as the service is up)
As part of the monitoring, if the service goes down stops, then the icon changes to red
does that make sense?
Hey @Cragdoo I do have a licensed version of Universal Dashboard, but thinking couldn’t you put this in an “if” statement then display the image with:- New-UDIcon -Icon smile_o -Size 2x -Color “red” not sure if community version allows different colours on New-UDIcon but thinking this would work.
I was thinking it would be cool to have a -rounded parameter on the card. I did achieve the rounded effect using:-
New-UDColumn -Size 3 -Content {
New-UDElement -Tag “div” -Attributes @{ class = “card rounded”;Style = “border-radius:50px;”} -Content {
New-UDElement -Tag “div” -Attributes @{class=“container”} -Content {
New-UDElement -Tag “h1” -Content { “Rounded Card”}
}
}
}
Hey @psDevUK, since you have been killing it with components latley for the UD platform, figured I ask you, is something like this possible with UDcard? with some custom element/html tweaks? or maybe a new component altogether? Saw this on a git project statusimo, and looks like a lot can be accomplished with UD but the components used look pretty slick, since a lot of UD users are already using UD to present statuses (Object/Status/Icon)…
Yeah I did rounded cards ages ago check the dark rounded theme…just up the value of the radius to get it more like the example you posted. I hope this helps. Peace
This is awesomness just the look I was looking for… having a challenge with trying to mimic the layout above? any thoughts on spacing the text inside the card, have some text set to the left and others on the right in the same line inside the UDcard?
OK so have been playing around with this for a bit and came close… what I would like is to aesthetically align the text/icons on the right …, also whats bizarre is the icons should show on the right? below is code I used to produce this:
New-UDCard -Content {
New-UDCard -BackgroundColor '#F26768' -Content {
New-UDElement -Tag 'div' -Attributes @{
style = @{
float = 'left'
}
} -Content { "SQL Servers" }
New-UDElement -Tag 'div' -Attributes @{
style = @{
float = 'right'
}
} -Content { "Partial Degradation" }
New-UDElement -Tag 'div' -Attributes @{
style = @{
width = '50px'
float = 'right'
}
} -Content { New-UDIcon -Icon sad_tear -Color red -Size 2x }
}#END UDCARD
New-UDCard -BackgroundColor '#F1A25A' -Content {
New-UDElement -Tag 'div' -Attributes @{
style = @{
float = 'left'
}
} -Content { "Middleware Servers" }
New-UDElement -Tag 'div' -Attributes @{
style = @{
float = 'right'
}
} -Content { "Down" }
New-UDElement -Tag 'div' -Attributes @{
style = @{
width = '50px'
float = 'right'
}
} -Content { New-UDIcon -Icon exclamation_circle -Size 2x }
}#END UDCARD
New-UDCard -BackgroundColor '#62EEA1' -Content {
New-UDElement -Tag 'div' -Attributes @{
style = @{
float = 'left'
}
} -Content { "Web Servers" }
New-UDElement -Tag 'div' -Attributes @{
style = @{
float = 'right'
}
} -Content { "Operational" }
New-UDElement -Tag 'div' -Attributes @{
style = @{
width = '50px'
float = 'right'
}
} -Content { New-UDIcon -Icon check_circle -Size 2x -Color green }
}#END UDCARD
}#END-MAINCARDgood job so far…just thinking off of the top of my head, why don’t you use the new-udlayout or new-udcolumn inside the card to align/place your stuff…just a thought, but you are basically there for what you want.
Yup @psDevUK, that makes total sense I’m going to switch some of that stuff around and use a mix of udlayout + columns, lends for cleaner approach totally!!! thanks man! appreciate it! 
Hey @psDevUK, hope all is well during these rough times… had a question about the rounded theme, looks like the theme is not applying to modals, tables and icons for instance see comparison of basic and rounded themes applied:
Yeah was a long time ago I did this theme, and didn’t know much on CSS…I think when I last used this theme I just nested everything in a card, so it had a rounded effect on the component. However you could add the missing bits yourself as a custom theme for what-ever I missed off adding a rounded effect to…happy to help if you get stuck, as mentioned did this as a mini-project and a reward was going…do feel this theme could maybe do with a re-visit, but with v3 on the verge of being released…not sure if it is worth it? I am going to do some UD work later so will update this thread with how to round a table and modal if I get time. Peace
for sure agree with v3 in the horizon, definitely not looking to round the modal or table was curious why the colors didn’t come down, and why the icons in the table were wiped out? definitely not a CSS guru by any means
@psDevUK, ok cool so after messing around for a bit made a few changes to get the table/modal/icon to work, I needed to comment the icon color section completely so that it respects the color being passed in the component, definitely learned some stuff here
".ud-table" = @{
'border-radius' = "15px"
}
'.modal' = @{
'border-radius' = "15px"
}
<# '.svg-inline--fa' = @{
color = "#fff"
} #>