[FIXED] Dashticz CSS icons not doing anything.

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

Post Reply
ThirstyThursten
Posts: 23
Joined: Wednesday 16 December 2020 15:39
Target OS: Raspberry Pi / ODroid
Domoticz version: 2021.1
Location: The Netherlands
Contact:

[FIXED] Dashticz CSS icons not doing anything.

Post by ThirstyThursten »

Hey guys,
I'm back with another question..

I followed a (Dutch) blog of someone who made an awesome Dashboard he had a presence thing going on.

Now I want my icons on those blocks to have a green color (for being home) and a red one (for being away)

So these are the parts of the configs:

Code: Select all

var phone_thur				  = 46;

var blocks = {}

blocks[phone_thur] = {}
blocks[phone_thur]['title'] = 'Thur';
blocks[phone_thur]['icon'] = 'fas fa-male';
blocks[phone_thur]['width'] = 3;
blocks[phone_thur]['show_lastupdate'] = true;
blocks[phone_thur]['protected'] = true;
blocks[phone_thur]['hide_data'] = false;
Now this works and looks like this:
Presence.PNG
Presence.PNG (11.88 KiB) Viewed 1471 times
However when the state is ON (cause it's a dummy switch) it should be green and when off it should be red.

This is my CSS so far (I'll add 2 different versions I tried):

Code: Select all

.far,.fas,.wi {
   font-size:64px !important;
}

/* Change color of 'male' depending on state (on/off) */
.fas fa-male.on {
   color: #00FF00 !important;
}
.fas fa-male.off {
   color: #FF0000 !important;
}
/* Change color of 'female' depending on state (on/off) */
.fas.fa-female .on {
   color: #00FF00;
}
.fas.fa-female .off {
   color: #FF0000;
  
}

.block_46 .icon {
	color: #00FF00 !important;
}
And this is what was in the original code from that Blog Guy:

Code: Select all

// Colors from blog:  #aaa9a9 #8c8989
*/

/* Change colors of pop-up graph */
#graphoutput { 
		background: black; 
		color: white;
}

/* Change colors of pop-up graph */
 .graphpopup {
	background: black;
	color: white;
}

/* Change color of buttons */
.btn {
    background-color: #aaa9a9;
    color: black;
    border: 1px solid black;
}

/* Large & Heavy Blocks Titles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
    margin-left: 15px;
    font-weight: 900;
    font-size: 200%;
    foreground: blue;
}

/* Different color for Block Titles */
h3 {
	color: white;
	font-weight: 900;
}

/* Different fontsize & color for Text inside Block */
.title { 
    color: #8c8989 !important; 
    font-size: 16px !important;
} 

.css_woonkamer {
}

/* Different color for Value inside Block */
.value { 
    color: white !important;
} 
/* #8c8989 */
/* Title blocks (Height) */
div.mh.titlegroups {
    height: 60px !important;    /* default height=75px */
    padding-top: 3px;           /* center text for new height */
    color: white;
}

/* Space between blocks */
.transbg
{
    border-width: 5px !important;
}

/* Change spacing between borders, background and rounded corners */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
  padding-top:15px;
  padding-bottom:15px;
  border: 7px solid rgba(255,255,255,0);    /* spacing between borders 7px */
  background: rgba(0,0,0, 0.4);             /* transparancy of 0.4 (larger is darker) */
  background-clip: padding-box;
  border-radius: 20px;                      /* rounded corners */                   
}

/* Change background of scene block (350=movies, 351=voetbal, 352=ontspanning*/
.block_350.transbg,
.block_350.transbg {
  background-color: rgba(255, 0, 0, 0.3) !important;
}
.block_351.transbg,
.block_351.transbg {
  background-color: rgba(0, 255, 0, 0.3) !important;
}
.block_352.transbg,
.block_352.transbg {
  background-color: rgba(255, 235, 59, 0.3) !important;
}

/* Larger 'power-off' icon */
.fa.fa-power-off {
    font-size: 36px
}
/* Larger 'plug' icon */
.fa.fa-plug {
    font-size: 36px
}
/* Larger 'check-square' icon */
.fa.fa-check-square {
    font-size: 36px
}
/* Larger 'column' icon */
.fa.fa-columns {
    font-size: 36px
}
/* Larger 'male' icon */
.fa.fa-male {
    font-size: 36px
}
/* Larger 'female' icon */
.fa.fa-female {
    font-size: 36px
}
/* Larger 'microchip' icon */
.fa.fa-microchip {
    font-size: 36px
}
/* Larger 'lock' icon */
.fa.fa-lock {
    font-size: 36px
}
/* Larger 'fire' icon */
.fa.fa-fire {
    font-size: 36px
}
/* Larger 'bath' icon */
.fa.fa-bath {
    font-size: 36px
}

