Customising visuals

Help
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.

7

I don’t see where you can edit your CSS style, can you point me in the right direction?

Thanks.

8

Hi @Mark_Harrell,

You can do a few things.

  1. Create a CSS template component and load it into a page. You can do this by creating a new component, and defining CSS there:

    image
    image3536×1458 398 KB

    image
    image3568×1438 403 KB

  2. You can create a CSS file in you Application Files and reference the style sheet in a page:

    image
    image3422×1398 384 KB

Please let me know if this answers your question.

Thank you,
Heath

9

Heath, Thanks for info above, but so far I’m not able to change the background color with this method. I’m using the default Basic layout. Do you know an example that might show me more? Or just a simple method to change the background of a section of my experience page?

Thanks

10

Hey @Mark_Harrell,

Would you be able to share a screenshot of what you have tried?

My recommendation is to do one of the following:

  1. Edit the layout by adding a <style> tag in the header, or
  2. Creating a custom page with custom styling, and including the dashboard with the {{element}} helper.

Let me know if you any further guidance on how to do this.

Thank you,
Heath

11

Heath, thanks for the feedback.

I can add text with background color:

image
image1557×432 72 KB

My attempt to change the color of the header itself doesn’t do anything, I was trying style with h1 or head:

image
image2049×427 72.5 KB

I was hoping to just edit elements of the current layout without starting over with a custom page and layout.

12

I was trying to apply my color change to the header, not the navbar itself.

Hope this helps someone else:

image
image878×76 19.6 KB