New-udparagraph Text colors broken?

Universal Dashboard Universal Dashboard Help
1

I just updated to 2.6.2 yesterday and all the text colors are broken in new-udparagraph
I have tried a few different ways in the same code, and none of them work.

This code

$Colors = @{
    BackgroundColor = "#252525" #darkbrown
    FontColor       = "#FFFFFF" #white
}

New-udrow { 
    New-UDColumn -size 4 {
        new-udcard -title  "TODO List" @colors -content  {
            New-UDParagraph -text "Refactor the config" -Color 'red'
            New-UDParagraph -text "Fix/apply the footer" -Color "white"
            New-UDParagraph -text "clean up remarked code" -Color 'FFFFFF'
            New-UDParagraph -text "organize the pages" -Color white
        }
    }
}

does not come out as expected
image

2

Hi @DreamThief nice to see you back in the forums. Guess this might be better being reported on github as a bug. However to suggest a work around for the time being you could use NEW-UDHTML set the appropriate H tag and colour. Doing school run on foot at the mo so bit hard to type and walk and keep an eye on my 2yr old. Hope this gives you a workaround. Peace

3

Yeah this is an issue with the use of !important in our default theme file. We need to drop that from all these otherwise you won’t be able to use the backgroundcolor\fontcolor parameters of cmdlets.

1 Like
4

You could also create a child theme that overrides the paragraph font color to not use important as a work around.

1 Like
5

@psDevUK Thanks for the info. I was not sure if this was a bug or a design change.
@adam I will see if I can get that to work. Not my forte but I do love learning new things!

6

Hi @DreamThief,

I am using 2.6.2, and I tried below code along with Theme darkrounded

