I just upgraded from 1.7.0 to 2.4.1 and noticed that the icons for New-UDCounter is no longer a watermark in the counter, its a tiny icon below the Title and changes the size/formatting of the dashboard.
Is this by design? Is there a way to get back the Watermark look from 1.7.0?
On top is what the same code looks like in 1.7.0 and the bottom is in 2.4.1.
Hi @ChrisQuestionMark yes this is by design. I didnt or don’t get the issue you do with icon showing above counter. The counter looks much better with a smaller font. There is a nice example on the new poshud page in the nightly release. As far as I know no watermark parameter will double check…yep no watermark parameter…here is the latest code example from new poshud page:-
New-UDCounter -Title "Total Bytes Downloaded" -AutoRefresh -RefreshInterval 3 -Format '0.00b' -Icon cloud_download -Endpoint { Get-Random -Minimum 0 -Maximum 100000000 | ConvertTo-Json }
I appreciate the response! I can see what you’re saying about the small icon size, it sits just to the left of the counter, unfortunately with a medium or large counter it doesn’t look as good and puts the icon on another line which messes up the sizing of the cell. I have my dashboard up on a 32" display for my helpdesk team, the smaller counter sizes just won’t work in our use case, they’re too small to see from far away. I’ve just removed the icons for the time being.
Here is the full dashboard as it looked on 1.7.0
Nice looking dashboard man…I feel the pain of change in this situation…maybe you could request the “watermark” parameter to be added to give this effect again on the counter…however as they say there is always more than one way to do this…let me have a think…
what about this…
New-UDCard -Id "c1" -BackgroundColor 'black' -FontColor 'white' -Content { New-UDHeading -Text "Downloads" -Size 4 -Color 'white' New-UDIcon -Icon medkit -Size 7x -Color 'white' New-UDCounter -AutoRefresh -RefreshInterval 3 -Format '0.00b' -FontColor 'white' -BackgroundColor 'black' -TextSize Large -TextAlignment left -Endpoint { Get-Random -Minimum 0 -Maximum 100000000 | ConvertTo-Json } }
gives you this
you can add this code to your udtheme
UDCounter = @{
BackgroundColor = "#2196F3"
FontColor = "#FFFFFF"
'overflow' = 'hidden'
}
".ud-counter .card-content .card-title" = @{
'font-size' = '36px'
'font-variant' = 'all-small-caps'
'font-weight' = '400'
}
"div#counter > div > div > svg" = @{
FontColor = '#ffffff40'
'margin-top'= '-56%'
'margin-left'= '37%'
'font-size'= '10em'
}
it will give you something like that
thanks, but i think that Icon parameter in ud-counter should be an Icon object and not string (the icon name) , if it’s an object you can set all the style on the icon like size color …
@AlonGvili and @psDevUK - Thank you for the suggestions!
I managed to get it working by modifying the UDTheme like you suggested and using the CSS code from v1.7.0. I was using the stock Azure theme, but using this instead makes it look like it used to:
$theme = New-UDTheme -name 'MyTheme' -Definition @{
".card-content svg" = @{
'font-size'= '4em'
'opacity' = '.05'
'float' = 'left'
'position' = 'absolute'
'top' = '20px'
'margin-left' = '70px'
}
} -Parent 'Azure'I’m attempting to implement this using a card since the New-UDCounter is not longer available but I’ve never used CSS in PSU before. What would the code for a simple card look like?
Why don’t you just use UDStlye to style it? Then you use pure CSS
I tried UDStyle and I managed to change the color of the card but I’m not completely sure how to add
New-UDIcon -Icon dollar_sign
I also tried following your tutorial but the changes would not be visible on my Dashboard.
This is what I have so far.
> New-UDStyle -Style '
> .MuiCard-root {
> background-color: green !important;
> }' -Content {
> New-UDCard -Id "Families22" -Title (New-UDIcon -Icon dollar_sign) -Content{
> New-UDGrid -Container -Content {
> New-UDGrid -Item -ExtraSmallSize 12 -Content {
> New-UDTypography -Text "No. of Families" -Variant "h6" -NoWrap
> }
> New-UDGrid -Item -ExtraSmallSize 12 -Content {
> New-UDTypography -Text "$($Cache:NoOfFamiliesData.NoOfFamilies)" -Variant "h4"
> }
> }
> } -Elevation 5
> }You need to find the erquivalent css of .card-content svg matey above has given the answer… I got a new component to release which I needed to use UDStyle…I am planning on writing a blog on that…from what I see your trying to add the icon to the title of the card, which is expecting a string…add the icon to the content of the card, then the above CSS and it should all work.
Right click on the SVG icon and manually edit the CSS in the browser to
and you should see instant results…then add that CSS to UDStyle
This didnt really work for me, I’ve been trying since yesterday to get 1 super simple card to look like this but this was the best I could come up with. There are just so many elements that point/control the same “thing” in the card that I’m not sure which is the one. I tried putting my icon and everything else on its own element but no dice.
.jss10 {
/* flex: 1 1 auto; */
margin: 8px;
display: flex;
flex-direction: column;
font-size: 4em;
opacity: .25;
float: left;
position: absolute;
top: 20px;
margin-left: 70px;
}svg:not(:root).svg-inline–fa {
overflow: visible;
margin-top: ;
margin-left: 57%;
}
New-UDCard -Id "Families22" -title "No. of Families" -Content{
New-UDIcon -Icon 'group'
New-UDElement -Tag "Value" -Content{
New-UDTypography -Text "$($Cache:NoOfFamiliesData.NoOfFamilies)" -Variant "h4"
}
} -Elevation 5
@f.ehler.i.nolim plus points for trying and sharing your code. As I am a nice person I cooked up this for you
New-UDColumn -Size 3 -Content {
New-UDStyle -Style '.fa-sm {
font-size: 6em;
opacity: 0.2;
float: left;
position: absolute;
top: 20px;
margin-left: 145px;
}' -Content {
New-UDCard -Id "Families22" -title "No. of Families" -Content {
New-UDIcon -Icon 'group'
New-UDHeading -Size 5 -Text "Look at this"
}
}
}
Which gives me:-
Which now gives the appearance of a watermark effect of the icon…I right clicked the icon inspect element, found the font-size stored under .fa-sm so started added more css elements to this which @AlonGvili had kindly shared and I re-quoted for you, then binded this to UniversalDashboard.Style module, which allowed me to style this particular icon for this particular card. I hope this answers your question
P.S I am releasing the speech bubble as a custom component
One last thing, I just finished this blog on another component I built, which again uses UniversalDashboard.Style to spruce it up a bit, do have a read:-
Well, that was embarrassingly easy… I kid you not, I’ve been messing with it for way longer than I care to admit.
Thank you very much not only for your help here but for all the components you built to make or job that much easier.
I will definitely take a look at that blog. Thank you again.
No worries, I been using the product for a while now, so learnt a lot of new things on the way, hence I done a blog site to try and share some of what I learnt along the way. When I first got the product I wanted to customise the radio button so went to visit this guy I knew who bragged about how good he was at web designing etc…and he didn’t have a scooby-doo…so after hours and hours of trying I emailed @adam directly, who basically did the same thing and gave me the answer pretty much straight away. Since then he has gone on to build this forum where all types of knowledge can be shared, and re-used. So just glad this has helped you out, and hopefully you can chill out a bit now, and design some fancy looking custom cards 
These forums and your blogs have been instrumental in helping me learn PSU. Thank you again for sharing your knowledge and I will definitely post my dashboard once is worth showing. 
I’m attempting to recreate this for several cards. If the cards all appear on the top row, the watermarks show up as they should. Unfortunately if I add more rows the watermarks shift all the way to the top. I know this issue has to do with position = 'absolute.' I’ve tried doing Columns, Rows, Grid, cards within cards, etc to no avail. It looks like the position is referencing the top of the dashboard instead of the top of the card.
Hello, I am not seeing this same behavious when I added this same content as a theme to my dashboard:-
$theme = New-UDTheme -Name Watermark -Definition @{
'.fa-sm' = @{
'font-size' = "6em"
'opacity' = "0.2"
'float' = "left"
'position' = "absolute"
'top' = "20px"
'margin-left' = "145px"
}
}
Then call the theme on the dashboard and it all works fine…well for me and I am using firefox.
I am using the coloumns like so:-
New-UDColumn -SmallSize 7 -MediumSize 6 -LargeSize 3 -Content {
New-UDCard -Title "This is the home page" -Content {
New-UDIcon -Icon 'group'
New-UDHeading -Size 5 -Text "Look at this"
}
}