/* Change color of 'lightbulb' depending on state (on/off) */
.fas.fa-lightbulb {
   color:#F1C300;
}
.far.fa-lightbulb {
   color:#fff;
}
/* Change color of 'power-off' depending on state (on/off) */
.fa.fa-power-off.on {
   color:#00FF00;
}
.fa.fa-power-off.off {
   color:#FF0000;
}
/* Change color of 'plug' depending on state (on/off) */
.fa.fa-plug.on {
   color:#00FF00;
}
.fa.fa-plug.off {
   color:#FF0000;
}
/* Change color of 'check-square' depending on state (on/off) */
.fa.fa-check-square.on {
   color:#00FF00;
}
.fa.fa-check-square.off {
   color:#FF0000;
}
/* Change color of 'male' depending on state (on/off) */
.fa.fa-male.on {
   color:#00FF00;
}
.fa.fa-male.off {
   color:#FF0000;
}
/* Change color of 'female' depending on state (on/off) */
.fa.fa-female.on {
   color:#00FF00;
}
.fa.fa-female.off {
   color:#FF0000;
}

/* Change color of 'fa-door' depending on state (on/off) */
.fa.fa-lock.on {	
   color:#FF0000;
}
.fa.fa-lock.off{ 
   color:#00FF00;
}

/* Change color of 'fa-fire' depending on state (on/off) */
.fa.fa-fire.on {	
   color:#FF0000;
}
.fa.fa-fire.off{ 
   color:#00FF00;
}

/* Change color of 'fa-bath' depending on state (on/off) */
.fa.fa-bath.on {	
   color:#FF0000;
}
.fa.fa-bath.off{ 
   color:#00FF00;
}

/* Blocks name: 15px */
.title { 
    font-size:17px;
    color:white;
} 

.block_48 img {
  align:center !important;
}

Somehow none of the colors for any icons change. I almost feel like I need to set something in the CONFIG.js about use_custom_css = true;
Since none of my css is doing ANYTHING.. :(

Hope you guys can help me, I'm sorry if I missed something simple and stupid. I'm not too familiar with CSS nor JavaScript..
Ooh and just a Disclaimer: YES I went through ALL of the documantation of Dashticz, tried different things but nothing happened.

Greetings:
Thursten
Last edited by ThirstyThursten on Thursday 07 January 2021 14:01, edited 2 times in total.
User avatar
madpatrick
Posts: 659
Joined: Monday 26 December 2016 12:17
Target OS: Linux
Domoticz version: 2024.7
Location: Netherlands
Contact:

Re: Dashticz CSS icons not doing anything.

Post by madpatrick »

Try:

Code: Select all

.fa-male.on {color: green}
.fa-male.off {color: red}
.fa-female.on {color: green}
.fa-female.off {color: red}
See : viewtopic.php?p=194335#p194335

Is the font size changing to the 64px size ?
-= HP server GEN11 =- OZW -=- Toon2 (rooted) -=- Domoticz v2024.7 -=- Dashticz v3.14b on Tab8" =-
ThirstyThursten
Posts: 23
Joined: Wednesday 16 December 2020 15:39
Target OS: Raspberry Pi / ODroid
Domoticz version: 2021.1
Location: The Netherlands
Contact:

Re: Dashticz CSS icons not doing anything.

Post by ThirstyThursten »

@Madpatrick thanks for the suggestion, however it didn't change anything..
I tried some suggestions from the link you provided.

None of it works.. I feel like the file is just not being loaded.. Size didn't change either.
I'm not sure if I'm missing an include or like a head parameter/variable that connects to the blocks or something..

It's frustrating to say the least! :P
ThirstyThursten
Posts: 23
Joined: Wednesday 16 December 2020 15:39
Target OS: Raspberry Pi / ODroid
Domoticz version: 2021.1
Location: The Netherlands
Contact:

Re: Dashticz CSS icons not doing anything.

Post by ThirstyThursten »

Even when I add the following it doesn't work.. What is going on.. Could it be something in the automatic install or whatever? I just don't get it.. :oops:

Code: Select all

body {
  background-color: lightblue;
}
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz CSS icons not doing anything.

Post by Lokonli »

ThirstyThursten wrote: Thursday 07 January 2021 10:25 Even when I add the following it doesn't work.. What is going on.. Could it be something in the automatic install or whatever? I just don't get it.. :oops:

Code: Select all

body {
  background-color: lightblue;
}
Open DevTools with F12, refresh Dashticz. Check DevTools Console tab: Which user messages do you see? Any errors?

Can you post your complete custom/custom.css here? Then I'll check.
ThirstyThursten
Posts: 23
Joined: Wednesday 16 December 2020 15:39
Target OS: Raspberry Pi / ODroid
Domoticz version: 2021.1
Location: The Netherlands
Contact:

Re: Dashticz CSS icons not doing anything.

Post by ThirstyThursten »

Hey Lonkoli!
Good one! x'D
No error however it does say no valid custom/custom.css file found. Skipping.

See:
I'll add my files as well, if this doesn't cunclude anything however I need to edit them to keep privacy sensitive info out of there.
I'll add the versions of custom.css I have tried though!
Error.PNG
Error.PNG (13.88 KiB) Viewed 1428 times
Last testing version:

Code: Select all

/*
.far,.fas,.wi {
   font-size:64px !important;
}

/* Change color of 'male' depending on state (on/off) 
.fas fa-male.on {
   color: #00FF00 !important;
}
.fas fa-male.off {
   color: #FF0000 !important;
}
/* Change color of 'female' depending on state (on/off) 
.fas.fa-female .on {
   color: #00FF00;
}
.fas.fa-female .off {
   color: #FF0000;
  
}

**//


.fa-male.on {color: green}
.fa-male.off {color: red}
.fa-female.on {color: green}
.fa-female.off {color: red}

/*
.block_46 .icon {
	color: #00FF00 !important;
}
*/
body {
  background-color: lightblue;
}
This is someone elses I tried and took out some stuff I don't use:

Code: Select all

// Colors from blog:  #aaa9a9 #8c8989
*/

/* Change colors of pop-up graph */
#graphoutput { 
		background: black; 
		color: white;
}

