Customising visuals


#1

Hello,
I’m wondering if its possible to modify style of embedded content (individual widgets). Every time you embed something into a webpage (an individual widget) it is being server as an iframe and you cant really modify style (lets say change font size).
Has anyone tried tempering with the style of widgets?


#2

It’s not possible unless you’re coming from the same origin, which you wouldn’t be in your use case.

However, when you serve up a dashboard using an experience page, we actually write the contents of the dashboard directly to the document (not in an iframe) so you can apply custom CSS in those cases. We’ve seen our users do things as simple as changing the blocks’ title bar color to completely redrawing layouts.


#3

Are there any examples of this that you can share with us?


#4

I don’t have any client examples I can share, but here’s something I threw together in a couple minutes by adding just a couple lines of CSS to my experience’s layout.

Original dashboard: https://app.losant.com/dashboards/596e5ad0374ba300074089c9
Experience dashboard: https://5acbad963f61bb000631afad.onlosant.com/

Added CSS:

.dashboard-block {background: #feeed8 !important;}
.dashboard-block-header-wrap {background: #faac3e !important; font-family: 'Arial Black', sans-serif !important; text-transform: uppercase !important; color: black !important;}

We can of course keep going down this path to further modify the look and feel, but this serves as a proof of concept.

If you come across any places you’d like to customize, and it would help if a certain div had an ID / class on it, please let us know! Those are easy for us to add.


#5

Is there any documentation for the other dashboard elements that can be modified within an experience view as Dylan has done above? Or perhaps a page source I can reference and decode?

Example:
"
Added CSS:

.dashboard-block {background: #feeed8 !important;}
.dashboard-block-header-wrap {background: #faac3e !important; font-family: ‘Arial Black’, sans
"

Thanks!


#6

Sorry, we don’t have any published spec for how to do this. The way I came up with the example CSS for the previous poster was by popping open the web inspector in Chrome, selecting the elements I wanted to edit, and seeing how I could target those elements using the CSS selectors.