To answer my own question, I solved this by doing the following:
Changed the color of each graph in grafana. There’s a color palette in grafana which I didn’t know about. I changed each graph to my preferred static color.
Changed the background color in mygrafana.css from matrix-theme “green” to grey.
Thanks a lot for this work !
I have questions :
Thanks a lot for your help and sorry for my (very) bad english… 
Hi,
wonderful Theme, love the colors.
Just have one question, the different colors apply automaticly, depending on how many bigDash oder sections i have in the Widget, bit is there a way, to tell the section a spacific number.
bigDash uses pride 1, 2 and 3, and i would like the following section to have 4, 5 and so on? Is that possible?
Can you put your json from the last screenshot (desktop version) ?
thanks a lot !
I am using this awesome theme for different purposes to its origins but cannot work out where the spaces are between each column - I would love to remove these down to 2 or 3 pixels but cant find it in the css can anyone point me to the right area?
I am also looking to use the temperature panels with grafana graphs - copying some of the examples above I get so far but it looks like the graph wont be spanning the whole panel, nor does it show at all - if I copy the image link to a seperate browser window the graph shows fine
Hi All,
Firstly, thanks Patrick for the matrix/pride themes and your and others contributions to the forum. I’d get nowhere if not standing on the shoulders of others.
I’m having some interesting issues with this on IOS (12/12.2 on iPad) using Safari PWA from home screen.
I’ve modified the code to display temps using a smaller font for the decimal component as others have done above (using the main/decimal/sub class). When I do, updates/refresh of the temperature stops working properly. This ONLY occurs on IOS. chrome on OSX for example, works perfectly. Symptoms are the temp fails to update sometimes, and other times, the decimal component appears “overwritten”, like there are multiple digits being drawn on top of one another. It’s most prevalent when the temperature is an integer (ie, more likely to be seen when the openhab number item is updated to 26 and displayed as 26.0, then updated to say 26.1, but this may be a red herring as it does occur on any update. Sometimes it appears the number just doesn’t get updated at all when the item is updated. I’ve tried various ways of splitting the temp but none seem to fix it. The trigger appears to be splitting it in the first place and using the decimal class. As soon as I revert to a single number it all works.
Here are some examples of code that causes the problem:
<div class="main">{{(itemValue('Office_Motion_Temp') | number:1).split('.')[0]}}</div>
<div class="decimals">.{{(itemValue('Office_Motion_Temp') | number:1).split('.')[1]}}</div>
<div class="sub">°C</div>
and this doesn’t work either:
<div class="main">{{('%.1f' | sprintf:itemValue('Office_Motion_Temp')).split('.')[0]}}</div>
<div class="decimals">.{{('%.1f' | sprintf:itemValue('Office_Motion_Temp')).split('.')[1]}}</div>
<div class="sub">°C</div>
nor this:
<div class="main">{{(('%.1f' | sprintf:itemValue('Z_Garage_Temp')) | number:1).split('.')[0].substring(2,0)}}</div>
<div class="decimals">.{{(('%.1f' | sprintf:itemValue('Z_Garage_Temp')) | number:1).split('.')[1].substring(0,1)}}</div>
<div class="sub">°C</div>
but this is fine:
<div class="main">{{itemValue('Office_Motion_Temp') | number:1}}</div>
<div class="sub">°C</div>
Which leads to me conclude either I am missing something (yes, I am fairly new to all this css/angular stuff), or there is a bug somewhere.
The other problem I have is the refresh button on the top right causes the temperature items to refresh to the value items contained when first launched. This occurs no matter what (not related to above). The only way to fix this is clear safari browser history. Makes the refresh button useless on IOS in fullscreen. Again, works fine in chrome on a mac.
I’m not sure if these problems are actually bugs in hapbanel, IOS safari, or in my own implementation.
Any pointers would be appreciated as it sounds like some of you, including Patrick are using this code on IOS, presumably without hiccups?
Awesome new skin! How did you make each room appear under LIGHTS and to also add them to get how many are on?
I can separate the rooms, but i’m not able to do the math.
Thanks!
The way that I show how many lights are ON is add a Group in the .items file; for example:
Group:Switch:OR(ON, OFF) gLight "Lights"
and then in HabPanel add the following code:
<div class="name">{{(itemsInGroup('gLight') | filter:{state:'ON'}).length}} / {{(itemsInGroup('gLight')).length}}</div>
Remember that you need to add the group ‘gLight’ to your lights in the items file (i.e.)
Switch GF_HallLight "Hall Light" <light> (gLight)
Right, silly of me. I have groups, but it never occurred to me that I could create a second group with all the lights and have that group count the state.
Thanks for the explanation!
hi @pmpkk and thanks for this great work!
I have a question about which editor you using for dashboard editing <-> converting to json? I assume you are not escaping all chars manually as well as putting everything to one line? 
and vice versa, would it be possible to provide html of the dashboards directly? instead of jsons.?
Thanks for answer.
same here, I found a website to convert json to html, which makes “one-line json widget” readable 
For designing my own dashboard from scratch is there any wysiwyg editors you could recommend for html design, css and json converting?
Cheers
hi i’m using the pride theme.
But i got a quest the volume UP/DOWN is giving me 0% or 100% volume.(AMP MARANTZ)
How can i change this or use a slider to controle my volume?
I’ve replaced the buttons with a slider for my spotify volume for example.
The design is not optimal but it’s working.
<div class="widget">
<div class="icon off"><svg viewBox="0 0 48 48"><use xlink:href="/static/matrix-theme/squidink.svg#volume"></use></svg></div>
<div class="name">Volume</div>
<ng-container
ng-init="modelVolume = {
item: 'spotifyDeviceVolume',
hidelimits: true,
step: 1,
};
">
<div class="valueGroup"><div class="value"><widget-slider ng-model="modelVolume" /></div></div>
</ng-container>
</div>
The device volume is definded as a dimmer in my items:
Dimmer spotifyDeviceVolume "Volume active Device [%s]" {channel="spotify:player:user1:deviceVolume"}
Hi, This will not show the correct temperature. When U use the “| number:0”, the site will rounding the number. So when the temp is 27.6, based your solution, it will show 28.6, but, when the temp is 27.4, it will show 27.4, what is the corrent temp. U should use the split there too
Br,
O.
This looks awesome!
Did you update the panels as well or should i download the pages provided in the matrix-theme thread?
I noticed that the ones on github are 2 years old or is this only the upload date of the initial version?
thank you so much!
It’d be great if you could share the .json files as well. Some new stuff is going on
I like the arrow next to the temperatures and the labeling of the graphs (min max).
The sun position widget is dope!
exactly the same problem here.
i tried the direct “image” as well - with chrome and safari and i did not have any luck.
has anyone got this working and will push us in the right direction? 
ok i got it - finally!
# set to true if you want to allow browsers to render Grafana in a <frame>, <iframe>, <embed> or <object>. default is false.
allow_embedding = true
i can only access the grafana url when using chrome. i was wondering why it does not work (only trying safari) and then it does with chrome. don’t know why but at least it’s working now.
-> on the graph click the marked button (see screenshot) and copy/paste the url into the habpanel
enjoy
Hi there,
Can you post some json part of code for dimmer with slider ad you have for volume in example pic.
Or maybe there is standard slider place in between your pride elements
Thanks
But like this the graph its not updating . You must manual refresh the browser to take effect or not?