/* Change colors of pop-up graph */
 .graphpopup {
	background: black;
	color: white;
}

/* Change color of buttons */
.btn {
    background-color: #aaa9a9;
    color: black;
    border: 1px solid black;
}

/* Large & Heavy Blocks Titles */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; 
    margin-left: 15px;
    font-weight: 900;
    font-size: 200%;
    foreground: blue;
}

/* Different color for Block Titles */
h3 {
	color: white;
	font-weight: 900;
}

/* Different fontsize & color for Text inside Block */
.title { 
    color: #8c8989 !important; 
    font-size: 16px !important;
} 

.css_woonkamer {
}

/* Different color for Value inside Block */
.value { 
    color: white !important;
} 
/* #8c8989 */
/* Title blocks (Height) */
div.mh.titlegroups {
    height: 60px !important;    /* default height=75px */
    padding-top: 3px;           /* center text for new height */
    color: white;
}

/* Space between blocks */
.transbg
{
    border-width: 5px !important;
}

/* Change spacing between borders, background and rounded corners */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
  padding-top:15px;
  padding-bottom:15px;
  border: 7px solid rgba(255,255,255,0);    /* spacing between borders 7px */
  background: rgba(0,0,0, 0.4);             /* transparancy of 0.4 (larger is darker) */
  background-clip: padding-box;
  border-radius: 20px;                      /* rounded corners */                   
}

/* Change background of scene block (350=movies, 351=voetbal, 352=ontspanning*/
.block_350.transbg,
.block_350.transbg {
  background-color: rgba(255, 0, 0, 0.3) !important;
}
.block_351.transbg,
.block_351.transbg {
  background-color: rgba(0, 255, 0, 0.3) !important;
}
.block_352.transbg,
.block_352.transbg {
  background-color: rgba(255, 235, 59, 0.3) !important;
}

/* Larger 'power-off' icon */
.fa.fa-power-off {
    font-size: 36px
}
/* Larger 'plug' icon */
.fa.fa-plug {
    font-size: 36px
}
/* Larger 'check-square' icon */
.fa.fa-check-square {
    font-size: 36px
}
/* Larger 'column' icon */
.fa.fa-columns {
    font-size: 36px
}
/* Larger 'male' icon */
.fa.fa-male {
    font-size: 36px
}
/* Larger 'female' icon */
.fa.fa-female {
    font-size: 36px
}
/* Larger 'microchip' icon */
.fa.fa-microchip {
    font-size: 36px
}
/* Larger 'lock' icon */
.fa.fa-lock {
    font-size: 36px
}
/* Larger 'fire' icon */
.fa.fa-fire {
    font-size: 36px
}
/* Larger 'bath' icon */
.fa.fa-bath {
    font-size: 36px
}

/* Change color of 'lightbulb' depending on state (on/off) */
.fas.fa-lightbulb {
   color:#F1C300;
}
.far.fa-lightbulb {
   color:#fff;
}
/* Change color of 'power-off' depending on state (on/off) */
.fa.fa-power-off.on {
   color:#00FF00;
}
.fa.fa-power-off.off {
   color:#FF0000;
}
/* Change color of 'plug' depending on state (on/off) */
.fa.fa-plug.on {
   color:#00FF00;
}
.fa.fa-plug.off {
   color:#FF0000;
}
/* Change color of 'check-square' depending on state (on/off) */
.fa.fa-check-square.on {
   color:#00FF00;
}
.fa.fa-check-square.off {
   color:#FF0000;
}
/* Change color of 'male' depending on state (on/off) */
.fa.fa-male.on {
   color:#00FF00;
}
.fa.fa-male.off {
   color:#FF0000;
}
/* Change color of 'female' depending on state (on/off) */
.fa.fa-female.on {
   color:#00FF00;
}
.fa.fa-female.off {
   color:#FF0000;
}

/* Change color of 'fa-door' depending on state (on/off) */
.fa.fa-lock.on {	
   color:#FF0000;
}
.fa.fa-lock.off{ 
   color:#00FF00;
}