$Colors = @{
BackgroundColor = “#FFA500” #darkbrown
FontColor = “#FFFFFF” #white
}

        New-udrow { 
            New-UDColumn -size 4 {
                new-udcard -title  "TODO List" @colors -content  {
                    New-UDParagraph -text "Refactor the config" -Color 'red'
                    New-UDParagraph -text "Fix/apply the footer" -Color "white"
                    New-UDParagraph -text "clean up remarked code" -Color 'FFFFFF'
                    New-UDParagraph -text "organize the pages" -Color white
                }
            }

Below is the result:

image

Syntax -color ‘red’ or -color ‘#EE00FF’ are working.

                    New-UDParagraph -text "Refactor the config" -Color 'yellow'
                    New-UDParagraph -text "Fix/apply the footer" -Color 'red'
                    New-UDParagraph -text "clean up remarked code" -Color '#1AFF00'
                    New-UDParagraph -text "organize the pages" -Color '#EE00FF'

image

Try to clear cache & run or in a new session and check.

7

*Correction all syntax you listed are working:

New-UDParagraph -text “Refactor the config” -Color ‘cyan’
New-UDParagraph -text “Fix/apply the footer” -Color “cyan”
New-UDParagraph -text “clean up remarked code” -Color cyan
New-UDParagraph -text “organize the pages” -Color “#00FFFF”

image

8

That’s weird. DarkRounded is using !important as well.

Either way, we need to eliminate the use of this cuz it’s gonna cause some weird behavior.

1 Like
9

Same thing @BoSen29 mentioned in below topic about !important.

Lucky me I have been using Default theme available since 2.5.3 along with colored elements in my entire dashboard it works fine.

I tested other components yesterday with Darkrounded or Darkdefault result was same.

image
image1345×796 52.3 KB

Test code:
If (-Not (Get-Module UniversalDashboard.Community -ErrorAction SilentlyContinue)) {
Import-Module UniversalDashboard.Community
}

$HomePage = New-UDPage -Name “HomePage” -Title “HomePage” -Icon home -Content {
New-UDRow -Columns {
New-UDColumn -Size 12 -Content {
New-UDColumn -Size 3 -Endpoint {
New-UDCard -Title “Services” -BackgroundColor ‘#FFDEAD’ -FontColor ‘#A0522D’ -Endpoint {
New-UDIconButton -Icon (New-UDIcon -Icon earlybirds -Size 3x -Style @{ color = ‘#DAA520’}) -OnClick {
Show-UDModal -Header {
New-UDHeading -Size 4 -Text “Service Status”
} -Content {
New-UDTable -Headers @(“DisplayName”, “Status”) -Endpoint {
$status = Get-Service | Select-Object “DisplayName”, “Status” | Where-Object {$_.DisplayName -like “A*”}
$Status | ForEach-Object {

                                $BgColor = 'White'
                                $FontColor = 'Black'
                                if ($_.Status -ne 'Running') {
                                    $BgColor = 'red'
                                    $FontColor = 'White'
                                }
                    
                                [PSCustomObject]@{
                                    DisplayName   = $_.DisplayName.ToString()
                                    Status        = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.Status.ToString() }
                                }
                            } | Out-UDTableData -Property @("DisplayName", "Status")
                        } -Style highlight
                        New-UDButton -Text 'Close' -OnClick {
                            Hide-UDModal
                        }
                    } -Persistent
                } 
            } -TextAlignment center
        } #-AutoRefresh -RefreshInterval 5
    }
}
New-UDRow -Columns {
    New-UDTabContainer -Tabs {
        New-UDTab -Text "Service-DB Status" -Content {
            New-UDTable -Headers @("DisplayName", "Status") -Endpoint {
                $import = Get-Service | Select-Object "DisplayName", "Status" | Where-Object {$_.DisplayName -like "A*"}
                $import | ForEach-Object {

                    $BgColor = 'White'
                    $FontColor = 'Black'
                    if ($_.Status -ne 'Running') {
                        $BgColor = 'red'
                        $FontColor = 'White'
                    }
        
                    [PSCustomObject]@{
                        DisplayName   = $_.DisplayName.ToString()
                        Status        = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.Status.ToString() }
                    }
                } | Out-UDTableData -Property @("DisplayName", "Status")
            } -Style highlight
            New-UDButton -Text 'Close' -OnClick {
                Hide-UDModal
            }
        }
    }
}

}
$Status =
New-UDPage -Name “Status Check” -Title “Status Check” -Icon bomb -Content {
New-UDColumn -SmallSize 6 -MediumSize 6 -LargeSize 6 -Content {
New-UDCollapsible -Popout -Items {
New-UDCollapsibleItem -Title “Service Status” -Icon server -Content {
New-UDHeading -Text “Show services status”
New-UDButton -Floating -Icon angle_double_right -IconAlignment right -OnClick (
New-UDEndpoint -Endpoint {
Invoke-UDRedirect -Url “/Status-Check/SerStatus”
}
)
}
}
}
}
$SerStatus = New-UDPage -Url “/Status-Check/SerStatus” -Endpoint {
New-UDColumn -SmallSize 6 -MediumSize 6 -LargeSize 6 -Content {
New-UDCard -Content {
#New-UDHeading -Color “#01CCFF” -Text “Shows the status of Availability Group Sync status.” -Size 6
New-UDInput -Id “card3” -Title “Enter Server Name” -Content {
New-UDInputField -Type ‘textbox’ -Name ‘ServerName’ -Placeholder ‘Enter Server Name’
} -Endpoint {
param($servername)
New-UDInputAction -RedirectUrl “/SerStatus/$servername”
}
New-UDButton -Text “Back” -Icon backward -IconAlignment right -OnClick (
New-UDEndpoint -Endpoint {
Invoke-UDRedirect -Url “/Status-Check”
}
)
}
}
}
$SerDynamic = New-UDPage -Url “/SerStatus/:ServerName” -Endpoint {
param($servername)
New-UDRow -Columns {
New-UDTabContainer -Tabs {
New-UDTab -Text “Service-DB Status” -Content {
New-UDTable -Headers @(“DisplayName”, “Status”) -Endpoint {
$status = Get-Service -ComputerName $servername | Select-Object “DisplayName”, “Status” | Where-Object {$_.DisplayName -like “A*”}
$Status | ForEach-Object {

                    $BgColor = 'White'
                    $FontColor = 'Black'
                    if ($_.Status -ne 'Running') {
                        $BgColor = 'red'
                        $FontColor = 'White'
                    }
        
                    [PSCustomObject]@{
                        DisplayName   = $_.DisplayName.ToString()
                        Status        = New-UDElement -Tag 'div' -Attributes @{ style = @{ 'backgroundColor' = $BgColor; color = $fontColor } } -Content { $_.Status.ToString() }
                    }
                } | Out-UDTableData -Property @("DisplayName", "Status")
            } -Style highlight
        }
    }
    New-UDButton -Text "Back" -Icon backward -IconAlignment right -OnClick (
            New-UDEndpoint -Endpoint {
                Invoke-UDRedirect -Url  "/Status-Check/SerStatus"
            }
    )
}

}

$Theme = Get-UDTheme Darkdefault
$Dashboard = New-UDDashboard -Title “Service Status” -Pages @($HomePage, $Status, $SerStatus, $SerDynamic) -Theme $Theme
Start-UDDashboard -Name “Status” -Port 10002 -Dashboard $Dashboard -AutoReload

1 Like