Section Heading Font Size

[swordfish291]

Hi,

Is there a way to modify the font size of the section header?

[PrzemyslawKlys]

There is in 0.0.133 (which is not yet released).

#116

$DataTable = @(
    [PSCustomObject] @{ Name = 'Service Desk 1'; Incidents = 1; Resolved = 0; Year = 2001 }
    [PSCustomObject] @{ Name = 'Service Desk 2'; Incidents = 20; Resolved = 15; Year = 2002 }
    [PSCustomObject] @{ Name = 'Service Desk 3'; Incidents = 40; Resolved = 19; Year = 2003 }
    [PSCustomObject] @{ Name = 'Service Desk 4'; Incidents = 15; Resolved = 25; Year = 2004 }
    [PSCustomObject] @{ Name = 'Service Desk 5'; Incidents = 10; Resolved = 19; Year = 2005 }
    [PSCustomObject] @{ Name = 'Service Desk 6'; Incidents = 45; Resolved = 45; Year = 2006 }
    [PSCustomObject] @{ Name = 'Service Desk 7'; Incidents = 18; Resolved = 15; Year = 2007 }
    [PSCustomObject] @{ Name = 'Service Desk 8'; Incidents = 60; Resolved = 50; Year = 2008 }
    [PSCustomObject] @{ Name = 'Service Desk 9'; Incidents = 18; Resolved = 5; Year = 2009 }
    [PSCustomObject] @{ Name = 'Service Desk 0'; Incidents = 9; Resolved = 2; Year = 2010 }
)

New-HTML {
    New-HTMLSection -HeaderText 'Test' -HeaderTextSize 20px {
        for ($i = 0; $i -le 5; $i++) {
            New-HTMLTable -DataTable $DataTable -HideFooter
        }
    } -Direction column
} -ShowHTML -Online

[swordfish291]

Thank you for the response. Can we achieve this using -StyleSheetConfiguration parameter. I could not find any documentation around that parameter.

[PrzemyslawKlys]

In theory yes. In practice it's a bit more complicated.

Here's a good example what that parameter can do along with New-HTMLSectionStyle.

• https://github.com/EvotecIT/PSWriteHTML/blob/b0b146ab6aeb5aefbe771412f5dd927439b20895/Examples/Example-Tabs/Example-Tabs05.ps1

You could probably use Add-HTMLStyle which has an option to use CSS Inlining based on hashtable. Connecting this with New-HTMLSectionStyle to have a custom class generated for a section gives you that ability.

$DataTable = @(
    [PSCustomObject] @{ Name = 'Service Desk 1'; Incidents = 1; Resolved = 0; Year = 2001 }
    [PSCustomObject] @{ Name = 'Service Desk 2'; Incidents = 20; Resolved = 15; Year = 2002 }
    [PSCustomObject] @{ Name = 'Service Desk 3'; Incidents = 40; Resolved = 19; Year = 2003 }
    [PSCustomObject] @{ Name = 'Service Desk 4'; Incidents = 15; Resolved = 25; Year = 2004 }
    [PSCustomObject] @{ Name = 'Service Desk 5'; Incidents = 10; Resolved = 19; Year = 2005 }
    [PSCustomObject] @{ Name = 'Service Desk 6'; Incidents = 45; Resolved = 45; Year = 2006 }
    [PSCustomObject] @{ Name = 'Service Desk 7'; Incidents = 18; Resolved = 15; Year = 2007 }
    [PSCustomObject] @{ Name = 'Service Desk 8'; Incidents = 60; Resolved = 50; Year = 2008 }
    [PSCustomObject] @{ Name = 'Service Desk 9'; Incidents = 18; Resolved = 5; Year = 2009 }
    [PSCustomObject] @{ Name = 'Service Desk 0'; Incidents = 9; Resolved = 2; Year = 2010 }
)

New-HTML {
    $SectionStyle1 = New-HTMLSectionStyle -RequestConfiguration
    Add-HTMLStyle -Placement Header -Css @{
        "$($SectionStyle1.SectionHead)" = @{
            'background-color' = 'yellow'
            'font-size'        = '50px'
        }
    } -SkipTags
    New-HTMLSection -HeaderText 'Test' {
        for ($i = 0; $i -le 5; $i++) {
            New-HTMLTable -DataTable $DataTable -HideFooter
        }
    } -Direction column -StyleSheetsConfiguration $SectionStyle1
} -ShowHTML -Online -FilePath $PSScriptRoot\tt.html

I would highly suggest to wait for 0.0.133 instead. CSS Inlining is experimental and mostly used internally now, at least until I will be happy with it. For now it could change and break your code later on.