How to change styling of HTMLTable buttons?

[desiwalle]

Hello, Is there a way to change the Text color, background color, Font Family and Font size of the "Excel, PDF, Copy..." buttons? For some projects the styling does not meet Accessibility requirements for color contrast and size of the UI elements, thus the question.

Amazing module - thanks for the work on it.

[PrzemyslawKlys]

You would need to find the class names behind the buttons and add inline css with !important flag to overwrite the ones that come from the module. You can do so by opening Edge, pressing F12 and then inspecting elements you're interested in.

Using Add-HTMLStyle you can overwrite anything.

$DataTable = @(
    [PSCustomObject] @{ Name = 'Service Desk 1'; Incidents = 1; Resolved = 0; Year = 2001 }
    [PSCustomObject] @{ Name = 'Service Desk 2'; Incidents = 20; Resolved = 15; Year = 2002 }
)

New-HTML {
    Add-HTMLStyle -Placement Header -Css @{
        "@font-face" = @{
            "font-family" = 'Open Sans'
            "font-style"  = "normal italic"
            "src"         = 'url(data:application/octet-stream;base64,d09GMgA...............)'
        }
    }
    Add-HTMLStyle -Placement Header -Css @{
        'body' = @{
            'background-color' = '#34ebeb'
            'font-family'      = '"Raleway", sans-serif'
            'font-size'        = '16px'
        }
    }
    $SectionStyle1 = New-HTMLSectionStyle -RequestConfiguration
    Add-HTMLStyle -Placement Header -Css @{
        "$($SectionStyle1.SectionHead)" = @{
            'background-color' = 'yellow'
            'font-size'        = '50px'
        }
        "$($SectionStyle1.Section)"     = @{
            'margin' = '10px'
            'width'  = 'calc(100% - 20px)'
        }
    }
    New-HTMLSection -HeaderText 'Test' {
        for ($i = 0; $i -le 1; $i++) {
            New-HTMLTable -DataTable $DataTable -HideFooter
        }
    } -Direction column -StyleSheetsConfiguration $SectionStyle1
} -ShowHTML -Online -FilePath $PSScriptRoot\Example-StyleChange.html

[desiwalle]

Thanks for the quick response. I'll give your guidance a try.

[desiwalle]

Tested and worked! Thx.

[desiwalle]

Closing