New-UDCounter -Icon as a watermark

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 thishack

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
image

3 Likes

Very nice @AlonGvili rate your solution over mine.

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'
1 Like

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

image

@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:-
example

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:-

1 Like

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.

1 Like

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 :grin:

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. :stuck_out_tongue:

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"
            }
        }

I’m honestly not sure what I’m doing wrong. This is what I have:

New-UDRow -Columns{
    New-UDColumn -SmallSize 8 -MediumSize 8 -LargeSize 8 -Content {
        New-UDCard -Id "OverallStats" -Content{
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateHouseholds
            }
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateApplicants
            }
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateCharges
            }
        }
    }
    New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
        CreateFamRunningTotal
    }
}
New-UDRow -Columns{
    New-UDColumn -SmallSize 6 -MediumSize 6 -LargeSize 6 -Content {
        New-UDCard -Id "Averages" -Content{
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateAvgFamLim
                CreateAvgNoZeros
                CreateAvgFamUsed
            }
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateAvgApplicantAmnt
                CreateAvgApplicantUsed
            }
        }   
    }
    New-UDColumn -SmallSize 1 -MediumSize 1 -LargeSize 1 -Content {
        CreateApplicantStatsList
    }
    New-UDColumn -SmallSize 1 -MediumSize 1 -LargeSize 1 -Content {
        CreateApplicantStatsList
    }
    New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
        CreateAvgFamAppAmounts
    }
}

The cards at the top look like this:

New-UDStyle -Style $Style -Content{
  $WhenClicked = {
  	Show-UDModal -Content {
  		CreateHHSizeChart
	}
  }

  New-UDElement -Tag 'a' -Attributes @{
 		onClick = $WhenClicked
 		style   = @{
 			'cursor' = 'pointer'
 		}                             
  } -Content {
 		New-UDCard -Id "Households" -title "Households" -Content{
 			New-UDIcon -Icon 'group'
 			$NoOfHHHash = (Get-PSUCache -Key "NoOfHHData")
 			New-UDHeading -Size 5 -Text "$($NoOfHHHash.NoOfHH)"
 		} -Elevation 5
 	}
 }

Cards in second and third row:

New-UDStyle -Style $Style -Content{
    New-UDCard -Id "AvgFamLim" -title "Avg Fam Limit" -Content{
        New-UDIcon -Icon 'dollar_sign'
        $FamilyAvgsHash = (Get-PSUCache -Key "FamilyAvgsData")
        New-UDHeading -Size 5 -Text "$($FamilyAvgsHash.AvgFamLim)"
    } -Elevation 5
}

You cool just to include the code you got for $Style please and thank you

Of course! New-UDStyle is very useful! Thank you.

I tried using the code that worked for a different dashboard:

$Style = ’
.fa-fw {
text-align: center;
width: 1.25em;
font-size: 4em;
opacity: .2;
float: left;
position: absolute;
top: 130px;
margin-left: 90px;
}

.MuiPaper-root {
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
justify-content: center;
}

and versions of the one’s you’ve posted. Everthing breaks down once I use position: absolute and then try to change top. I was looking at this and it looks like the Icon's “nearest positioned ancestor” is all the way at the top of the dashboard not within the card.