Feature request: Custom CSS for embedded views

[brianwarner]

This is a feature request, not a bug.

I'd like to request consideration of custom stylesheets for embedded views. In particular, it would be nice to customize the size of logos, the color of the borders, and the padding around each so that it matches the varying styles of project websites.

Here's a suggested implementation: 1) Add a directory called css to the top level of the installed landscape files (alongside cached_logos, hosted_logos, etc.). This directory would hold an arbitrary number of user-defined stylesheets: platinum.css, gold.css, brian.css, avocado.css, etc. 1) Add support for an optional parameter called style which inserts a link to the stylesheet on the page that is rendered for the iframe. For example (trimmed for clarity): https://[...]/[...]&embed=yes&style=avocado.css. In turn, the delivered page could include <link href="https://github.com/[project]/landscape/css/avocado.css" rel="stylesheet">

Thanks for your consideration on this! (And I apologize that I'm not good enough with React yet to actually propose this as a PR...)

[jmertic]

Hey @brianwarner - this is doable thanks to #656. You can use this javascript code to add right after the iframe block...

window.onload = function() {
   document.getElementById("<<ID of LANDSCAPE IFRAME>>").contentWindow.postMessage({type: 'css', css: '<<ADD YOUR CSS HERE>>'},'*');
}

See this in action at https://www.aswf.io/projects/