OH3 - Inject CSS into Widgets/Pages

Setup, Configuration and Use Beginners
,
1

Dear Community,

i want to change the style of some elements in the newly introduced Pages of OH3.
The Idea is to change some visuals of my grafana charts. so i want to disable the back button but keep the timepicker, remove the background color and also some free space at the bottom.

grafik
grafik1024Ă—657 105 KB

I can inject these changes into grafana but then the ui would not be functional on their site where i want to keep the back-buttons and names.

So the question is:
is there a way to add css styling to the webview widget? can i probably already do that with the “style:” syntax?

Or can i globally inject css into the whole OH page?

Or is there probably another solution?

Greetings Jay

2

Okay,
injecting css into an iframe is quite more complicated than i thought. So i went for the inject of my css into the grafana style

i know this is not update-proofed but i did the following:
added following code into

/usr/share/grafana/public/build/grafana.dark.f6aff061…css

@import “/static/grafana.css”

in my grafana.css i got following .css to get my results:

.view-mode--tv .main-view {
    background-color: transparent !important;
}
body.view-mode--tv {
    background-color: transparent !important;
}


.view-mode--tv .navbar-edit {
    visibility: collapse;
}

.view-mode--tv .navbar-page-btn {
    visibility: collapse;
}

.view-mode--tv .navbar {
    opacity:0;
    position: absolute;
    width: 100%;
}

.view-mode--tv .navbar:hover {
    opacity:1;
}

.view-mode--tv .react-grid-layout.layout {
	height: 114% !important;
}

Results:

grafik
grafik1025Ă—612 39.5 KB

1 Like
3

Thank you for this hint. I was wondering exactly the same, if it is possible to manipulate the css in OH3 Pages. I have been on OH2 till a month ago, and to have a custom interface I have always been using HABPanel, heavily modified via custom widgets and additional css (see here for an example of a grafana modal).

Being able to do some (basic) customization in the native OH3 UI would be fun!

4

I would also love to see the possibility to change the OH3 styles :slight_smile:
But i think we can already ajust a lot of the widget style in the yaml files, even if i didn’t understand the whole syntax and possibilities yet.