CSS with ConvertTo-HTML

PowerShell Help
1

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 (Is it possible to incorporate in my Powershell script CSS as the output is HTML?):

$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?

2

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.

3

I’ll leave this example here:
https://gist.github.com/billkindle/8b4fe0ab44e628551b6e994435e468c6

4

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: (PowerShell HTML output with CSS - YouTube). The link should take you to the 3:28 mark. In that example, he is able to specify an absolute path using -CssUri.

5

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

does that work?

6

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.

7

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

8

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.

9

Clearing my cache didn’t help.