/* Change color of 'fa-fire' depending on state (on/off) */
.fa.fa-fire.on {	
   color:#FF0000;
}
.fa.fa-fire.off{ 
   color:#00FF00;
}

/* Change color of 'fa-bath' depending on state (on/off) */
.fa.fa-bath.on {	
   color:#FF0000;
}
.fa.fa-bath.off{ 
   color:#00FF00;
}

/* Blocks name: 15px */
.title { 
    font-size:17px;
    color:white;
} 

.block_48 img {
  align:center !important;
}
And this is where the latest Test came from:

Code: Select all

.far,.fas,.wi {
   font-size:64px !important;
}

/* Change color of 'male' depending on state (on/off) */ 
.fas fa-male.on {
   color: #00FF00 !important;
}
.fas fa-male.off {
   color: #FF0000 !important;
}
/* Change color of 'female' depending on state (on/off) */
.fas.fa-female .on {
   color: #00FF00;
}
.fas.fa-female .off {
   color: #FF0000;
  
}





/*
.block_46 .icon {
	color: #00FF00 !important;
}
*/
body {
  background-color: lightblue;
}
Again thanks for all the help guys! Really appreciate it!
ThirstyThursten
Posts: 23
Joined: Wednesday 16 December 2020 15:39
Target OS: Raspberry Pi / ODroid
Domoticz version: 2021.1
Location: The Netherlands
Contact:

Re: Dashticz CSS icons not doing anything.

Post by ThirstyThursten »

And here is the Config now keep in mind I used someone else's Template so there's lots of comments and stuff and it's huge, to be ready for the future:

Code: Select all

config = {}
config['domoticz_ip'] = 'http://192.168.REDACTED';
config['app_title'] = 'Dashticz Dashboard';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '30';
config['login_timeout'] = '60';
config['user_name'] = 0;
config['pass_word'] = 0;
config['domoticz_timeout'] = '2000';
config['colorpicker'] = '2';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['default_cors_url'] = 0;
config['dashticz_php_path'] = './vendor/dashticz/';

config['theme'] = 'default';
config['background_image'] = 'img/bg2.jpg';
config['standby_after'] = 0;
config['start_page'] = 1;
config['enable_swiper'] = '2';
config['vertical_scroll'] = '2';
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '10';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['blink_color'] = '255, 255, 255, 1';

config['language'] = 'en_US';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'en_US';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';

config['setpoint_min'] = '5';
config['setpoint_max'] = '40';

config['owm_api'] = 'REDACTED';
config['owm_city'] = 'Waalre';
config['owm_name'] = '';
config['owm_country'] = 'NL';
config['owm_lang'] = 'en';
config['owm_cnt'] = '3';
config['owm_min'] = 1;
config['owm_days'] = 1;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;

