From 5d942291539d4cf03c0aa0fab1457561d3a66416 Mon Sep 17 00:00:00 2001 From: John Mertic Date: Thu, 23 Mar 2023 07:31:09 -0400 Subject: [PATCH] Adding docs on applying external CSS to a landscape Signed-off-by: John Mertic --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index e238952a..73145574 100644 --- a/README.md +++ b/README.md @@ -351,6 +351,30 @@ You can embed the landscape in a website in a few different ways... ``` +### Adding CSS styles for an embedded landscape + +There are a few different ways to do this. + +If you have just a few CSS style defintions to apply, you can add the `css` URL parameter with the CSS style rules; see example URI below: + +https://landscape.cncf.io/card-mode?category=kubernetes-training-partner&grouping=category&embed=yes&style=.sh_wrapper%7Bdisplay:none;}.mosaic.nonoss%20img{background:gold%20!important + +If you have a CSS file on your website you wish to maintain all the CSS defintions at, you can pass the URL to that CSS file using the `css` URL parameter; see example below ( scroll to the bottom to see the CSS applied ): + +https://landscape.cncf.io/card-mode?style=borderless&grouping=license&license=mit-license&embed=yes&css=https://clever-spence-1af20a.netlify.app/1.css + +Finally, you can also the `contentWindow.postMessage` javascript call to send style defintions after the page is fully loaded. + +```html + + + +``` + ## Generating a Guide A Guide can be generated by adding a file `guide.md`. `guide.md` will be mostly regular markdown with some custom behavior: