CSS settings for one device

[pvklink]

Hi All,

I have the following css for tv's that show by pinging them
.fa-tv.on {color:#F1C300;}
.fa-tv.off {color:#fff;}

This went all well
i have one broadlink device (tv). With the push on button i can set this on or off
I use the same icon fa-tv for this. But this device is default on, so it needs the opposit colors of .fa-tv.on/off

How can i make icon settings special for one device ?

[Lokonli]

Have a look at the new documentation:

https://dashticz-v2.readthedocs.io/en/l ... icz-switch

In general:
If I see questions in the forum I'll try to include the answer in the documentation, and place a link here.

[pvklink]

that looks great!

Think that i need the below code to solve my problem, i will try it!

.block_120 .on {
color:#F1C300;
}

.block_120 .off {
color:#fff;
}

[Lokonli]

You have to replace 120 with the id of your device.

Verstuurd vanaf mijn SM-A320FL met Tapatalk

[pvklink]

ofcourse and thanks!
I was also looking for the meaning of the .important property in the css... couldnt find it..

[pvklink]

@Lokonli
i tried to adjust my css file with

custom.css
.block_1163.on {color:#F1C300;}
.block_1163.off {color:#fff;}

the device 1163 still uses
.fa-bell.on {color: red; !important;}
.fa-bell.off {color: green; !important;}

this is my block device in config.js
blocks[1163] = {}
blocks[1163]['title'] = 'Vorst alarm 4c';
blocks[1163]['icon'] = 'fas fa-bell';
blocks[1163]['hide_data'] = true;
blocks[1163]['speak'] = 'Vorstalarm aangepast';
blocks[1163]['width'] = 3;

[Lokonli]

@Lokonli
i tried to adjust my css file with

custom.css
.block_1163.on {color:#F1C300;}
.block_1163.off {color:#fff;}

the device 1163 still uses
.fa-bell.on {color: red; !important;}
.fa-bell.off {color: green; !important;}

this is my block device in config.js
blocks[1163] = {}
blocks[1163]['title'] = 'Vorst alarm 4c';
blocks[1163]['icon'] = 'fas fa-bell';
blocks[1163]['hide_data'] = true;
blocks[1163]['speak'] = 'Vorstalarm aangepast';
blocks[1163]['width'] = 3;

(There should be no `;` before !important)

I guess both are working, but not simultaneously.
If you want to keep both, and only change for block 1163, then try with:

Code: Select all

.fa-bell.on {color: red !important;} 
.fa-bell.off {color: green !important;}

.block_1163.fa-bell.on {color:#F1C300 !important;}
.block_1163.fa-bell.off {color:#fff !important;}

I'm not sure whether you need the !important addition. Depends on your other style definitions. If it's not working try to remove the first two.

[pvklink]

ok, i changed it...it did not work..
So when you have 8 devices with the same icon, you have to use the same colors for all 8 for on and off?
Can i copy fa-bell and give it an other name, then i achieve the same result...how do i do that?

[Lokonli]

ok, i changed it...it did not work..
So when you have 8 devices with the same icon, you have to use the same colors for all 8 for on and off?
Can i copy fa-bell and give it an other name, then i achieve the same result...how do i do that?

Sorry, little mistake.
It should be:

Code: Select all

.fa-bell.on {color: red;} 
.fa-bell.off {color: green;}

.block_1163 .fa-bell.on {color:#F1C300;}
.block_1163 .fa-bell.off {color:#fff;}

(space after block_1163)

This should also work:

Code: Select all

.fa-bell.on {color: red;} 
.fa-bell.off {color: green;}

.block_1163 .on {color:#F1C300;}
.block_1163 .off {color:#fff;}

[pvklink]

Still does not work. I will put my files in this post

css file

Code: Select all

/* 
  https://fontawesome.com/icons?d=gallery&m=free
  https://htmlcolorcodes.com/

  wat doet :before achter on ?
  waarom moet de lightbulb met fas ervoor?
  wat doet important
  kan // niet ? dan werkt css niet

  afwijking per block je mag de icon ook weglaten
.block_1163 .fa-bell.on {color:#F1C300;}
.block_1163 .fa-bell.off {color:#fff;}

.block_1163 .on {color: red;}
.block_1163 .off {color: red;}


  .mh .btn  {font-size: 100% !important;}
*/

div.mh.titlegroups {
	border-radius: 15px;				/* Rounded corners */
}


/* Make the background of the titleblocks less high */
.transbg.titlegroups {
	height: 50px;
    padding: 0px;
}

.block_1163 .on {color: red;}
.block_1163 .off {color: red;}

.fa-chromecast.on {color:#F1C300;}
.fa-chromecast.off {color:#fff;}

.fa-cloud-showers-heavy.on {color: blue !important;}
.fa-cloud-showers-heavy.off {color: white !important;}

.fa-lightbulb.on {color:#F1C300;}
.fa-lightbulb.off {color:#fff;}

.fa-shower.on {color: blue !important;}
.fa-shower.off {color: white !important;}

.fa-tv.on {color:#F1C300;}
.fa-tv.off {color:#fff;}

.fa-snowflake.on {color: blue !important;}
.fa-snowflake.off {color: white !important;}

.fa-power-off.on {color: #bfbfbf;}
.fa-power-off.off {color:#F1C300;}

.fa-phone-volume.on {color:#F1C300;}
.fa-phone-volume.off {color:#fff;}

.fa-desktop.on {color:#F1C300;}  
.fa-desktop.off {color:#fff;}

.fa-laptop.on {color:#F1C300;}
.fa-laptop.off {color:#fff;}

.fa-tablet-alt.on {color:#F1C300;} 
.fa-tablet-alt.off {color:#fff;}

.fa-tasks.on {color:#F1C300;} 
.fa-tasks.off {color:#fff;}

.fa-tree.on {color:#F1C300;} 
.fa-tree.off {color:#fff;}

.fa-fire.on {color:#fff;} 
.fa-fire.off {color:#fff;}

.fa-users.on {color: blue !important;} 
.fa-users.off {color: white !important;}

.fa-hdd.on {color:#F1C300;} 
.fa-hdd.off {color:#fff;}

.fa-music.on {color:#F1C300;} 
.fa-music.off {color:#fff;}

.fa-bell.on {color: red !important;} 
.fa-bell.off {color: green !important;}

.fa-battery-full.on {color:#F1C300;}
.fa-battery-full.off {color:#fff;}

.fa-gamepad.on {color:#F1C300;} 
.fa-gamepad.off {color:#fff;}

.fa-camera.on {color:#fff;} 
.fa-camera.off {color:#F1C300;}

.fa-print.on {color:#F1C300;} 
.fa-print.off {color:#fff;}

.fa-tint.on {color:#F1C300;} 
.fa-tint.off {color:#fff;}

.fa-smoking.on {color: red !important;} 
.fa-smoking.off {color: green !important;}

.fa-exclamation-triangle.on {color: red !important;} 
.fa-exclamation-triangle.off {color: green !important;}

.fa-temperature-low.on {color:#F1C300;}
.fa-temperature-low.off {color:#fff;}

.fa-door-open.on {color: green !important;}
.fa-door-open.off {color: red !important;}

/* Selector buttons active*/
.btn.btn-default.active {
background-color: rgba(200,200,200,0.95) !important;
border-color: rgba(200,200,200,0.95) !important;
}

/* Selector buttons in-active*/
.btn.btn-default {
background-color: rgba(250,250,250,0.95) !important;
border-color: rgba(250,250,250,0.95) !important;
}

.swiper-pagination-bullet {width: 0px;height: 0px;}
.swiper-pagination-bullet {width: 35px !important;height: 35px !important;}
.swiper-pagination {text-align: left !important;}

js file

Code: Select all

//
var config = {}
config['domoticz_ip'] = 'http://192.168.20.32:82';
config['user_name'] = 'dashticz';
config['pass_word'] = 'xxxxxx';
config['app_title'] = 'Domotica familie ';
config['room_plan'] = '0';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '30';
config['default_cors_url'] = '';
config['dashticz_php_path'] = './vendor/dashticz/';
config['standby_call_url'] = '';
config['standby_call_url_on_end'] = '';
config['theme'] = 'default';
config['background_image'] = 'img/bg2.jpg';
config['standby_after'] = '0';
config['auto_swipe_back_to'] = '';
config['auto_swipe_back_after'] = '';
config['auto_slide_pages'] = '';
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = '';
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = '';
config['gm_zoomlevel'] = '';
config['gm_latitude'] = '';
config['gm_longitude'] = '';
config['speak_lang'] = 'nl-NL';
config['wu_api'] = '';
config['wu_city'] = 'Amsterdam';
config['wu_name'] = '';
config['wu_country'] = 'NL';
config['owm_api'] = '';
config['owm_city'] = 'Mainaschaff';
config['owm_name'] = '';
config['owm_country'] = 'de';
config['owm_lang'] = '';
config['owm_cnt'] = '4';
config['idx_moonpicture'] = '';
config['longfonds_zipcode'] = '';
config['longfonds_housenumber'] = '';
config['switch_horizon'] = '';
config['host_nzbget'] = '';
config['spot_clientid'] = '';
config['sonarr_url'] = '';
config['sonarr_apikey'] = '';
config['sonarr_maxitems'] = '';
config['garbage_company'] = '';
config['garbage_icalurl'] = '';
config['google_api_key'] = '';
config['garbage_calendar_id'] = '';
config['garbage_zipcode'] = '';
config['garbage_street'] = '';
config['garbage_housenumber'] = '';
config['garbage_housenumberadd'] = '';
config['garbage_maxitems'] = '';
config['garbage_width'] = '';
config['loginEnabled'] = 1;
config['disable_update_check'] = 0;
config['no_rgb'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['disable_googleanalytics'] = 0;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['security_button_icons'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['owm_days'] = 0;
config['owm_min'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['garbage_hideicon'] = 0;
config['garbage_icon_use_colors'] = 1;
config['garbage_use_colors'] = 0;
config['garbage_use_names'] = 0;
config['garbage_use_cors_prefix'] = 1;

var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"3fm","file":"http://icecast.omroep.nl/3fm-bb-mp3"},
{"track":2,"name":"538","file":"http://18973.live.streamtheworld.com/RADIO538.mp3"},
{"track":3,"name":"Q-Music","file":"http://icecast-qmusic.cdp.triple-it.nl/Qmusic_nl_live_96.mp33"},
{"track":4,"name":"Radio10","file":"http://stream.radio10.nl/radio10"},
{"track":5,"name":"Veronica","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/VERONICA.mp3"},
{"track":6,"name":"Skyradio","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/SKYRADIO.mp3"},
]

var frames = {}
<deleted>

var calendars = {}
<deleted>

var publictransport = {}
<deleted>

var tvguide = {}
tvguide.dutch = { key:'dutch', icon: 'fas fa-tv', width:12, channels: [1,2,3,4,31,36,37,34,466,420], maxitems: 10 }

var buttons = {}
<deleted>

var blocks = {}
//
// TITELBLOKKEN 
//
blocks['0'] = {}
blocks['0']['type'] = 'blocktitle';
blocks['0']['title'] = 'Observatie'; 

blocks['1'] = {}
blocks['1']['type'] = 'blocktitle';
blocks['1']['title'] = 'Scenes'; 

blocks['1a'] = {}
blocks['1a']['type'] = 'blocktitle';
blocks['1a']['title'] = 'Schakelaars';

blocks['1b'] = {}
blocks['1b']['type'] = 'blocktitle';
blocks['1b']['title'] = 'Tuin';

blocks['2a'] = {}
blocks['2a']['type'] = 'blocktitle';
blocks['2a']['title'] = 'Amusement'; 

blocks['2b'] = {}
blocks['2b']['type'] = 'blocktitle';
blocks['2b']['title'] = 'Netwerk'; 

blocks['3'] = {}
blocks['3']['type'] = 'blocktitle';
blocks['3']['title'] = 'Klimaat'; 

blocks['3b'] = {}
blocks['3b']['type'] = 'blocktitle';
blocks['3b']['title'] = 'Security'; 

blocks['4'] = {}
blocks['4']['type'] = 'blocktitle';
blocks['4']['title'] = 'Thuis'; 

blocks['4a'] = {}
blocks['4a']['type'] = 'blocktitle';
blocks['4a']['title'] = 'Tv'; 

blocks['4b'] = {}
blocks['4b']['type'] = 'blocktitle';
blocks['4b']['title'] = 'Pc en tablet'; 
//
// WEER
//
blocks[1163] = {}
blocks[1163]['title'] = 'Vorst alarm 4c';
blocks[1163]['icon'] = 'fas fa-snowflake';

blocks[1163]['hide_data'] = true;
blocks[1163]['speak'] = 'Vorstalarm aangepast';
blocks[1163]['width'] = 3;

blocks[457] = {}
blocks[457]['title'] = 'Temp. tuin';
blocks[457]['hide_data'] = true;
blocks[457]['last_update'] = false;
blocks[457]['switch'] =true;
blocks[457]['width'] = 3;

blocks[948] = {}
blocks[948]['title'] = 'Zuiderpark';
blocks[948]['hide_data'] = true;
blocks[948]['last_update'] = false;
blocks[948]['switch'] =true;
blocks[948]['width'] = 3;

blocks[455] = {}
blocks[455]['title'] = 'Zolder';
blocks[455]['hide_data'] = true;
blocks[455]['last_update'] = false;
blocks[455]['switch'] =true;
blocks[455]['width'] = 3;

blocks[1025] = {}
blocks[1025]['title'] = 'Zolder radiator';
blocks[1025]['hide_data'] = true;
blocks[1025]['switch'] =true;
blocks[1025]['width'] = 3;

blocks[1248] = {}
blocks[1248]['title'] = 'Strijp';
blocks[1248]['hide_data'] = true;
blocks[1248]['switch'] =true;
blocks[1248]['width'] = 3;

blocks[1303] = {}
blocks[1303]['title'] = 'Het regent';
blocks[1303]['hide_data'] = true;
blocks[1303]['icon'] = 'fas fa-cloud-showers-heavy';
blocks[1303]['width'] = 3;
blocks[1303]['speakOn'] = 'Het regent';
blocks[1303]['width'] = 3;

blocks[1049] = {}
blocks[1049]['title'] = 'Zolder default heating';
blocks[1049]['hide_data'] = true;
blocks[1049]['icon'] = 'fas fa-fire';
blocks[1049]['width'] = 7;
blocks[1049]['speak'] = 'Zolder verwarming aangepast';

blocks[1285] = {}
blocks[1285]['title'] = 'Weersituatie';
blocks[1285]['icon'] = 'fas fa-bell';
blocks[1285]['hide_data'] = true;
blocks[1285]['width'] = 5;
blocks[1285]['switch'] =true;
//veranderd te vaak
//blocks[1285]['speak'] = 'Weer situatie aangepast';

blocks[1305] = {}
blocks[1305]['title'] = 'Weerverwachting';
blocks[1305]['icon'] = 'fas fa-bell';
blocks[1305]['hide_data'] = true;
blocks[1305]['width'] = 12;
blocks[1305]['switch'] =true;

blocks[1250] = {}
blocks[1250]['title'] = 'Weeralarm';
blocks[1250]['icon'] = 'fas fa-bell';
blocks[1250]['hide_data'] = true;
blocks[1250]['width'] = 12;
blocks[1250]['speak'] = 'Weer alarm aangepast';
blocks[1250]['switch'] =true;
//
// NEWS FEED https://crossorigin.me/ niet meer gebruiken
//
blocks['news_nualg'] = {} 
blocks['news_nualg']['feed'] = 'http://www.nu.nl/rss/algemeen';

blocks['news_nusp'] = {} 
blocks['news_nusp']['feed'] = 'http://www.nu.nl/rss/sport';

blocks['news_twk'] = {}
blocks['news_twk']['feed'] = 'http://feeds.feedburner.com/tweakers/nieuws';
//
//SCENES
//
blocks['s13'] = {}
blocks['s13']['title'] = 'Sfeer verlichting binnen';
blocks['s13']['hide_data'] = true;
blocks['s13']['icon'] = 'fas fa-tasks';
blocks['s13']['width'] = 3;

blocks['s14'] = {}
blocks['s14']['title'] = 'Nacht verlichting';
blocks['s14']['hide_data'] = true;
blocks['s14']['icon'] = 'fas fa-tasks';
blocks['s14']['width'] = 3;

blocks['s15'] = {}
blocks['s15']['title'] = 'Sfeer verlichting buiten';
blocks['s15']['hide_data'] = true;
blocks['s15']['icon'] = 'fas fa-tasks';
blocks['s15']['width'] = 3;

blocks['s16'] = {}
blocks['s16']['title'] = 'Opstaan';
blocks['s16']['hide_data'] = true;
blocks['s16']['icon'] = 'fas fa-tasks';
blocks['s16']['width'] = 3;

blocks['s18'] = {}
blocks['s18']['title'] = 'Beneden weg';
blocks['s18']['hide_data'] = true;
blocks['s18']['icon'] = 'fas fa-tasks';
blocks['s18']['width'] = 3;

blocks['s19'] = {}
blocks['s19']['title'] = 'Aanwezig heid';
blocks['s19']['hide_data'] = true;
blocks['s19']['icon'] = 'fas fa-tasks';
blocks['s19']['width'] = 3;

blocks[985] = {}
blocks[985]['title'] = 'Visite';
blocks[985]['hide_data'] = true;
blocks[985]['icon'] = 'fas fa-users';
blocks[985]['width'] = 3;
blocks[985]['speak'] = 'Visitemodus wordt aangepast';

blocks[1286] = {}
blocks[1286]['title'] = 'Irrigatie timers';
blocks[1286]['hide_data'] = true;
blocks[1286]['icon'] = 'fas fa-users';
blocks[1286]['width'] = 3;
blocks[1286]['speakOn'] = 'Irrigatietimers aan';
blocks[1286]['speakOff'] = 'Irrigatietimers uit';

blocks[969] = {}
blocks[969]['title'] = 'Sproei border links';
blocks[969]['hide_data'] = true;
blocks[969]['icon'] = 'fas fa-shower';
blocks[969]['width'] = 4;
blocks[969]['speakOn'] = 'Irrigatie border links aan';
blocks[969]['speakOff'] = 'Irrigatie border links uit';

blocks[1190] = {}
blocks[1190]['title'] = 'Duur in min';
blocks[1190]['icon'] = '';
blocks[1190]['width'] = 8;

blocks[1189] = {}
blocks[1189]['title'] = 'Sproei gazon';
blocks[1189]['hide_data'] = true
blocks[1189]['speak'] = 'Irrigatie gazon aangepast';
;
blocks[1189]['icon'] = 'fas fa-shower';
blocks[1189]['width'] = 4;

blocks[1191] = {}
blocks[1191]['title'] = 'Duur in min';
blocks[1191]['icon'] = '';
blocks[1191]['width'] = 8;

blocks[973] = {}
blocks[973]['title'] = 'Sproei border rechts';
blocks[973]['hide_data'] = true;
blocks[973]['icon'] = 'fas fa-shower';
blocks[973]['width'] = 4;
blocks[973]['speakOn'] = 'Irrigatie border rechts aan';
blocks[973]['speakOff'] = 'Irrigatie border rechts uit';

blocks[1192] = {}
blocks[1192]['title'] = 'Duur in min';
blocks[1192]['icon'] = '';
blocks[1192]['width'] = 8;

blocks[1267] = {}
blocks[1267]['title'] = 'Sproei planten';
blocks[1267]['hide_data'] = true;
blocks[1267]['icon'] = 'fas fa-shower';
blocks[1267]['width'] = 4;
blocks[1267]['speak'] = 'Irrigatie planten aangepast';

blocks[1268] = {}
blocks[1268]['title'] = 'Duur in min';
blocks[1268]['icon'] = '';
blocks[1268]['width'] = 8;
//
// SCHAKELAARS
//
blocks[1012] = {}
blocks[1012]['title'] = 'Maak een foto';
blocks[1012]['icon'] = 'fas fa-camera';
blocks[1012]['hide_data'] = true;
blocks[1012]['width'] = 7;
blocks[1012]['speakOn'] = 'Er wordt een foto gemaakt';

blocks[86] = {}
blocks[86]['title'] = 'Rolluik';
blocks[86]['hide_data'] = true;
blocks[86]['width'] = 5;
blocks[86]['speak'] = 'Rolluik is gewijzigd';

blocks[1002] = {}
blocks[1002]['title'] = 'Lantaarn';
blocks[1002]['hide_data'] = true;
blocks[1002]['width'] = 3;
blocks[1002]['speakOn'] = 'Lantaarn is aan';
blocks[1002]['speakOff'] = 'Lantaarn is uit';

blocks[991] = {}
blocks[991]['title'] = 'Border';
blocks[991]['hide_data'] = true;
blocks[991]['width'] = 3;

blocks[145] = {}
blocks[145]['title'] = 'Printer';
blocks[145]['icon'] = 'fas fa-print';
blocks[145]['hide_data'] = true;
blocks[145]['width'] = 3;

blocks[262] = {}
blocks[262]['title'] = 'Boiler';
blocks[262]['icon'] = 'fas fa-tint';
blocks[262]['hide_data'] = true;
blocks[262]['width'] = 3;

blocks[260] = {}
blocks[260]['title'] = 'Edge router';
blocks[260]['icon'] = 'fas fa-hdd';
blocks[260]['hide_data'] = true;
blocks[260]['width'] = 3;

blocks[263] = {}
blocks[263]['title'] = 'Accu';
blocks[263]['icon'] = 'fas fa-battery-full';
blocks[263]['hide_data'] = true;
blocks[263]['width'] = 3;
blocks[263]['speakOn'] = 'Accu is aan';
blocks[263]['speakOn'] = 'Accu is uit';

blocks[1005] = {}
blocks[1005]['title'] = 'Wii en Tv';
blocks[1005]['icon'] = 'fas fa-gamepad';
blocks[1005]['hide_data'] = true;
blocks[1005]['width'] = 3;

blocks[1247] = {}
blocks[1247]['title'] = 'Tv huiskamer';
blocks[1247]['icon'] = 'fas fa-power-off';
blocks[1247]['hide_data'] = true;
blocks[1247]['width'] = 3;
blocks[1247]['speak'] = 'Tv Huiskamer is veranderd';
//
// ENTERTAINMENT
//
blocks[354] = {}
blocks[354]['title'] = 'Denon volume';
blocks[354]['icon'] = 'fas fa-music';
blocks[354]['width'] = 12;

blocks[353] = {}
blocks[353]['title'] = 'Denon source';
blocks[353]['icon'] = 'fas fa-music';
blocks[353]['width'] = 12;

blocks[134] = {}
blocks[134]['title'] = 'Denon zenders';
blocks[134]['icon'] = 'fas fa-music';
blocks[134]['width'] = 12;

blocks[139] = {}
blocks[139]['title'] = 'Denon mixer';
blocks[139]['icon'] = 'fas fa-music';
blocks[139]['width'] = 12;

blocks[1271] = {}
blocks[1271]['title'] = 'Chrome huiskamer';
blocks[1271]['icon'] = 'fas fa-music';
blocks[1271]['hide_data'] = true;
blocks[1271]['width'] = 9;

blocks[1273] = {}
blocks[1273]['title'] = 'Titel';
blocks[1273]['icon'] = 'fas fa-music';
blocks[1273]['hide_data'] = true;
blocks[1273]['width'] = 3;

blocks[1275] = {}
blocks[1275]['title'] = 'Chrome sonia';
blocks[1275]['icon'] = 'fas fa-music';
blocks[1275]['hide_data'] = true;
blocks[1275]['width'] = 9;

blocks[1277] = {}
blocks[1277]['title'] = 'Titel';
blocks[1277]['icon'] = 'fas fa-music';
blocks[1277]['hide_data'] = true;
blocks[1277]['width'] = 3;

blocks[277] = {}
blocks[277]['title'] = 'TV Woon kamer';
blocks[277]['icon'] = 'fas fa-tv';
blocks[277]['hide_data'] = true;
blocks[277]['width'] = 3;

blocks[827] = {}
blocks[827]['title'] = 'TV Werk kamer';
blocks[827]['icon'] = 'fas fa-tv';
blocks[827]['hide_data'] = true;
blocks[827]['width'] = 3;

blocks[805] = {}
blocks[805]['title'] = 'TV Niels';
blocks[805]['icon'] = 'fas fa-tv';
blocks[805]['hide_data'] = true;
blocks[805]['width'] = 3;
blocks[805]['speak'] = 'TV niels is veranderd';

blocks[675] = {}
blocks[675]['title'] = 'TV Sonia';
blocks[675]['icon'] = 'fas fa-tv';
blocks[675]['hide_data'] = true;
blocks[675]['width'] = 3;
blocks[675]['speakOn'] = 'TV sonia is aan';
blocks[675]['speakOff'] = 'TV sonia is uit';
//
// NETWORK 
//
blocks[287] = {}
blocks[287]['title'] = 'Zyxel';
blocks[287]['width'] = 4;
blocks[287]['icon'] = 'fas fa-hdd';
blocks[287]['hide_data'] = true;

blocks[286] = {}
blocks[286]['title'] = 'Unify';
blocks[286]['width'] = 4;
blocks[286]['icon'] = 'fas fa-hdd';
blocks[286]['hide_data'] = true;

blocks[289] = {}
blocks[289]['title'] = 'Qnap';
blocks[289]['width'] = 4;
blocks[289]['icon'] = 'fas fa-hdd';
blocks[289]['hide_data'] = true;

blocks[283] = {}
blocks[283]['title'] = 'Edge router';
blocks[283]['width'] = 4;
blocks[283]['icon'] = 'fas fa-hdd';
blocks[283]['hide_data'] = true;

blocks[284] = {}
blocks[284]['title'] = 'Ziggo lan';
blocks[284]['width'] = 4;
blocks[284]['icon'] = 'fas fa-hdd';
blocks[284]['hide_data'] = true;

blocks[285] = {}
blocks[285]['title'] = 'Ziggo wan';
blocks[285]['width'] = 4;
blocks[285]['icon'] = 'fas fa-hdd';
blocks[285]['hide_data'] = true;
//
// SECURITY
//
blocks[274] = {}
blocks[274]['title'] = 'Peter 06';
blocks[274]['icon'] = 'fas fa-phone-volume';
blocks[274]['hide_data'] = true;
blocks[274]['width'] = 3;

blocks[273] = {}
blocks[273]['title'] = 'Monique 06';
blocks[273]['icon'] = 'fas fa-phone-volume';
blocks[273]['hide_data'] = true;
blocks[273]['width'] = 3;

blocks[276] = {}
blocks[276]['title'] = 'Niels 06';
blocks[276]['icon'] = 'fas fa-phone-volume';
blocks[276]['hide_data'] = true;
blocks[276]['width'] = 3;

blocks[275] = {}
blocks[275]['title'] = 'Sonia 06';
blocks[275]['icon'] = 'fas fa-phone-volume';
blocks[275]['hide_data'] = true;
blocks[275]['width'] = 3;
//
// ALARMEN
//
blocks[207] = {}
blocks[207]['title'] = 'Alarm';
blocks[207]['hide_data'] = true;
blocks[207]['icon'] = 'fas fa-exclamation-triangle';
blocks[207]['width'] = 3;

blocks[210] = {}
blocks[210]['title'] = 'Huisdeur';
blocks[210]['icon'] = 'fas fa-door-open';
blocks[210]['hide_data'] = true;
blocks[210]['width'] = 3;

blocks[968] = {}
blocks[968]['title'] = 'Rook hal';
blocks[968]['icon'] = 'fas fa-smoking';
blocks[968]['hide_data'] = true;
blocks[968]['speak'] = 'Er is rook in de hal';
blocks[968]['width'] = 3;

blocks[966] = {}
blocks[966]['title'] = 'Rook trap';
blocks[966]['icon'] = 'fas fa-smoking';
blocks[966]['hide_data'] = true;
blocks[966]['speak'] = 'Er is rook op de trap';
blocks[966]['width'] = 3;

blocks[272] = {}
blocks[272]['title'] = 'Alarm knop';
blocks[272]['icon'] = 'fas fa-exclamation-triangle';
blocks[272]['width'] = 3;

blocks[1180] = {}
blocks[1180]['title'] = 'Bel tuin';
blocks[1180]['icon'] = 'fas fa-bell';
blocks[1180]['hide_data'] = true;
blocks[1180]['width'] = 3;

blocks[1182] = {}
blocks[1182]['title'] = 'Bel voordeur';
blocks[1182]['icon'] = 'fas fa-bell';
blocks[1182]['hide_data'] = true;
blocks[1182]['width'] = 3;

blocks[1149] = {}
blocks[1149]['title'] = 'Was machine';
blocks[1149]['icon'] = 'fas fa-bell';
blocks[1149]['hide_data'] = true;
blocks[1149]['width'] = 3;

blocks[153] = {}
blocks[153]['title'] = 'Bew. Service';
blocks[153]['icon'] = 'fas fa-bell';
blocks[153]['hide_data'] = true;
blocks[153]['width'] = 6;

blocks[15] = {}
blocks[15]['title'] = 'Bew. Alarm';
blocks[15]['icon'] = 'fas fa-bell';
blocks[15]['hide_data'] = true;
blocks[15]['width'] = 6;
//
// pc en tablet
//
blocks[282] = {}
blocks[282]['title'] = 'Peter pc vlan';
blocks[282]['hide_data'] = true;
blocks[282]['icon'] = 'fas fa-desktop';
blocks[282]['width'] = 3;

blocks[281] = {}
blocks[281]['title'] = 'Peter ptb';
blocks[281]['hide_data'] = true;
blocks[281]['icon'] = 'fas fa-laptop';
blocks[281]['width'] = 3;

blocks[678] = {}
blocks[678]['title'] = 'Peter tablet';
blocks[678]['hide_data'] = true;
blocks[678]['icon'] = 'fas fa-tablet-alt';
blocks[678]['width'] = 3;

blocks[291] = {}
blocks[291]['title'] = 'Monique tablet';
blocks[291]['hide_data'] = true;
blocks[291]['icon'] = 'fas fa-tablet-alt';
blocks[291]['width'] = 3;

blocks[786] = {}
blocks[786]['title'] = 'Niels pc ziggo';
blocks[786]['hide_data'] = true;
blocks[786]['icon'] = 'fas fa-desktop';
blocks[786]['speakOn'] = 'Pc niels is aan';
blocks[786]['speakOff'] = 'Pc niels is uit';
blocks[786]['width'] = 3;

blocks[278] = {}
blocks[278]['title'] = 'Niels pc vlan';
blocks[278]['hide_data'] = true;
blocks[278]['icon'] = 'fas fa-desktop';
blocks[278]['speak'] = 'Pc niels is veranderd';
blocks[278]['width'] = 3;

blocks[279] = {}
blocks[279]['title'] = 'Niels ptb';
blocks[279]['hide_data'] = true;
blocks[279]['icon'] = 'fas fa-laptop';
blocks[279]['speakOn'] = 'Portable niels is aan';
blocks[279]['speakOff'] = 'Portable niels is uit';
blocks[279]['width'] = 3;

blocks[676] = {}
blocks[676]['title'] = 'Niels pc vlan wifi';
blocks[676]['hide_data'] = true;
blocks[676]['icon'] = 'fas fa-desktop';
blocks[676]['speakOn'] = 'Pc niels wifi is aan';
blocks[676]['speakOff'] = 'Pc niels wifi is uit';
blocks[676]['width'] = 3;

blocks[280] = {}
blocks[280]['title'] = 'Sonia ptb';
blocks[280]['hide_data'] = true;
blocks[280]['icon'] = 'fas fa-laptop';
blocks[280]['width'] = 3;

blocks[677] = {}
blocks[677]['title'] = 'Sonia tablet';
blocks[677]['hide_data'] = true;
blocks[677]['icon'] = 'fas fa-tablet-alt';
blocks[677]['speakOn'] = 'Tablet sonia is aan';
blocks[677]['speakOff'] = 'Tablet sonia is uit';
blocks[677]['width'] = 3;

blocks[498] = {}
blocks[498]['title'] = 'PS4';
blocks[498]['hide_data'] = true;
blocks[498]['icon'] = 'fas fa-gamepad';
blocks[498]['width'] = 3;
//
// KOLOMMEN
// clock
var columns = {}
columns[1] = {}
columns[1]['blocks'] = [3,buttons.buienradar,1163,457,455,1025,1248,1303,1049,1285,1305,1250,calendars.fam]
columns[1]['width'] = 3; 

columns[2] = {}
columns[2]['blocks'] = ['1','s19','s16','s18','s13','s15','s14',985,1286,969,1190,1189,1191,973,1192,1267,1268,'1a',262,145,260,1247,1002,991,1005,263,1012,86]
columns[2]['width'] = 3; 

columns[3] = {}
columns[3]['blocks'] = ['2a',354,353,134,139,1271,1273,1275,1277,277,675,805,827,'2b',287,286,289,283,285,284]
columns[3]['width'] = 3; 

columns[4] = {}
columns[4]['blocks'] = [0,buttons.webcam1,buttons.webcam2,274,282,281,678,273,291,276,786,278,676,279,498,275,677,280,'3b',210,207,272,968,966,1180,1182,1149,153,15]
columns[4]['width'] = 3; 

columns[5] = {}
columns[5]['blocks'] = ['clock','sunrise',calendars.fam,calendars.peter,calendars.f1,calendars.ado]
columns[5]['width'] = 3; 

columns[6] = {}
columns[6]['blocks'] = ['news_nualg','news_nusp']
columns[6]['width'] = 6; 

columns[7] = {}
columns[7]['blocks'] = [publictransport.ovinfotrain,publictransport.ovinfotram,tvguide.dutch,'log','chromecast','streamplayer']
columns[7]['width'] = 3; 

//
// SCHERMEN
//
var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg1.jpg';
screens[1]['columns'] = [1,2,3,4];

screens[2] = {}
screens[2]['background'] = 'bg1.jpg';
screens[2]['columns'] = [5,6,7];

[Lokonli]

Still does not work. I will put my files in this post

css file

Code: Select all

/* 
  https://fontawesome.com/icons?d=gallery&m=free
  https://htmlcolorcodes.com/

  wat doet :before achter on ?
  waarom moet de lightbulb met fas ervoor?
  wat doet important
  kan // niet ? dan werkt css niet

  afwijking per block je mag de icon ook weglaten
.block_1163 .fa-bell.on {color:#F1C300;}
.block_1163 .fa-bell.off {color:#fff;}

.block_1163 .on {color: red;}
.block_1163 .off {color: red;}


  .mh .btn  {font-size: 100% !important;}
*/

div.mh.titlegroups {
	border-radius: 15px;				/* Rounded corners */
}


/* Make the background of the titleblocks less high */
.transbg.titlegroups {
	height: 50px;
    padding: 0px;
}

.block_1163 .on {color: red;}
.block_1163 .off {color: red;}

.fa-chromecast.on {color:#F1C300;}
.fa-chromecast.off {color:#fff;}

.fa-cloud-showers-heavy.on {color: blue !important;}
.fa-cloud-showers-heavy.off {color: white !important;}

.fa-lightbulb.on {color:#F1C300;}
.fa-lightbulb.off {color:#fff;}

.fa-shower.on {color: blue !important;}
.fa-shower.off {color: white !important;}

.fa-tv.on {color:#F1C300;}
.fa-tv.off {color:#fff;}

.fa-snowflake.on {color: blue !important;}
.fa-snowflake.off {color: white !important;}

.fa-power-off.on {color: #bfbfbf;}
.fa-power-off.off {color:#F1C300;}

.fa-phone-volume.on {color:#F1C300;}
.fa-phone-volume.off {color:#fff;}

.fa-desktop.on {color:#F1C300;}  
.fa-desktop.off {color:#fff;}

.fa-laptop.on {color:#F1C300;}
.fa-laptop.off {color:#fff;}

.fa-tablet-alt.on {color:#F1C300;} 
.fa-tablet-alt.off {color:#fff;}

.fa-tasks.on {color:#F1C300;} 
.fa-tasks.off {color:#fff;}

.fa-tree.on {color:#F1C300;} 
.fa-tree.off {color:#fff;}

.fa-fire.on {color:#fff;} 
.fa-fire.off {color:#fff;}

.fa-users.on {color: blue !important;} 
.fa-users.off {color: white !important;}

.fa-hdd.on {color:#F1C300;} 
.fa-hdd.off {color:#fff;}

.fa-music.on {color:#F1C300;} 
.fa-music.off {color:#fff;}

.fa-bell.on {color: red !important;} 
.fa-bell.off {color: green !important;}

.fa-battery-full.on {color:#F1C300;}
.fa-battery-full.off {color:#fff;}

.fa-gamepad.on {color:#F1C300;} 
.fa-gamepad.off {color:#fff;}

.fa-camera.on {color:#fff;} 
.fa-camera.off {color:#F1C300;}

.fa-print.on {color:#F1C300;} 
.fa-print.off {color:#fff;}

.fa-tint.on {color:#F1C300;} 
.fa-tint.off {color:#fff;}

.fa-smoking.on {color: red !important;} 
.fa-smoking.off {color: green !important;}

.fa-exclamation-triangle.on {color: red !important;} 
.fa-exclamation-triangle.off {color: green !important;}

.fa-temperature-low.on {color:#F1C300;}
.fa-temperature-low.off {color:#fff;}

.fa-door-open.on {color: green !important;}
.fa-door-open.off {color: red !important;}

/* Selector buttons active*/
.btn.btn-default.active {
background-color: rgba(200,200,200,0.95) !important;
border-color: rgba(200,200,200,0.95) !important;
}

/* Selector buttons in-active*/
.btn.btn-default {
background-color: rgba(250,250,250,0.95) !important;
border-color: rgba(250,250,250,0.95) !important;
}

.swiper-pagination-bullet {width: 0px;height: 0px;}
.swiper-pagination-bullet {width: 35px !important;height: 35px !important;}
.swiper-pagination {text-align: left !important;}

js file

Code: Select all

//
var config = {}
config['domoticz_ip'] = 'http://192.168.20.32:82';
config['user_name'] = 'dashticz';
config['pass_word'] = 'xxxxxx';
config['app_title'] = 'Domotica familie ';
config['room_plan'] = '0';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '30';
config['default_cors_url'] = '';
config['dashticz_php_path'] = './vendor/dashticz/';
config['standby_call_url'] = '';
config['standby_call_url_on_end'] = '';
config['theme'] = 'default';
config['background_image'] = 'img/bg2.jpg';
config['standby_after'] = '0';
config['auto_swipe_back_to'] = '';
config['auto_swipe_back_after'] = '';
config['auto_slide_pages'] = '';
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = '';
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = '';
config['gm_zoomlevel'] = '';
config['gm_latitude'] = '';
config['gm_longitude'] = '';
config['speak_lang'] = 'nl-NL';
config['wu_api'] = '';
config['wu_city'] = 'Amsterdam';
config['wu_name'] = '';
config['wu_country'] = 'NL';
config['owm_api'] = '';
config['owm_city'] = 'Mainaschaff';
config['owm_name'] = '';
config['owm_country'] = 'de';
config['owm_lang'] = '';
config['owm_cnt'] = '4';
config['idx_moonpicture'] = '';
config['longfonds_zipcode'] = '';
config['longfonds_housenumber'] = '';
config['switch_horizon'] = '';
config['host_nzbget'] = '';
config['spot_clientid'] = '';
config['sonarr_url'] = '';
config['sonarr_apikey'] = '';
config['sonarr_maxitems'] = '';
config['garbage_company'] = '';
config['garbage_icalurl'] = '';
config['google_api_key'] = '';
config['garbage_calendar_id'] = '';
config['garbage_zipcode'] = '';
config['garbage_street'] = '';
config['garbage_housenumber'] = '';
config['garbage_housenumberadd'] = '';
config['garbage_maxitems'] = '';
config['garbage_width'] = '';
config['loginEnabled'] = 1;
config['disable_update_check'] = 0;
config['no_rgb'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['disable_googleanalytics'] = 0;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['security_button_icons'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['owm_days'] = 0;
config['owm_min'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['garbage_hideicon'] = 0;
config['garbage_icon_use_colors'] = 1;
config['garbage_use_colors'] = 0;
config['garbage_use_names'] = 0;
config['garbage_use_cors_prefix'] = 1;

var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"3fm","file":"http://icecast.omroep.nl/3fm-bb-mp3"},
{"track":2,"name":"538","file":"http://18973.live.streamtheworld.com/RADIO538.mp3"},
{"track":3,"name":"Q-Music","file":"http://icecast-qmusic.cdp.triple-it.nl/Qmusic_nl_live_96.mp33"},
{"track":4,"name":"Radio10","file":"http://stream.radio10.nl/radio10"},
{"track":5,"name":"Veronica","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/VERONICA.mp3"},
{"track":6,"name":"Skyradio","file":"http://playerservices.streamtheworld.com/api/livestream-redirect/SKYRADIO.mp3"},
]

var frames = {}
<deleted>

var calendars = {}
<deleted>

var publictransport = {}
<deleted>

var tvguide = {}
tvguide.dutch = { key:'dutch', icon: 'fas fa-tv', width:12, channels: [1,2,3,4,31,36,37,34,466,420], maxitems: 10 }

var buttons = {}
<deleted>

var blocks = {}
//
// TITELBLOKKEN 
//
blocks['0'] = {}
blocks['0']['type'] = 'blocktitle';
blocks['0']['title'] = 'Observatie'; 

blocks['1'] = {}
blocks['1']['type'] = 'blocktitle';
blocks['1']['title'] = 'Scenes'; 

blocks['1a'] = {}
blocks['1a']['type'] = 'blocktitle';
blocks['1a']['title'] = 'Schakelaars';

blocks['1b'] = {}
blocks['1b']['type'] = 'blocktitle';
blocks['1b']['title'] = 'Tuin';

blocks['2a'] = {}
blocks['2a']['type'] = 'blocktitle';
blocks['2a']['title'] = 'Amusement'; 

blocks['2b'] = {}
blocks['2b']['type'] = 'blocktitle';
blocks['2b']['title'] = 'Netwerk'; 

blocks['3'] = {}
blocks['3']['type'] = 'blocktitle';
blocks['3']['title'] = 'Klimaat'; 

blocks['3b'] = {}
blocks['3b']['type'] = 'blocktitle';
blocks['3b']['title'] = 'Security'; 

blocks['4'] = {}
blocks['4']['type'] = 'blocktitle';
blocks['4']['title'] = 'Thuis'; 

blocks['4a'] = {}
blocks['4a']['type'] = 'blocktitle';
blocks['4a']['title'] = 'Tv'; 

blocks['4b'] = {}
blocks['4b']['type'] = 'blocktitle';
blocks['4b']['title'] = 'Pc en tablet'; 
//
// WEER
//
blocks[1163] = {}
blocks[1163]['title'] = 'Vorst alarm 4c';
blocks[1163]['icon'] = 'fas fa-snowflake';

blocks[1163]['hide_data'] = true;
blocks[1163]['speak'] = 'Vorstalarm aangepast';
blocks[1163]['width'] = 3;

blocks[457] = {}
blocks[457]['title'] = 'Temp. tuin';
blocks[457]['hide_data'] = true;
blocks[457]['last_update'] = false;
blocks[457]['switch'] =true;
blocks[457]['width'] = 3;

blocks[948] = {}
blocks[948]['title'] = 'Zuiderpark';
blocks[948]['hide_data'] = true;
blocks[948]['last_update'] = false;
blocks[948]['switch'] =true;
blocks[948]['width'] = 3;

blocks[455] = {}
blocks[455]['title'] = 'Zolder';
blocks[455]['hide_data'] = true;
blocks[455]['last_update'] = false;
blocks[455]['switch'] =true;
blocks[455]['width'] = 3;

blocks[1025] = {}
blocks[1025]['title'] = 'Zolder radiator';
blocks[1025]['hide_data'] = true;
blocks[1025]['switch'] =true;
blocks[1025]['width'] = 3;

blocks[1248] = {}
blocks[1248]['title'] = 'Strijp';
blocks[1248]['hide_data'] = true;
blocks[1248]['switch'] =true;
blocks[1248]['width'] = 3;

blocks[1303] = {}
blocks[1303]['title'] = 'Het regent';
blocks[1303]['hide_data'] = true;
blocks[1303]['icon'] = 'fas fa-cloud-showers-heavy';
blocks[1303]['width'] = 3;
blocks[1303]['speakOn'] = 'Het regent';
blocks[1303]['width'] = 3;

blocks[1049] = {}
blocks[1049]['title'] = 'Zolder default heating';
blocks[1049]['hide_data'] = true;
blocks[1049]['icon'] = 'fas fa-fire';
blocks[1049]['width'] = 7;
blocks[1049]['speak'] = 'Zolder verwarming aangepast';

blocks[1285] = {}
blocks[1285]['title'] = 'Weersituatie';
blocks[1285]['icon'] = 'fas fa-bell';
blocks[1285]['hide_data'] = true;
blocks[1285]['width'] = 5;
blocks[1285]['switch'] =true;
//veranderd te vaak
//blocks[1285]['speak'] = 'Weer situatie aangepast';

blocks[1305] = {}
blocks[1305]['title'] = 'Weerverwachting';
blocks[1305]['icon'] = 'fas fa-bell';
blocks[1305]['hide_data'] = true;
blocks[1305]['width'] = 12;
blocks[1305]['switch'] =true;

blocks[1250] = {}
blocks[1250]['title'] = 'Weeralarm';
blocks[1250]['icon'] = 'fas fa-bell';
blocks[1250]['hide_data'] = true;
blocks[1250]['width'] = 12;
blocks[1250]['speak'] = 'Weer alarm aangepast';
blocks[1250]['switch'] =true;
//
// NEWS FEED https://crossorigin.me/ niet meer gebruiken
//
blocks['news_nualg'] = {} 
blocks['news_nualg']['feed'] = 'http://www.nu.nl/rss/algemeen';

blocks['news_nusp'] = {} 
blocks['news_nusp']['feed'] = 'http://www.nu.nl/rss/sport';

blocks['news_twk'] = {}
blocks['news_twk']['feed'] = 'http://feeds.feedburner.com/tweakers/nieuws';
//
//SCENES
//
blocks['s13'] = {}
blocks['s13']['title'] = 'Sfeer verlichting binnen';
blocks['s13']['hide_data'] = true;
blocks['s13']['icon'] = 'fas fa-tasks';
blocks['s13']['width'] = 3;

blocks['s14'] = {}
blocks['s14']['title'] = 'Nacht verlichting';
blocks['s14']['hide_data'] = true;
blocks['s14']['icon'] = 'fas fa-tasks';
blocks['s14']['width'] = 3;

blocks['s15'] = {}
blocks['s15']['title'] = 'Sfeer verlichting buiten';
blocks['s15']['hide_data'] = true;
blocks['s15']['icon'] = 'fas fa-tasks';
blocks['s15']['width'] = 3;

blocks['s16'] = {}
blocks['s16']['title'] = 'Opstaan';
blocks['s16']['hide_data'] = true;
blocks['s16']['icon'] = 'fas fa-tasks';
blocks['s16']['width'] = 3;

blocks['s18'] = {}
blocks['s18']['title'] = 'Beneden weg';
blocks['s18']['hide_data'] = true;
blocks['s18']['icon'] = 'fas fa-tasks';
blocks['s18']['width'] = 3;

blocks['s19'] = {}
blocks['s19']['title'] = 'Aanwezig heid';
blocks['s19']['hide_data'] = true;
blocks['s19']['icon'] = 'fas fa-tasks';
blocks['s19']['width'] = 3;

blocks[985] = {}
blocks[985]['title'] = 'Visite';
blocks[985]['hide_data'] = true;
blocks[985]['icon'] = 'fas fa-users';
blocks[985]['width'] = 3;
blocks[985]['speak'] = 'Visitemodus wordt aangepast';

blocks[1286] = {}
blocks[1286]['title'] = 'Irrigatie timers';
blocks[1286]['hide_data'] = true;
blocks[1286]['icon'] = 'fas fa-users';
blocks[1286]['width'] = 3;
blocks[1286]['speakOn'] = 'Irrigatietimers aan';
blocks[1286]['speakOff'] = 'Irrigatietimers uit';

blocks[969] = {}
blocks[969]['title'] = 'Sproei border links';
blocks[969]['hide_data'] = true;
blocks[969]['icon'] = 'fas fa-shower';
blocks[969]['width'] = 4;
blocks[969]['speakOn'] = 'Irrigatie border links aan';
blocks[969]['speakOff'] = 'Irrigatie border links uit';

blocks[1190] = {}
blocks[1190]['title'] = 'Duur in min';
blocks[1190]['icon'] = '';
blocks[1190]['width'] = 8;

blocks[1189] = {}
blocks[1189]['title'] = 'Sproei gazon';
blocks[1189]['hide_data'] = true
blocks[1189]['speak'] = 'Irrigatie gazon aangepast';
;
blocks[1189]['icon'] = 'fas fa-shower';
blocks[1189]['width'] = 4;

blocks[1191] = {}
blocks[1191]['title'] = 'Duur in min';
blocks[1191]['icon'] = '';
blocks[1191]['width'] = 8;

blocks[973] = {}
blocks[973]['title'] = 'Sproei border rechts';
blocks[973]['hide_data'] = true;
blocks[973]['icon'] = 'fas fa-shower';
blocks[973]['width'] = 4;
blocks[973]['speakOn'] = 'Irrigatie border rechts aan';
blocks[973]['speakOff'] = 'Irrigatie border rechts uit';

blocks[1192] = {}
blocks[1192]['title'] = 'Duur in min';
blocks[1192]['icon'] = '';
blocks[1192]['width'] = 8;

blocks[1267] = {}
blocks[1267]['title'] = 'Sproei planten';
blocks[1267]['hide_data'] = true;
blocks[1267]['icon'] = 'fas fa-shower';
blocks[1267]['width'] = 4;
blocks[1267]['speak'] = 'Irrigatie planten aangepast';

blocks[1268] = {}
blocks[1268]['title'] = 'Duur in min';
blocks[1268]['icon'] = '';
blocks[1268]['width'] = 8;
//
// SCHAKELAARS
//
blocks[1012] = {}
blocks[1012]['title'] = 'Maak een foto';
blocks[1012]['icon'] = 'fas fa-camera';
blocks[1012]['hide_data'] = true;
blocks[1012]['width'] = 7;
blocks[1012]['speakOn'] = 'Er wordt een foto gemaakt';

blocks[86] = {}
blocks[86]['title'] = 'Rolluik';
blocks[86]['hide_data'] = true;
blocks[86]['width'] = 5;
blocks[86]['speak'] = 'Rolluik is gewijzigd';

blocks[1002] = {}
blocks[1002]['title'] = 'Lantaarn';
blocks[1002]['hide_data'] = true;
blocks[1002]['width'] = 3;
blocks[1002]['speakOn'] = 'Lantaarn is aan';
blocks[1002]['speakOff'] = 'Lantaarn is uit';

blocks[991] = {}
blocks[991]['title'] = 'Border';
blocks[991]['hide_data'] = true;
blocks[991]['width'] = 3;

blocks[145] = {}
blocks[145]['title'] = 'Printer';
blocks[145]['icon'] = 'fas fa-print';
blocks[145]['hide_data'] = true;
blocks[145]['width'] = 3;

blocks[262] = {}
blocks[262]['title'] = 'Boiler';
blocks[262]['icon'] = 'fas fa-tint';
blocks[262]['hide_data'] = true;
blocks[262]['width'] = 3;

blocks[260] = {}
blocks[260]['title'] = 'Edge router';
blocks[260]['icon'] = 'fas fa-hdd';
blocks[260]['hide_data'] = true;
blocks[260]['width'] = 3;

blocks[263] = {}
blocks[263]['title'] = 'Accu';
blocks[263]['icon'] = 'fas fa-battery-full';
blocks[263]['hide_data'] = true;
blocks[263]['width'] = 3;
blocks[263]['speakOn'] = 'Accu is aan';
blocks[263]['speakOn'] = 'Accu is uit';

blocks[1005] = {}
blocks[1005]['title'] = 'Wii en Tv';
blocks[1005]['icon'] = 'fas fa-gamepad';
blocks[1005]['hide_data'] = true;
blocks[1005]['width'] = 3;

blocks[1247] = {}
blocks[1247]['title'] = 'Tv huiskamer';
blocks[1247]['icon'] = 'fas fa-power-off';
blocks[1247]['hide_data'] = true;
blocks[1247]['width'] = 3;
blocks[1247]['speak'] = 'Tv Huiskamer is veranderd';
//
// ENTERTAINMENT
//
blocks[354] = {}
blocks[354]['title'] = 'Denon volume';
blocks[354]['icon'] = 'fas fa-music';
blocks[354]['width'] = 12;

blocks[353] = {}
blocks[353]['title'] = 'Denon source';
blocks[353]['icon'] = 'fas fa-music';
blocks[353]['width'] = 12;

blocks[134] = {}
blocks[134]['title'] = 'Denon zenders';
blocks[134]['icon'] = 'fas fa-music';
blocks[134]['width'] = 12;

blocks[139] = {}
blocks[139]['title'] = 'Denon mixer';
blocks[139]['icon'] = 'fas fa-music';
blocks[139]['width'] = 12;

blocks[1271] = {}
blocks[1271]['title'] = 'Chrome huiskamer';
blocks[1271]['icon'] = 'fas fa-music';
blocks[1271]['hide_data'] = true;
blocks[1271]['width'] = 9;

blocks[1273] = {}
blocks[1273]['title'] = 'Titel';
blocks[1273]['icon'] = 'fas fa-music';
blocks[1273]['hide_data'] = true;
blocks[1273]['width'] = 3;

blocks[1275] = {}
blocks[1275]['title'] = 'Chrome sonia';
blocks[1275]['icon'] = 'fas fa-music';
blocks[1275]['hide_data'] = true;
blocks[1275]['width'] = 9;

blocks[1277] = {}
blocks[1277]['title'] = 'Titel';
blocks[1277]['icon'] = 'fas fa-music';
blocks[1277]['hide_data'] = true;
blocks[1277]['width'] = 3;

blocks[277] = {}
blocks[277]['title'] = 'TV Woon kamer';
blocks[277]['icon'] = 'fas fa-tv';
blocks[277]['hide_data'] = true;
blocks[277]['width'] = 3;

blocks[827] = {}
blocks[827]['title'] = 'TV Werk kamer';
blocks[827]['icon'] = 'fas fa-tv';
blocks[827]['hide_data'] = true;
blocks[827]['width'] = 3;

blocks[805] = {}
blocks[805]['title'] = 'TV Niels';
blocks[805]['icon'] = 'fas fa-tv';
blocks[805]['hide_data'] = true;
blocks[805]['width'] = 3;
blocks[805]['speak'] = 'TV niels is veranderd';

blocks[675] = {}
blocks[675]['title'] = 'TV Sonia';
blocks[675]['icon'] = 'fas fa-tv';
blocks[675]['hide_data'] = true;
blocks[675]['width'] = 3;
blocks[675]['speakOn'] = 'TV sonia is aan';
blocks[675]['speakOff'] = 'TV sonia is uit';
//
// NETWORK 
//
blocks[287] = {}
blocks[287]['title'] = 'Zyxel';
blocks[287]['width'] = 4;
blocks[287]['icon'] = 'fas fa-hdd';
blocks[287]['hide_data'] = true;

blocks[286] = {}
blocks[286]['title'] = 'Unify';
blocks[286]['width'] = 4;
blocks[286]['icon'] = 'fas fa-hdd';
blocks[286]['hide_data'] = true;

blocks[289] = {}
blocks[289]['title'] = 'Qnap';
blocks[289]['width'] = 4;
blocks[289]['icon'] = 'fas fa-hdd';
blocks[289]['hide_data'] = true;

blocks[283] = {}
blocks[283]['title'] = 'Edge router';
blocks[283]['width'] = 4;
blocks[283]['icon'] = 'fas fa-hdd';
blocks[283]['hide_data'] = true;

blocks[284] = {}
blocks[284]['title'] = 'Ziggo lan';
blocks[284]['width'] = 4;
blocks[284]['icon'] = 'fas fa-hdd';
blocks[284]['hide_data'] = true;

blocks[285] = {}
blocks[285]['title'] = 'Ziggo wan';
blocks[285]['width'] = 4;
blocks[285]['icon'] = 'fas fa-hdd';
blocks[285]['hide_data'] = true;
//
// SECURITY
//
blocks[274] = {}
blocks[274]['title'] = 'Peter 06';
blocks[274]['icon'] = 'fas fa-phone-volume';
blocks[274]['hide_data'] = true;
blocks[274]['width'] = 3;

blocks[273] = {}
blocks[273]['title'] = 'Monique 06';
blocks[273]['icon'] = 'fas fa-phone-volume';
blocks[273]['hide_data'] = true;
blocks[273]['width'] = 3;

blocks[276] = {}
blocks[276]['title'] = 'Niels 06';
blocks[276]['icon'] = 'fas fa-phone-volume';
blocks[276]['hide_data'] = true;
blocks[276]['width'] = 3;

blocks[275] = {}
blocks[275]['title'] = 'Sonia 06';
blocks[275]['icon'] = 'fas fa-phone-volume';
blocks[275]['hide_data'] = true;
blocks[275]['width'] = 3;
//
// ALARMEN
//
blocks[207] = {}
blocks[207]['title'] = 'Alarm';
blocks[207]['hide_data'] = true;
blocks[207]['icon'] = 'fas fa-exclamation-triangle';
blocks[207]['width'] = 3;

blocks[210] = {}
blocks[210]['title'] = 'Huisdeur';
blocks[210]['icon'] = 'fas fa-door-open';
blocks[210]['hide_data'] = true;
blocks[210]['width'] = 3;

blocks[968] = {}
blocks[968]['title'] = 'Rook hal';
blocks[968]['icon'] = 'fas fa-smoking';
blocks[968]['hide_data'] = true;
blocks[968]['speak'] = 'Er is rook in de hal';
blocks[968]['width'] = 3;

blocks[966] = {}
blocks[966]['title'] = 'Rook trap';
blocks[966]['icon'] = 'fas fa-smoking';
blocks[966]['hide_data'] = true;
blocks[966]['speak'] = 'Er is rook op de trap';
blocks[966]['width'] = 3;

blocks[272] = {}
blocks[272]['title'] = 'Alarm knop';
blocks[272]['icon'] = 'fas fa-exclamation-triangle';
blocks[272]['width'] = 3;

blocks[1180] = {}
blocks[1180]['title'] = 'Bel tuin';
blocks[1180]['icon'] = 'fas fa-bell';
blocks[1180]['hide_data'] = true;
blocks[1180]['width'] = 3;

blocks[1182] = {}
blocks[1182]['title'] = 'Bel voordeur';
blocks[1182]['icon'] = 'fas fa-bell';
blocks[1182]['hide_data'] = true;
blocks[1182]['width'] = 3;

blocks[1149] = {}
blocks[1149]['title'] = 'Was machine';
blocks[1149]['icon'] = 'fas fa-bell';
blocks[1149]['hide_data'] = true;
blocks[1149]['width'] = 3;

blocks[153] = {}
blocks[153]['title'] = 'Bew. Service';
blocks[153]['icon'] = 'fas fa-bell';
blocks[153]['hide_data'] = true;
blocks[153]['width'] = 6;

blocks[15] = {}
blocks[15]['title'] = 'Bew. Alarm';
blocks[15]['icon'] = 'fas fa-bell';
blocks[15]['hide_data'] = true;
blocks[15]['width'] = 6;
//
// pc en tablet
//
blocks[282] = {}
blocks[282]['title'] = 'Peter pc vlan';
blocks[282]['hide_data'] = true;
blocks[282]['icon'] = 'fas fa-desktop';
blocks[282]['width'] = 3;

blocks[281] = {}
blocks[281]['title'] = 'Peter ptb';
blocks[281]['hide_data'] = true;
blocks[281]['icon'] = 'fas fa-laptop';
blocks[281]['width'] = 3;

blocks[678] = {}
blocks[678]['title'] = 'Peter tablet';
blocks[678]['hide_data'] = true;
blocks[678]['icon'] = 'fas fa-tablet-alt';
blocks[678]['width'] = 3;

blocks[291] = {}
blocks[291]['title'] = 'Monique tablet';
blocks[291]['hide_data'] = true;
blocks[291]['icon'] = 'fas fa-tablet-alt';
blocks[291]['width'] = 3;

blocks[786] = {}
blocks[786]['title'] = 'Niels pc ziggo';
blocks[786]['hide_data'] = true;
blocks[786]['icon'] = 'fas fa-desktop';
blocks[786]['speakOn'] = 'Pc niels is aan';
blocks[786]['speakOff'] = 'Pc niels is uit';
blocks[786]['width'] = 3;

blocks[278] = {}
blocks[278]['title'] = 'Niels pc vlan';
blocks[278]['hide_data'] = true;
blocks[278]['icon'] = 'fas fa-desktop';
blocks[278]['speak'] = 'Pc niels is veranderd';
blocks[278]['width'] = 3;

blocks[279] = {}
blocks[279]['title'] = 'Niels ptb';
blocks[279]['hide_data'] = true;
blocks[279]['icon'] = 'fas fa-laptop';
blocks[279]['speakOn'] = 'Portable niels is aan';
blocks[279]['speakOff'] = 'Portable niels is uit';
blocks[279]['width'] = 3;

blocks[676] = {}
blocks[676]['title'] = 'Niels pc vlan wifi';
blocks[676]['hide_data'] = true;
blocks[676]['icon'] = 'fas fa-desktop';
blocks[676]['speakOn'] = 'Pc niels wifi is aan';
blocks[676]['speakOff'] = 'Pc niels wifi is uit';
blocks[676]['width'] = 3;

blocks[280] = {}
blocks[280]['title'] = 'Sonia ptb';
blocks[280]['hide_data'] = true;
blocks[280]['icon'] = 'fas fa-laptop';
blocks[280]['width'] = 3;

blocks[677] = {}
blocks[677]['title'] = 'Sonia tablet';
blocks[677]['hide_data'] = true;
blocks[677]['icon'] = 'fas fa-tablet-alt';
blocks[677]['speakOn'] = 'Tablet sonia is aan';
blocks[677]['speakOff'] = 'Tablet sonia is uit';
blocks[677]['width'] = 3;

blocks[498] = {}
blocks[498]['title'] = 'PS4';
blocks[498]['hide_data'] = true;
blocks[498]['icon'] = 'fas fa-gamepad';
blocks[498]['width'] = 3;
//
// KOLOMMEN
// clock
var columns = {}
columns[1] = {}
columns[1]['blocks'] = [3,buttons.buienradar,1163,457,455,1025,1248,1303,1049,1285,1305,1250,calendars.fam]
columns[1]['width'] = 3; 

columns[2] = {}
columns[2]['blocks'] = ['1','s19','s16','s18','s13','s15','s14',985,1286,969,1190,1189,1191,973,1192,1267,1268,'1a',262,145,260,1247,1002,991,1005,263,1012,86]
columns[2]['width'] = 3; 

columns[3] = {}
columns[3]['blocks'] = ['2a',354,353,134,139,1271,1273,1275,1277,277,675,805,827,'2b',287,286,289,283,285,284]
columns[3]['width'] = 3; 

columns[4] = {}
columns[4]['blocks'] = [0,buttons.webcam1,buttons.webcam2,274,282,281,678,273,291,276,786,278,676,279,498,275,677,280,'3b',210,207,272,968,966,1180,1182,1149,153,15]
columns[4]['width'] = 3; 

columns[5] = {}
columns[5]['blocks'] = ['clock','sunrise',calendars.fam,calendars.peter,calendars.f1,calendars.ado]
columns[5]['width'] = 3; 

columns[6] = {}
columns[6]['blocks'] = ['news_nualg','news_nusp']
columns[6]['width'] = 6; 

columns[7] = {}
columns[7]['blocks'] = [publictransport.ovinfotrain,publictransport.ovinfotram,tvguide.dutch,'log','chromecast','streamplayer']
columns[7]['width'] = 3; 

//
// SCHERMEN
//
var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg1.jpg';
screens[1]['columns'] = [1,2,3,4];

screens[2] = {}
screens[2]['background'] = 'bg1.jpg';
screens[2]['columns'] = [5,6,7];

I guess you want to change the colors for the block idx 1163 snowflakes?

The order of the css lines and the usage of !important determines which setting is used.

The rule (as far as I know):
* A new style setting will overrule a previous style setting unless the old style setting has a !important addition and the new one doesn't have !important added to it.

So if you want to change the default color for the snowflakes, but give block 1163 a red snowflake, use the following in custom.css, in this order:

Code: Select all

.fa-snowflake.on {color: blue;}
.fa-snowflake.off {color: white}

.block_1163 .on {color: red;}
.block_1163 .off {color: red;}

The block_1163 has a snowflake icon. First the blue/white color is applied (for all snowflake icons). After that the red color is applied to the block_1163 icon only.

The following will not work:

Code: Select all

.fa-snowflake.on {color: blue !important;}
.fa-snowflake.off {color: white !important;}

.block_1163 .on {color: red;}
.block_1163 .off {color: red;}

(the !important addition prevents overruling)

The following also won't work:

Code: Select all

.block_1163 .on {color: red;}
.block_1163 .off {color: red;}

.fa-snowflake.on {color: blue;}
.fa-snowflake.off {color: white}

(wrong order. The blue/white colors will be applied, also to block 1163)

I guess the following works:

Code: Select all

.block_1163 .on {color: red !important;}
.block_1163 .off {color: red  !important;}

.fa-snowflake.on {color: blue;}
.fa-snowflake.off {color: white}

The order is in fact wrong, but the !important addition assures that the color setting doesn't get overruled.

This won't work:

Code: Select all

.block_1163 .on {color: red !important;}
.block_1163 .off {color: red  !important;}

.fa-snowflake.on {color: blue !important;}
.fa-snowflake.off {color: white  !important}

Although .block_1163 uses the !important addition, the .fa-snowflake also has a !important addition, so it will always overrule earlier settings.

[pvklink]

thanks..
learned a lot!
i will try it out

[pvklink]

@Lokonli, thanks, i WORKS!

[Lokonli]

Good!

Verstuurd vanaf mijn SM-A320FL met Tapatalk