config['disable_update_check'] = 0;
config['loginEnabled'] = 0;
config['enable_websocket'] = 1;
config['auto_positioning'] = 1;
config['use_favorites'] = 0;
config['last_update'] = 1;
config['disable_googleanalytics'] = 0;
config['hide_topbar'] = 0;
config['swiper_touch_move'] = 1;
config['security_button_icons'] = 0;
config['security_panel_lock'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;


// --------------------------------------------------------------------------------------------
// Screen definitions
// --------------------------------------------------------------------------------------------
var max_resolution_desktop    = 'default';
var max_resolution_smart      = 'tablet';

// --------------------------------------------------------------------------------------------
// Title Definitions
// --------------------------------------------------------------------------------------------
var title_misc                = 'title_misc';
var title_hue                 = 'title_hue';
var title_presence            = 'title_presence';
var title_temperature         = 'title_temperature';
var title_gas_and_elektra     = 'title_gas_and_elektra';
var title_news                = 'title_news'
var title_tweakers            = 'title_tweakers';
var title_tvguide_1           = 'title_tvguide_1';
var title_tvguide_2           = 'title_tvguide_2';
var title_radio               = 'title_radio';
var title_raspberry           = 'title_raspberry';
var title_solar               = 'title_solar'

// --------------------------------------------------------------------------------------------
// IDX Definitions
// --------------------------------------------------------------------------------------------

var phone_thur				  = 46;
var phone_peet				  = 47;

var temp_woonkamer_setpoint	  = 30;
var temperatuur_woonkamer     = 31;
var temperatuur_buiten 		  = 34;

//var temperatuur_zolder        = '154_1';
//var temperatuur_garage        = '794_1';

var p1_gas                    = 2;
var p1_elektra_nu			  = 1;

var p1_gas_nu                 = '2_1';
var p1_gas_totaal             = '2_2';

var p1_elektra_nu             = '1_1';
var p1_elektra_vandaag        = '1_2';
var p1_elektra_totaal         = '1_3';
//var p1_solar_nu				  = 43;
var p1_grafiek_gas            = 'graph_2';
var p1_grafiek_elektra        = 'graph_1';

var solar_nu				  = 82;
var solar_totaal			  = 81;
var solar_inverter			  = 83;

var pi_cpu_temperature        = 48;
var pi_cpu_usage              = 51;
var pi_cpu_speed              = 52;
var pi_cpu_memory             = 54;
var pi_up_time                = 53;
var pi_memory_usage           = 50;
var pi_domoticz_memory        = 62;

var news_1                    = 'news_1';
var news_2                    = 'news_2';

// --------------------------------------------------------------------------------------------
// Buttons
// --------------------------------------------------------------------------------------------
var buttons = {}


// --------------------------------------------------------------------------------------------
// Nieuws sites
// --------------------------------------------------------------------------------------------
buttons.nos        = { width:3, icon: 'far fa-newspaper', title: "NOS  ",     url: 'http://www.nos.nl' }
buttons.nunl       = { width:3, icon: 'far fa-newspaper', title: "Nu.nl",     url: 'http://www.nu.nl' }
buttons.telegraaf  = { width:3, icon: 'far fa-newspaper', title: "Telegraaf", url: 'http://telegraaf.nl' }



// --------------------------------------------------------------------------------------------
// Buienradar
// --------------------------------------------------------------------------------------------
buttons.buienradar = {width:6, isimage:true, btnimage: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=175&h=175', url: 'https://hetweerlokaal.nl/nederland/noord-brabant/waalre'}

// --------------------------------------------------------------------------------------------
// TV Gids
// --------------------------------------------------------------------------------------------

// 1 = NPO1, 2 = NPO2, 3 = NPO4, 4 = RTL4, 31 = RTL5, 36 = SBS6, 46 = RTL7, 37 = NET5, 34 = Veronica, 92 = RTL8
// 435 = 24Kitchen, 6 = Canvas, 466 = Ziggo Sport, 148 = Fox Sports Eredivisie
var tvguide = {}

tvguide.dutch_1 = { key:'dutch', width:12, channels: [1,2,3,4,31,36,46,37,34,92], maxitems: 8 }
tvguide.dutch_2 = { key:'dutch', width:12, channels: [435,466,148],               maxitems: 5 }

// --------------------------------------------------------------------------------------------
// Logging
// --------------------------------------------------------------------------------------------
buttons.log = {key:'log', width:12, icon:'fas fa-microchip', title: 'Logging Domoticz', log:true, level: 2}

// --------------------------------------------------------------------------------------------
// Radio
// --------------------------------------------------------------------------------------------
var _STREAMPLAYER_TRACKS     = [
   {"track":1,"name":"Radio 538","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/RADIO538.mp3"}, 
   {"track":2,"name":"Q-music","file":"http://icecast-qmusic.cdp.triple-it.nl/Qmusic_nl_live_96.mp3"},
   {"track":3,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
   {"track":4,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
   {"track":6,"name":"NPO Radio 1","file":"http://icecast.omroep.nl/radio1-bb-mp3"},
   {"track":7,"name":"Omroep Brabant","file":"http://streaming.omroepbrabant.nl/mp3"},
];

// --------------------------------------------------------------------------------------------
// Blocks
// --------------------------------------------------------------------------------------------
var blocks = {}

// Phone Thursten
blocks[phone_thur] = {}
blocks[phone_thur]['title'] = 'Thur';
blocks[phone_thur]['icon'] = 'fas fa-male';
blocks[phone_thur]['width'] = 3;
blocks[phone_thur]['last_update'] = true;
blocks[phone_thur]['protected'] = true;
blocks[phone_thur]['hide_data'] = false;

// Phone Peet
blocks[phone_peet] = {}
blocks[phone_peet]['title'] = 'Peet';
blocks[phone_peet]['icon'] = 'fas fa-female';
blocks[phone_peet]['width'] = 3;
blocks[phone_peet]['last_update'] = true;
blocks[phone_peet]['protected'] = true;
blocks[phone_peet]['hide_data'] = true;

// Temperatuur Woonkamer
blocks[temperatuur_woonkamer] = {}
blocks[temperatuur_woonkamer]['title'] = 'Woonkamer'
blocks[temperatuur_woonkamer]['width'] = 3;
blocks[temperatuur_woonkamer]['switch'] = true;
blocks[temperatuur_woonkamer]['last_update'] = false;

// Temperatuur Buiten
blocks[temperatuur_buiten] = {}
blocks[temperatuur_buiten]['title'] = 'Buiten'
blocks[temperatuur_buiten]['width'] = 3;
blocks[temperatuur_buiten]['switch'] = true;
blocks[temperatuur_buiten]['last_update'] = false;

// Woonkamer Temp Setpoint
blocks[temp_woonkamer_setpoint] = {}
blocks[temp_woonkamer_setpoint]['width'] = 4;
blocks[temp_woonkamer_setpoint]['last_update'] = false;

// Smartmeter Gas
blocks[p1_gas] = {}
blocks[p1_gas]['width'] = 4;
blocks[p1_gas]['last_update'] = false;
blocks[p1_gas]['protected'] = true;

blocks[p1_gas_nu] = {}
blocks[p1_gas_nu]['width'] = 4;
blocks[p1_gas_nu]['title'] = 'Gas Vandaag';
blocks[p1_gas_nu]['last_update'] = false;
blocks[p1_gas_nu]['protected'] = true;

blocks[p1_gas_totaal] = {}
blocks[p1_gas_totaal]['width'] = 4;
blocks[p1_gas_totaal]['title'] = 'Gas Totaal';
blocks[p1_gas_totaal]['last_update'] = false;
blocks[p1_gas_totaal]['protected'] = true;

// Smart Meter Elektra: _1 = Huidig Elektra, _2 = Elektra Vandaag, _3 = Elektra Totaal

// Smartmeter Elektra
blocks[p1_elektra_nu] = {}
blocks[p1_elektra_nu]['width'] = 4;
blocks[p1_elektra_nu]['title'] = 'Energie Nu';
blocks[p1_elektra_nu]['last_update'] = false;
blocks[p1_elektra_nu]['protected'] = true;


blocks[p1_elektra_vandaag] = {}
blocks[p1_elektra_vandaag]['width'] = 4;
blocks[p1_elektra_vandaag]['last_update'] = false;
blocks[p1_elektra_vandaag]['protected'] = true;

blocks[p1_elektra_totaal] = {}
blocks[p1_elektra_totaal]['width'] = 4;
blocks[p1_elektra_totaal]['title'] = 'Energie Totaal';
blocks[p1_elektra_totaal]['last_update'] = false;
blocks[p1_elektra_totaal]['protected'] = true;

// Definition 'Gas' graph (= device 137)
blocks[p1_grafiek_gas] = {
  title: 'Gas',
  width: 6,
  height: '200px',
  custom : {
  	"maand": {
        graph: 'bar',
  		range: 'month',
		groupBy: 'day',
		data: {
		  	Gas: 'd.v_2'
		}  		  		
  	},
  	"week per dag": {
		graph: 'bar',
  		range: 'month',
		groupBy: 'day',
		filter: '7 days',
		data: {
		  	Gas: 'd.v_2'
		  },		  
  	},
  	"jaar": {
		graph: 'bar',
  		range: 'year',
		groupBy: 'month',
		data: {
		  	Gas: 'd.v_2'
		  },		  
  	},
  	"dag": {
        graph: 'bar',
  		range: 'day',
		groupBy: 'hour',
		data: {
		  	Gas: 'd.v_2'
		}  		  		
  	},
  },
  legend: false,
  datasetColors: ['gray'],
	  displayFormats : {
	  minute: 'h:mm',
	  hour: 'h:mm',
	  day: 'DD MMM',
	  week: 'DD MMM',
	  month: 'MMM',
	}
}

// Definition 'Elektriciteit' graph (= device 1)
blocks[p1_grafiek_elektra] = {
  title: 'Elektriciteit',
  width: 6,
  height: '200px',
  custom : {
  	"maand": {
        graph: 'bar',
  		range: 'month',
		groupBy: 'day',
		data: {
		  	Elektra: 'd.v_1+d.v2_1'
		}  		  		
  	},
  	"week per dag": {
		graph: 'bar',
  		range: 'month',
		groupBy: 'day',
		filter: '7 days',
		data: {
		  	Elektra: 'd.v_1+d.v2_1'
		  },		  
  	},
  	"jaar": {
		graph: 'bar',
  		range: 'year',
		groupBy: 'month',
		data: {
		  	Elektra: 'd.v_1+d.v2_1'
		},		  
  	},
  	"dag": {
        graph: 'bar',
  		range: 'day',
		groupBy: 'hour',
		data: {
		  	Elektra: 'd.v_1+d.v2_1'
		  }  		  		
  	},  	
  },
  legend: false,
  datasetColors: ['gray'],
	  displayFormats : {
	  minute: 'h:mm',
	  hour: 'h:mm',
	  day: 'DD MMM',
	  week: 'DD MMM',
	  month: 'MMM',
	}
}

// Solar Info - Growatt
blocks[solar_nu] = {}
blocks[solar_nu]['width'] = 4;
blocks[solar_nu]['title'] = 'Solar Nu';
blocks[solar_nu]['last_update'] = false;
blocks[solar_nu]['protected'] = true;

blocks[solar_totaal] = {}
blocks[solar_totaal]['width'] = 4;
blocks[solar_totaal]['title'] = 'Solar Totaal';
blocks[solar_totaal]['last_update'] = false;
blocks[solar_totaal]['protected'] = true;

blocks[solar_inverter] = {}
blocks[solar_inverter]['title'] = 'Inverter';
blocks[solar_inverter]['width'] = 3;
blocks[solar_inverter]['last_update'] = false;
blocks[solar_inverter]['protected'] = true;
blocks[solar_inverter]['hide_data'] = true;

//
// Raspberry PI statistics
//
blocks[pi_cpu_temperature] = {};
blocks[pi_cpu_temperature]['width'] = 6;
blocks[pi_cpu_temperature]['icon'] = 'fa fa-microchip';
blocks[pi_cpu_temperature]['last_update'] = false;

blocks[pi_cpu_usage] = {};
blocks[pi_cpu_usage]['width'] = 6;
blocks[pi_cpu_usage]['icon'] = 'fa fa-microchip';
blocks[pi_cpu_usage]['last_update'] = false;

blocks[pi_cpu_speed] = {};
blocks[pi_cpu_speed]['width'] = 6;
blocks[pi_cpu_speed]['icon'] = 'fa fa-microchip';
blocks[pi_cpu_speed]['last_update'] = false;

blocks[pi_cpu_memory] = {};
blocks[pi_cpu_memory]['width'] = 6;
blocks[pi_cpu_memory]['icon'] = 'fa fa-microchip';
blocks[pi_cpu_memory]['last_update'] = false;

blocks[pi_up_time] = {};
blocks[pi_up_time]['width'] = 6;
blocks[pi_up_time]['icon'] = 'fa fa-microchip';
blocks[pi_up_time]['last_update'] = false;

blocks[pi_memory_usage] = {};
blocks[pi_memory_usage]['width'] = 6;
blocks[pi_memory_usage]['icon'] = 'fa fa-microchip';
blocks[pi_memory_usage]['last_update'] = false;

blocks[pi_domoticz_memory] = {};
blocks[pi_domoticz_memory]['width'] = 6;
blocks[pi_domoticz_memory]['icon'] = 'fa fa-microchip';
blocks[pi_domoticz_memory]['last_update'] = false;

// Newsfeed
blocks[news_1] = {}
blocks[news_1]['feed'] = 'http://www.nu.nl/rss/algemeen';
blocks[news_1]['title'] = 'NU.nl RSS Feed';
blocks[news_1]['width'] = 12;
blocks[news_1]['maxheight'] = 'auto';
blocks[news_1]['protected'] = true;

blocks[news_2] = {}
blocks[news_2]['feed'] = 'https://feeds.feedburner.com/tweakers/nieuws';
blocks[news_2]['width'] = 12;
blocks[news_2]['protected'] = true;


// --------------------------------------------------------------------------------------------
// Title Blocks
// --------------------------------------------------------------------------------------------

// Title: HUE lichten
blocks[title_hue] = {}
blocks[title_hue]['type'] = 'blocktitle'
blocks[title_hue]['title'] = 'Hue Lichten'

// Title: Aanwezigheid
blocks[title_presence] = {}
blocks[title_presence]['type'] = 'blocktitle'
blocks[title_presence]['title'] = 'Aanwezigheid'

// Title: Temperatuur
blocks[title_temperature] = {}
blocks[title_temperature]['type'] = 'blocktitle'
blocks[title_temperature]['title'] = 'Temperatuur'

// Title: Gas & Elektra
blocks[title_gas_and_elektra] = {}
blocks[title_gas_and_elektra]['type'] = 'blocktitle'
blocks[title_gas_and_elektra]['title'] = 'Gas & Elektra'

// Title: Nieuws
blocks[title_news] = {}
blocks[title_news]['type'] = 'blocktitle'
blocks[title_news]['title'] = 'Nieuws'

// Title: Tweakers
blocks[title_tweakers] = {}
blocks[title_tweakers]['type'] = 'blocktitle'
blocks[title_tweakers]['title'] = 'Tweakers'

// Title: TV Gids - NL Zenders
blocks[title_tvguide_1] = {}
blocks[title_tvguide_1]['type'] = 'blocktitle'
blocks[title_tvguide_1]['title'] = 'TV Gids - NL Zenders'

// Title: Radio
blocks[title_radio] = {}
blocks[title_radio]['type'] = 'blocktitle'
blocks[title_radio]['title'] = 'Radio'


// Title: Raspberry
blocks[title_raspberry] = {}
blocks[title_raspberry]['type'] = 'blocktitle'
blocks[title_raspberry]['title'] = 'Raspberry'

// Title: Diversen
blocks[title_misc] = {}
blocks[title_misc]['type'] = 'blocktitle'
blocks[title_misc]['title'] = 'Diversen'

// Title: Solar Info
blocks[title_solar] = {}
blocks[title_solar]['type'] = 'blocktitle'
blocks[title_solar]['title'] = 'Solar Info'

// --------------------------------------------------------------------------------------------
// Garbage Collector
// --------------------------------------------------------------------------------------------

config['garbage_company'] = 'REDACTED';
config['garbage_zipcode'] = 'REDACTED';
config['garbage_street'] = 'REDACTED';
config['garbage_housenumber'] = 'REDACTED';
config['garbage_maxitems'] = '4';
config['garbage_width'] = '5';
config['garbage_use_names'] = true;
config['garbage_use_colors'] = true;

config['garbage'] = {
    gft: {kliko: 'green', code: '#375b23', name: 'GFT'},
    pmd: {kliko: 'orange', code: '#db5518', name: 'PMD'},
    rest: {kliko: 'brown', code: '#7c3607', name: 'Restafval'},
    papier: {kliko: 'blue', code: '#153477', name: 'Papier'},
//    kca: {kliko: 'red', code: '#b21807', name: 'Chemisch afval'},
//    brown: {kliko: 'brown', code: '#5e5d5c', name: 'Bruin'},
//    black: {kliko: 'black', code: '#000000', name: 'Zwart'},
};



// --------------------------------------------------------------------------------------------
// Columns
// --------------------------------------------------------------------------------------------

var columns = {}

columns[1] = {}
columns[1]['blocks'] = [title_presence, phone_thur, phone_peet, title_temperature, temperatuur_woonkamer, temperatuur_buiten, title_solar, solar_inverter, solar_nu, solar_totaal]
columns[1]['width'] = 4;

columns[2] = {}
columns[2]['blocks'] = [title_misc, 'garbage', title_gas_and_elektra, temp_woonkamer_setpoint, p1_gas_nu, p1_gas_totaal, p1_elektra_nu, p1_elektra_vandaag, p1_elektra_totaal, p1_grafiek_gas, p1_grafiek_elektra] 
columns[2]['width'] = 5;

columns[3] = {}
columns[3]['blocks'] = ['sunrise', buttons.log]
columns[3]['width'] = 2; 

columns[5] = {}
columns[5]['blocks'] = [title_news, news_1, 'currentweather_big_owm', 'weather_owm']
columns[5]['width'] = 4; 

columns[6] = {}
columns[6]['blocks'] = [title_tvguide_1, tvguide.dutch_1] 
columns[6]['width'] = 4;

columns[9] = {}
columns[9]['blocks'] = [title_raspberry, pi_up_time, pi_cpu_usage, pi_cpu_temperature, pi_memory_usage, title_radio, 'streamplayer']
columns[9]['width'] = 4; 



// --------------------------------------------------------------------------------------------
// Screens
// --------------------------------------------------------------------------------------------
var screens = {}

screens[max_resolution_desktop] = {}
screens[max_resolution_desktop]['maxwidth'] = 2560;
screens[max_resolution_desktop]['maxheight'] = 1440;

screens[max_resolution_desktop][1] = {}
//screens[max_resolution_desktop][1]['background'] = 'bg14_lightgray.jpg';
screens[max_resolution_desktop][1]['columns'] = [1,2,3]

screens[max_resolution_desktop][2] = {}
//screens[max_resolution_desktop][2]['background'] = 'bg14_lightgray.jpg';
screens[max_resolution_desktop][2]['columns'] = [5,6,9]
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz CSS icons not doing anything.

Post by Lokonli »

Dashticz can't read custom/custom.css

That needs to be fixed first.

Double check the file name: It's case sensitive.

start with an empty custom.css file, and check that the warning disappears.

Further: Don't use double slash '//' in css files. It's not supported in CSS and will give errors.
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Dashticz CSS icons not doing anything.

Post by Lokonli »

then try this custom.css :

Code: Select all

.fas.fa-male.on {
   color: #00FF00 !important;
}
.fas.fa-male.off {
   color: #FF0000 !important;
}
.fas.fa-female.on {
   color: #00FF00  !important;
}
.fas.fa-female.off {
   color: #FF0000 !important;
  
}

I've removed 4x space, removed the comment line, added 2x !important
ThirstyThursten
Posts: 23
Joined: Wednesday 16 December 2020 15:39
Target OS: Raspberry Pi / ODroid
Domoticz version: 2021.1
Location: The Netherlands
Contact:

Re: Dashticz CSS icons not doing anything.

Post by ThirstyThursten »

OMG I just discovered that only the owner (pi) has read and write acces..
Right now it's 0600 .. That's doesn't work than..
I'll change the permissions to 0644 and see what will happen! If this has been the problem all along I'm gonna go crazy. xD
I'll report back! Stand-by
ThirstyThursten
Posts: 23
Joined: Wednesday 16 December 2020 15:39
Target OS: Raspberry Pi / ODroid
Domoticz version: 2021.1
Location: The Netherlands
Contact:

Re: Dashticz CSS icons not doing anything.

Post by ThirstyThursten »

Son of a ... It works now.. D:

Reee.. Thanks so much! However my first observation was kinda right, the custom.css was not being loaded in whatso ever! Now I noticed a few more errors/information messages in the f12 console!
So I will say TIL first check the console log ALWAYS! :)
Thanks guys! <3
Lokonli
Posts: 2287
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: [FIXED] Dashticz CSS icons not doing anything.

Post by Lokonli »

Excellent!
bakkie
Posts: 1
Joined: Monday 22 February 2021 20:41
Target OS: Raspberry Pi / ODroid
Domoticz version: 2020.2
Contact:

Re: [FIXED] Dashticz CSS icons not doing anything.

Post by bakkie »

I've had the same problem with a fresh install of Dashticz, but after changing the permission to 0644 it worked!

thank you very much! :D
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest