CSS with ConvertTo-HTML

This topic contains 8 replies, has 3 voices, and was last updated by  SB 2 weeks, 4 days ago.

  • Author
    Posts
  • #84938

    SB
    Participant

    I have an issue with some CSS. I've been running report scripts, and I've been using inline CSS:

    $custom = "
    body {}
    table {}
    "

    So, I finally wised up, and I planned on using -the -CssUri parameter. I looked at the help and basically I just needed to use the parameter and point it to my CSS:

    ConvertTo-Html -InputObject $Object -CssUri "C:\input\Home.css" | out-file C:\Input\Object.html

    For whatever reason, it will not work. I first tried it on an some existing CSS that was used inline. I then tried it on some new CSS, where I just wanted to change the background color. When I look at the source, I can see the in the head, and everything looks fine. I would also just write up some HTML with a sentence or two, and point it to the same CSS page, and it would receive the CSS.

    I even tried to use the -head parameter and I would point to the CSS:

    ConvertTo-Html -InputObject $Object -Head " | out-file C:\Input\Object.html

    Finally, I saw this example on technet (https://social.technet.microsoft.com/Forums/ie/en-US/05c50ec7-ec9c-4f32-a078-e665d46ef09d/is-it-possible-to-incorporate-in-my-powershell-script-css-as-the-output-is-html?forum=winserverpowershell):

    $css = get-content "C:\temp\styles.css"
    get-service A* | ConvertTo-Html -head "$css"

    I tried that and it works. I do see that it's basically using an inline stylesheet, because the source does not show a link in the , it shows the CSS, but nothing that I tried worked.

    I'm trying this with PowerShell 5.1 on Windows 10. I looked at many examples, and the process seems very easy, but for some reason, it just won't work. Any ideas?

  • #84946

    Don Jones
    Keymaster

    You've not provided a URI to your CSS, you've provided a path. The URI you provide must be accessible to any web browser attempting to render the page – e.g., it needs to be on a shared folder accessible via UNC, or ideally on a Web server accessible via a URL. When providing a URI, the CSS doesn't get read-in and added as an inline style sheet; it gets references as a link that the browser needs to read on its own.

  • #84949

    Bill Kindle
    Participant

    I'll leave this example here:

  • #84950

    SB
    Participant

    I appreciate the responses. In the PowerShell help, it gives examples using a path, although it appears to be a relative path. 'Help ConvertTo-HTML -Online' has this as an example: 'Get-Service | ConvertTo-Html -CssUri "test.css"'. I searched some youtube videos and this came up: (https://youtu.be/sztCBTSXsEA?t=207). The link should take you to the 3:28 mark. In that example, he is able to specify an absolute path using -CssUri.

  • #84953

    Bill Kindle
    Participant

    What if you run that script in the directory you store the CSS? path should be dot sourced, ".\test.css"

    does that work?

  • #84956

    Don Jones
    Keymaster

    It doesn't matter where you run the script. The resulting HTML will only contain whatever path you specify. The rendering web browser must be able to independently access the CSS file at the path specified.

    Whatever path you provide, you must be able to type into a web browsers address bar and be able to access the file successfully.

  • #84958

    Don Jones
    Keymaster

    Specifying just a filemame – test.css – means the browser will expect the CSS to be in the same location as the HTML file.

    I wrote a free ebook about HTML reports in PowerShell if you're interested 🙂

  • #84962

    SB
    Participant

    I can't believe I didn't try this. It's chrome, chrome does not show the proper css. I decided to try IE, and even Edge, and they both display correctly, but for some reason chrome does not. I'm going to look it up, maybe I have something in chrome that's blocking the output.

    Oh, and I also think my brain went on hiatus earlier. Don Jones, thanks. Your PowerShell videos are what started me on this journey, you're a great instructor. Thanks, Bill Kindle for the help on this as well. I never thought of trying a different browser, chrome just worked with everything, but I'll disable some add-ons and try again. Thanks for the help.

    • #84968

      SB
      Participant

      Clearing my cache didn't help.

You must be logged in to reply to this topic.