Hi,
I would like to style my table a bit more to fit in with the reset of the theme, at the moment it is a dark theme that does not really fit in for me, an pointers please
Have you set your dashboard theme to Dark Mode? If so, change to Light (default) or custom and play with the settings.
Yes theme is set to dark so that the text is light against the blue
I want the table to have a similar blue back ground and edges rounded, if that is possible
OK, that is getting into the area of CSS arts and craftiness... I can toss out this template example I found and play around with on my dashboard. But the exact inner workings are still on the high end of my learning curve. I suspect you just need to find the correct settings and setup a template for your table.
Change the template type to cover the entire dashboard or just a group.
[{"id":"ccb7cd96.46d8b","type":"ui_template","z":"9cf3a6d.1104258","group":"9cb4bc4d.96552","name":"Clock & Stylesheet","order":10,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n\n$(function() {\n if($('.md-toolbar-tools').length != 0){\n loadClock();\n }else setTimeout(loadClock, 500)\n});\n\nfunction loadClock(){\n $('#clock').remove();\n var toolbar = $('.md-toolbar-tools');\n \n var div = $('<div/>');\n var p = $('<p/ id=\"clock\">');\n \n div.append(p);\n div[0].style.margin = '5px 5px 5px auto';\n toolbar.append(div);\n\n function displayTitle(lh) {\n p.text(lh); \n }\n \n function upTime() {\n var d = new Date();\n p.text(d.toLocaleString());\n }\n\n if(document.clockInterval){ \n clearInterval(document.clockInterval);\n document.clockInterval = null;\n }\n \n document.clockInterval = setInterval(upTime,1000);\n}\n\n</script>\n\n<style>\n/*\nIt is reasnoble to declare the colors as CSS variables\nso they can be easily called by name where needed.\n\nYou can see that in many places the variables are not used. Change it!\n*/\n\n:root {\n --color-green-primary: rgb(51, 204, 51);\n --color-green-secondary: rgb(26, 101, 26);\n --color-red-primary: rgb(255, 0, 0);\n --color-red-secondary: rgba(153,0,0,1);\n --color-gray-primary:rgba(40,40,40,1);\n --color-gray-secondary:rgba(65,65,65,1);\n --color-text-primary: rgb(128, 128, 128);\n //--color-text-primary: rgb(230, 226, 209);\n --color-widget-border: rgb(84, 78, 78);\n}\n\n\n/*\nAll CSS adjustments are commented out.\nTurn rules on one by one and see the changes.\nDon't use too many elements cos it wil be confusing\nStart with simple elements like text, slider or button\n\nMany of elements like buttons have states, \nthose rules must be found and adjusted also.\n*/\n\n\n.masonry-container {\n position: relative;\n width: 100%;\n height:100%;\n margin: 0 auto;\n background: rgb(255,0,0);\n background: linear-gradient(180deg, var(--color-gray-primary) 0%, var(--color-gray-secondary) 100%);\n}\n\n\n.nr-dashboard-cardcontainer {\n position: relative;\n box-shadow: inset 0px 1px 4px 0px #000000bb;\n border-radius: 15px;\n}\n\n\n.nr-dashboard-theme ui-card-panel {\n background-color: #33333300;\n color:var(--color-text-primary);\n border-radius: 15px;\n box-shadow: 0 0 8px 0px #00000080;\n}\n\n\nbody.nr-dashboard-theme md-content md-card {\n background-color: #33333300;\n color: var(--color-text-primary);\n text-shadow: 4px 2px 4px #00000045;\n box-shadow: 0 -1px 5px 1px #00000045;\n border-radius: 12px;\n border: 1px solid var(--color-widget-border);\n}\n\n\n.nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: var(--color-text-primary);\n}\n\n\n.md-button {\n display: inline-block;\n position: relative;\n cursor: pointer;\n min-height: 36px;\n min-width: 88px;\n line-height: 36px;\n vertical-align: middle;\n align-items: center;\n text-align: center;\n border-radius: 12px;\n box-sizing: border-box;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n outline: none;\n border: 0;\n padding: 0 6px;\n margin: 6px 8px;\n background: transparent;\n color:var(--color-text-primary);\n white-space: nowrap;\n text-transform: uppercase;\n font-weight: 500;\n font-size: 14px;\n font-style: inherit;\n font-variant: inherit;\n font-family: inherit;\n text-decoration: none;\n overflow: hidden;\n transition: box-shadow .4s cubic-bezier(.25,.8,.25,1),background-color .4s cubic-bezier(.25,.8,.25,1);\n}\n\n\n.nr-dashboard-theme .nr-dashboard-button .md-button {\n background-color: #88888800;\n color:var(--color-text-primary);\n}\n\n\n.nr-dashboard-theme .nr-dashboard-button .md-button:hover {\n background-color: #88888855;\n}\n\n\nmd-slider .md-thumb {\n z-index: 1;\n position: absolute;\n left: -10px;\n top: 14px;\n width: 20px;\n height: 20px;\n border-radius: 20px;\n -webkit-transform: scale(.7);\n transform: scale(.7);\n transition: all .4s cubic-bezier(.25,.8,.25,1);\n box-shadow: 0 0 6px #00000070;\n}\n\n\n/*\nAdvanced stuff - dynamic change of card CSS\n\nClasses here can be used to make colored stripe at the top of card\nUsage is not in here, but they are added to md-card when needed within another template\n\n\n.carderr {\n background: rgb(255,0,0);\n background: linear-gradient(180deg, var(--color-red-primary) 0px, var(--color-red-secondary) 3px, rgba(80,80,80,1) 4px, rgba(45,45,45,1) 100%);\n}\n\n\n.cardok {\n background: rgb(39,255,0);\n background: linear-gradient(180deg, var(--color-green-primary) 0px, var(--color-green-secondary) 3px, rgba(70,70,70,1) 4px, rgba(40,40,40,1) 100%);\n}\n*/\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":470,"y":40,"wires":[[]]},{"id":"9cb4bc4d.96552","type":"ui_group","name":"RPi System Specs","tab":"ad4a1223.94ae8","order":1,"disp":true,"width":"20","collapse":false},{"id":"ad4a1223.94ae8","type":"ui_tab","z":"9cf3a6d.1104258","name":"RPi System Specs","icon":"computer","order":1,"disabled":false,"hidden":false}]
And this is an example that shows how the template can effect only a single node (eg. Table?) Ignore what it actually does as is not relevant to your use case, except showing how to use the Node ID.
[{"id":"f48f2c1f.cb5","type":"ui_template","z":"43641b25.40b524","group":"6dbf380d.f02078","name":"Button Hover CSS","order":1,"width":0,"height":0,"format":"<style id=\"dashboard-style-override\">\n/*.nr-dashboard-button .md-button:hover {\nbackground-color: #00ffff !important;\n}*/\n[node-id=\"15410fdb.9b30e\"] > button:hover {\n background-color: #00FF00 !important;\n label text: \"CLICK ME\" !important;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":170,"y":220,"wires":[[]]},{"id":"6dbf380d.f02078","type":"ui_group","name":"Hover","tab":"3f1f9dd5.c2e112","order":1,"disp":true,"width":"6","collapse":false},{"id":"3f1f9dd5.c2e112","type":"ui_tab","name":"Tests","icon":"dashboard","disabled":false,"hidden":false}]
Thank you, let me scratch and see if I can improve my CSS skills
Are there some idiot guide that explains what each field is called? Like below, but I am sure my fields are not correct and a 100 more.
You might want to check this:
[{"id":"c52c288.4988bd8","type":"ui_template","z":"113a5c80.015354","g":"36d35f1a.ae2bc","group":"f181724f.1e4828","name":"CSS: ui-table - grafana","order":1,"width":"0","height":"0","format":"<style>\n\n/* Tabelle selbst formatieren*/\n\n .tabulator{padding-left:2px;border:0px solid #BBB;background-color:#111217;font-size:18px}\n\n/* Header formatieren */\n .tabulator .tabulator-header{border-bottom:1px solid #BBB;background-color:#111217}\n .tabulator-col-content{background-color:#111217;height:37px}\n .tabulator .tabulator-header .tabulator-col{border-right:0px solid #aaa;background-color:#111217}\n .tabulator-arrow{visibility: collapse;}\n .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {padding-right: 2px;}\n\n/* Zellen formatieren*/\n .tabulator-row{min-height:31px;background-color:#191E21}\n .tabulator-row:nth-child(2n){background-color:#111217}\n .tabulator-row .tabulator-cell{border-right:0px solid #888; padding-top: 4px;}\n\n\n</style>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1400,"y":1200,"wires":[[]]},{"id":"f181724f.1e4828","type":"ui_group","name":"Raumklima","tab":"5a91a4b3.406c04","order":5,"disp":true,"width":"6","collapse":true},{"id":"5a91a4b3.406c04","type":"ui_tab","name":"Zentral","icon":"fa-home","order":1,"disabled":false,"hidden":false}]
With this I was able to align the table design with the overall dashboard theme
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
