Domoticz

woody4165 wrote: ↑Saturday 21 October 2017 11:04 Hi Ingmar

How did you reduce the height of that block?
Can you show settings for the icon and blocks in css file?

Thanks

Spoiler: show

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://xxxx:xxx';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['auto_positioning'] = 0;
config['gm_api'] = 'xxx';
config['gm_zoomlevel'] = 8;
config['gm_latitude'] = xxx;
config['gm_longitude'] = xxx;
config['wu_api'] = 'xxx';
config['wu_city'] = 'Princes Risborough';
config['wu_name'] = '';
config['wu_country'] = 'UK';
config['last_update'] = 0;

var maps = {};
maps.location = { height: 450, width:12, latitude: xxx, longitude: xxx, zoom:14 }

var buttons = {}
buttons.webcam = {width:80, isimage:true, refresh:1000, image: 'http://xxxx/html/cam_pic.php', url: 'http://xxxx/html/cam_pic.php'}

var blocks = {}
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Switches';
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Temperatures';
blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Power';
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Heating';
blocks['blocktitle_11'] = {}
blocks['blocktitle_11']['type'] = 'blocktitle';
blocks['blocktitle_11']['title'] = 'Map';

blocks[1] = {}
blocks[1]['switch'] = true;
blocks[1]['image'] = 'pi.png';
blocks[4] = {}
blocks[4]['switch'] = true;
blocks[4]['image'] = 'pi.png';
blocks[5] = {}
blocks[5]['switch'] = true;
blocks[5]['image'] = 'pi.png';

blocks[30] = {}
blocks[30]['switch'] = true;
blocks[31] = {}
blocks[31]['switch'] = true;
blocks[231] = {}
blocks[231]['switch'] = true;
blocks[245] = {}
blocks[245]['switch'] = true;
blocks[6] = {}
blocks[6]['switch'] = true;
blocks[46] = {}
blocks[46]['switch'] = true;
blocks[243] = {}
blocks[243]['switch'] = true;
blocks[249] = {}
blocks[249]['switch'] = true;
blocks[211] = {}
blocks[211]['switch'] = true;
blocks['211_1'] = {}
blocks['211_1']['switch'] = true;
blocks['211_2'] = {}
blocks['211_2']['switch'] = true;
blocks['211_3'] = {}
blocks['211_3']['switch'] = true;
blocks[215] = {}
blocks[215]['switch'] = true; 

blocks[224] = {}
blocks[224]['icon'] = 'fa-sun-o';
blocks[225] = {}
blocks[225]['icon'] = 'fa-sun-o';
blocks['240_1'] = {}

/*
blocks['240_1']['icon'] = 'fa-plug';
blocks['240_2'] = {}
blocks['240_2']['icon'] = 'fa-plug';
blocks['240_3'] = {}
blocks['240_3']['icon'] = 'fa-plug';
*/

var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']
					
columns[1] = {}
columns[1]['blocks'] = ['currentweather_big','sunrise','weather','211_3',224,225,buttons.webcam,5,4,1]
columns[1]['width'] = 4;

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_1',15,43,12,118,17,44,11,221,13,14,20,252,251,248,'s3','s2','blocktitle_3',240]
columns[2]['width'] = 4;

columns[3] = {}
columns[3]['blocks'] = ['blocktitle_2',211,30,231,245,6,46,243,249,215,'blocktitle_4',31,193,250]
columns[3]['width'] = 4;

columns[11] = {}
columns[11]['blocks'] = ['blocktitle_11',maps.location]
columns[11]['width'] = 6;

var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','weather']
columns_standby[1]['width'] = 12;

var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg10.jpg';
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['background'] = 'bg10.jpg';
screens[2]['background_night'] = 'custom/bg12.jpg';
screens[2]['columns'] = [11]

Spoiler: show

Code: Select all

/*
CUSTOM CSS FILE
*/

/* Modifications to the fa en wi font family*/
.fa.fa-lightbulb-o.on {
color: rgba(255,255,0,1.0)
}
.fa.fa-lightbulb-o.off {
color:#fff;
}
.fa.fa-mobile.on.icon {
font-size: 30px !important;
color: green;
}
.fa.fa-mobile.off.icon {
font-size: 30px !important;
}


/* Fontsize buttons Blinds */
.fa,.wi {
font-size:20px !important;
}

/* Background blocks */
.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);
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 25px; /* Round corners */
}

/* Block Title */
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
margin: 0px;
margin-left: 15px;
font-weight: 900;
font-size: 200%;
}

.smalltitle h3 {
font-size: 12px !important;
margin-left: 6px;
}

/* Title of tile */
.title {
font-size:14px;
}

/* Standby screen */
.standby .clock{
font-size:60px !important;
}
.standby .weekday,.standby .date{
font-size:40px !important;
}

/* Swiper bullet */
.swiper-pagination-bullet {
width: 30px;
height: 30px;
background: white;
}

/* Up-Down arrow Blinds */
.input-groupBtn li {
position:sticky;
z-index: 9999;
right: 1px;
border-radius: 25px; /* Round corners */
}

/* Transparent Background for arrow Blinds - Big Screen */
.input-groupBtn.input-chevron .btn-number {
padding: 5px 10px 5px 10px;
background-color: transparent;
}

/* Transparent Background for arrow Blinds - Small Screen */
@media only screen and (max-width: 1400px) {
.input-groupBtn.input-chevron .btn-number {
padding: 7px 10px 7px 10px;
background-color: transparent;
}
}

blocks[211] = {}
blocks[211]['switch'] = true;

blocks['211_1'] = {}
blocks['211_1']['switch'] = true;
blocks['211_2'] = {}
blocks['211_2']['switch'] = true;
blocks['211_3'] = {}
blocks['211_3']['switch'] = true;

Spoiler: show

/*
CUSTOM CSS FILE
*/
.transbg.col-xs-8 {
padding-top: 15px;
padding-bottom: 15px;
border: 7px solid rgba(255,255,255,0);
background: rgba(0,0,0,0.2);
height: 160px; !important;
background-clip: padding-box;
}

.fa.fa-arrow-circle-left.fa-small {
font-size: 50px !important;
}
.fa.fa-stop-circle.fa-small {
font-size: 50px !important;
}
.fa.fa-play-circle.fa-small {
font-size: 50px !important;
}
.fa.fa-arrow-circle-right.fa-small {
font-size: 50px !important;
}
.fa.fa-pause-circle.fa-small {
font-size: 50px !important;
}
.fa.fa-lightbulb-o.on {
font-size: 48px; !important;
color:#F1C300;
}
.fa.fa-lightbulb-o.off {
font-size: 48px; !important;
color:#fff;
}
.fa.fa-thermometer-3.on {
font-size: 48px; !important;
color:#00BFFF;
}
.fa.fa-thermometer-3.off {
font-size: 48px; !important;
color:#fff;
}
.fa.fa-television.on {
font-size: 48px; !important;
color:#00BFFF;
}
.fa.fa-television.off {
font-size: 48px; !important;
color:#fff;
}
.fa.fa-video-camera.on {
font-size: 48px; !important;
color:#00BFFF;
}
.fa.fa-video-camera.off {
font-size: 48px; !important;
color:#fff;
}

Spoiler: show

var config = {}
config['domoticz_ip'] = 'http://xx.xx.xx.xx:8080';
config['app_title'] = 'Dashticz';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['standby_after'] = 0;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '15';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'day';
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['gm_api'] = 'REMOVED';
config['gm_zoomlevel'] = 3;
config['gm_latitude'] = '51.2xx';
config['gm_longitude'] = '22.5xx';
config['wu_api'] = 'REMOVED';
config['wu_city'] = 'Lublin';
config['wu_name'] = 0;
config['wu_country'] = 'PL';
config['idx_moonpicture'] = 0;
config['switch_horizon'] = 0;
config['host_nzbget'] = 0;
config['spot_clientid'] = 0;
config['sonarr_url'] = 0;
config['sonarr_apikey'] = 0;
config['sonarr_maxitems'] = 0;
config['garbage_company'] = 0;
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = 0;
config['garbage_street'] = 0;
config['garbage_housenumber'] = 0;
config['garbage_maxitems'] = 0;
config['garbage_width'] = 0;
config['selector_instead_of_buttons'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['last_update'] = 1;
config['hide_off_button'] = 0;
config['hide_topbar'] = 1;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 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;

var blocks = {}

// Light switches



blocks[10] = {}
blocks[10]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[10]['title'] = 'Kitchen sink' //if you want change the name of switch different then domoticz
blocks[10]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[10]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[10]['switch'] = true; //if you want to switch the title and data
blocks[10]['hide_data'] = false; //if you want to hide the data of this block
blocks[10]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[10]['protected'] = false; //protect switching manually in Dashticz

blocks[11] = {}
blocks[11]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[11]['title'] = 'Kitchen table' //if you want change the name of switch different then domoticz
blocks[11]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[11]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[11]['switch'] = true; //if you want to switch the title and data
blocks[11]['hide_data'] = false; //if you want to hide the data of this block
blocks[11]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[11]['protected'] = false; //protect switching manually in Dashticz

blocks[12] = {}
blocks[12]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[12]['title'] = 'Salon light 2' //if you want change the name of switch different then domoticz
blocks[12]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[12]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[12]['switch'] = true; //if you want to switch the title and data
blocks[12]['hide_data'] = false; //if you want to hide the data of this block
blocks[12]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[12]['protected'] = false; //protect switching manually in Dashticz

blocks[13] = {}
blocks[13]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[13]['title'] = 'Salon light 1' //if you want change the name of switch different then domoticz
blocks[13]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[13]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[13]['switch'] = true; //if you want to switch the title and data
blocks[13]['hide_data'] = false; //if you want to hide the data of this block
blocks[13]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[13]['protected'] = false; //protect switching manually in Dashticz

blocks[14] = {}
blocks[14]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[14]['title'] = 'Sofa lights' //if you want change the name of switch different then domoticz
blocks[14]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[14]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[14]['switch'] = true; //if you want to switch the title and data
blocks[14]['hide_data'] = false; //if you want to hide the data of this block
blocks[14]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[14]['protected'] = false; //protect switching manually in Dashticz

blocks[16] = {}
blocks[16]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[16]['title'] = 'Bar light' //if you want change the name of switch different then domoticz
blocks[16]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[16]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[16]['switch'] = true; //if you want to switch the title and data
blocks[16]['hide_data'] = false; //if you want to hide the data of this block
blocks[16]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[16]['protected'] = false; //protect switching manually in Dashticz

blocks[17] = {}
blocks[17]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[17]['title'] = 'Kitchen main' //if you want change the name of switch different then domoticz
blocks[17]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[17]['image'] = 'bulb_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[17]['switch'] = true; //if you want to switch the title and data
blocks[17]['hide_data'] = false; //if you want to hide the data of this block
blocks[17]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[17]['protected'] = false; //protect switching manually in Dashticz

blocks[85] = {}
blocks[85]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[85]['title'] = 'ALL LIGHTS OFF' //if you want change the name of switch different then domoticz
// blocks[85]['icon'] = 'fa-lightbulb-o'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[85]['image'] = 'bulb_off.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[85]['switch'] = true; //if you want to switch the title and data
blocks[85]['hide_data'] = true; //if you want to hide the data of this block
blocks[85]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[85]['protected'] = false; //protect switching manually in Dashticz

// Denon

blocks[20] = {}
blocks[20]['width'] = 12; //1 to 12, remove this line if you want to use the default (4)
blocks[20]['title'] = 'Denon Source' //if you want change the name of switch different then domoticz
blocks[20]['icon'] = 'fa-film'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[20]['switch'] = true; //if you want to switch the title and data
blocks[20]['hide_data'] = false; //if you want to hide the data of this block
blocks[20]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[20]['protected'] = false; //protect switching manually in Dashticz

blocks[21] = {}
blocks[21]['width'] = 12; //1 to 12, remove this line if you want to use the default (4)
blocks[21]['title'] = 'Denon Volume' //if you want change the name of switch different then domoticz
blocks[21]['icon'] = 'fa-volume-up'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
blocks[21]['switch'] = true; //if you want to switch the title and data
blocks[21]['hide_data'] = false; //if you want to hide the data of this block
blocks[21]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[21]['protected'] = false; //protect switching manually in Dashticz

// RM2 switches


blocks[39] = {}
blocks[39]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[39]['title'] = 'A/C' //if you want change the name of switch different then domoticz
blocks[39]['icon'] = 'fa-thermometer-3'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[39]['image'] = 'fan_on.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[39]['switch'] = true; //if you want to switch the title and data
blocks[39]['hide_data'] = false; //if you want to hide the data of this block
blocks[39]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[39]['protected'] = false; //protect switching manually in Dashticz

blocks[40] = {}
blocks[40]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[40]['title'] = 'Screen' //if you want change the name of switch different then domoticz
blocks[40]['icon'] = 'fa-television'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[40]['image'] = 'fa-eye.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[40]['switch'] = true; //if you want to switch the title and data
blocks[40]['hide_data'] = false; //if you want to hide the data of this block
blocks[40]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[40]['protected'] = false; //protect switching manually in Dashticz


blocks[41] = {}
blocks[41]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[41]['title'] = 'TV' //if you want change the name of switch different then domoticz
blocks[41]['icon'] = 'fa-video-camera'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[41]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[41]['switch'] = true; //if you want to switch the title and data
blocks[41]['hide_data'] = false; //if you want to hide the data of this block
blocks[41]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[41]['protected'] = false; //protect switching manually in Dashticz

blocks[19] = {}
blocks[19]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[19]['title'] = 'PC' //if you want change the name of switch different then domoticz
blocks[19]['icon'] = 'fa-windows'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[19]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[19]['switch'] = true; //if you want to switch the title and data
blocks[19]['hide_data'] = false; //if you want to hide the data of this block
blocks[19]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[19]['protected'] = false; //protect switching manually in Dashticz

// Squeezebox

blocks[44] = {}
blocks[44]['width'] = 8; //1 to 12, remove this line if you want to use the default (4)
blocks[44]['title'] = 'Squeezebox' //if you want change the name of switch different then domoticz
blocks[44]['icon'] = 'fa-music'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[44]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[44]['switch'] = true; //if you want to switch the title and data
blocks[44]['hide_data'] = false; //if you want to hide the data of this block
blocks[44]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[44]['protected'] = false; //protect switching manually in Dashticz

// NetAtmo

blocks[49] = {}
blocks[49]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[49]['title'] = 'Outdoor' //if you want change the name of switch different then domoticz
blocks[49]['icon'] = 'fa-thermometer-3'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[49]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[49]['switch'] = true; //if you want to switch the title and data
blocks[49]['hide_data'] = false; //if you want to hide the data of this block
blocks[49]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[49]['protected'] = false; //protect switching manually in Dashticz

blocks[50] = {}
blocks[50]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[50]['title'] = 'Salon' //if you want change the name of switch different then domoticz
blocks[50]['icon'] = 'fa-thermometer-3'; //if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
// blocks[50]['image'] = 'tv.png'; //if you want to show an image instead if icon, place image in img/ folder
blocks[50]['switch'] = false; //if you want to switch the title and data
blocks[50]['hide_data'] = false; //if you want to hide the data of this block
blocks[50]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[50]['protected'] = false; //protect switching manually in Dashticz

// Danfoss Radiators

blocks[55] = {}
blocks[55]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[55]['title'] = 'Salon Heat P' //if you want change the name of switch different then domoticz
blocks[55]['switch'] = true; //if you want to switch the title and data
blocks[55]['hide_data'] = false; //if you want to hide the data of this block
blocks[55]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[55]['protected'] = false; //protect switching manually in Dashticz

blocks[57] = {}
blocks[57]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[57]['title'] = 'Salon Heat L' //if you want change the name of switch different then domoticz
blocks[57]['switch'] = true; //if you want to switch the title and data
blocks[57]['hide_data'] = false; //if you want to hide the data of this block
blocks[57]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[57]['protected'] = false; //protect switching manually in Dashticz

blocks[64] = {}
blocks[64]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[64]['title'] = 'Antek Heat' //if you want change the name of switch different then domoticz
blocks[64]['switch'] = true; //if you want to switch the title and data
blocks[64]['hide_data'] = false; //if you want to hide the data of this block
blocks[64]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[64]['protected'] = false; //protect switching manually in Dashticz

blocks[66] = {}
blocks[66]['width'] = 4; //1 to 12, remove this line if you want to use the default (4)
blocks[66]['title'] = 'Bedroom Heat' //if you want change the name of switch different then domoticz
blocks[66]['switch'] = true; //if you want to switch the title and data
blocks[66]['hide_data'] = false; //if you want to hide the data of this block
blocks[66]['show_lastupdate'] = false; //if you want to show the last update specific for this block
blocks[66]['protected'] = false; //protect switching manually in Dashticz

// Blocktitles

blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Light switches';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Denon';

blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'TV';

blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Rain radar';

blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Radiators';

// Buttons

var buttons = {}
buttons.buienradar = {width:12, isimage:true, refreshimage:60000, image: 'http://strony.toya.net.pl/~rybar/met/img/radar-map.png', url: 'http://strony.toya.net.pl/~rybar/met/img/radar-map.png'}

// Frames

var frames = {}
frames.squeeze = {height:160,frameurl:"http://xxx.xxx.xxx.xxx:8080/dashticz_v2 ... g",width:4}
frames.weather = {refreshiframe:10000,height:230,frameurl:"//forecast.io/embed/#lat=51.2516&lon=22.5619&name=Lublin&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si&text-color=#fff",width:12}

// Columns

var columns = {}

columns[1] = {}
columns[1]['blocks'] = ['clock','weather','blocktitle_1',14,13,12,16,11,10,17,85];
// columns[1]['blocks'] = ['clock',frames.weather,'blocktitle_1',14,13,12,16,11,10,17];
columns[1]['width'] = 6;


columns[2] = {}
columns[2]['blocks'] = ['blocktitle_3',39,40,41,19,'blocktitle_2',20,21,frames.squeeze,44]
columns[2]['width'] = 6;

columns[3] = {}
//columns[3]['blocks'] = ['clock','sunrise','currentweather_big',50,49]
columns[3]['blocks'] = ['sunrise',frames.weather,50,49,'blocktitle_6',55,57,64,66] /
columns[3]['width'] = 6;

columns[4] = {}
columns[4]['blocks'] = ['blocktitle_4',buttons.buienradar]
columns[4]['width'] = 6;


columns[5] = {}
columns[5]['blocks'] = ['clock','graph_9',9] // show clock and e-meter graph for electricity usage
columns[5]['width'] = 12;


// Screens

var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg2.jpg';
screens[1]['columns'] = [1,2]

screens[2] = {}
screens[2]['background'] = 'bg3.jpg';
screens[2]['columns'] = [3,4]

screens[3] = {}
screens[3]['background'] = 'bg4.jpg';
screens[3]['columns'] = [5]

Spoiler: show

# m h dom mon dow command
* * * * * /opt/domoticz/scripts/denon.sh 2>&1
* * * * * wget -q -O /tmp/cover.jpg "http://xx.xx.xx.xx:9000/music/current/c ... 0:xx:xx:xx" && convert -resize 160X160 /tmp/cover.jpg /opt/domoticz/www/dashticz_v2/img/cover.jpg
@reboot python /opt/domoticz/INODE/inode.py &

yfands wrote: ↑Friday 13 October 2017 10:34 Hai Rob,

Nice work, I like Dashticz very much.

But I have way to many 'items' for 1 dashboard, so by creating more dashboards (screens) I'll keep swiping, so In my opinion there was only one thing missing, a mainmenu, I can now jump to the desired screen by a click/touch.
So with a little change in main.js I was able to create a menu with buttons, once clicked/touched will slide to the desired screen.
Maybe another option for Dashticz, but I like to see it in an ordered fashion, something in Config.js saying var Menu{} etc..
Or maybe keep the dashboard 'look', and create a mainmenu in the topbar.


Regards
Frank

MikeF wrote: ↑Wednesday 25 October 2017 16:27 Nah - iMac 21.5-inch. Browser (Firefox) occupying about 2/3rds width...

Spoiler: show

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://192.168.0.100:8088';
config['app_title'] = 'Domotica Dashboard';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'https://cors-anywhere.herokuapp.com/http://www.nu.nl/rss';
config['news_scroll_after'] = '7';
config['standby_after'] = 15;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = 0;	
config['auto_slide_pages'] = 0;			//set _AUTO_SWIPEBACK_TIME = 0
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YYYY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = 0;
config['gm_zoomlevel'] = 0;
config['gm_latitude'] = 0;
config['gm_longitude'] = 0;
config['wu_api'] = '--APIKEY--;
config['wu_city'] = 'Eindhoven';
config['wu_name'] = 0;
config['wu_country'] = 'NL';
config['idx_moonpicture'] = '7';
config['switch_horizon'] = 0;
config['host_nzbget'] = 0;
config['spot_clientid'] = 0;
config['garbage_company'] = 'cure';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = '--POSTCODE--';
config['garbage_street'] = '--ADRES--';
config['garbage_housenumber'] = '--HUISNUMMER--';
config['garbage_maxitems'] = '6';
config['garbage_width'] = '12';
config['selector_instead_of_buttons'] = 1;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['last_update'] = 0;
config['hide_off_button'] = 0;
config['hide_topbar'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 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['selector_instead_of_buttons'] = 0;	//use for selectors
config['hide_off_button'] = 0; //use for selectors

// Garbage - Advanced Settings
var _DO_NOT_USE_COLORED_TRASHCAN 	= true;
var trashcan = {}
var trashnames = {}
trashnames['Pmd bennekel blaarthem'] = 'PMD';
trashnames['Papier en karton'] = 'PAPIER';
trashnames['Gft'] = 'GFT'

//var trashcolors = {}
//trashcolors['Pmd bennekel blaarthem'] = 'Yellow';
//trashcolors['Papier en karton'] = 'Blue'
//trashcolors['Gft'] = 'Green';

// iCalendar Plugin, supports all .ics calendar types like Google Calendar, Apple Calendar
var _ICALENDAR_URL			= 'https://testurl.com/ical.ics'; //supports .ics type calendars (Google Calendar, Apple Calendar etc.)
var _ICALENDAR_DATEFORMAT	= 'DD-MM-YYYY | HH:mm'; //'friendly', 'MM.DD.YYYY HH:mm', 'DD.MM.YYYY HH:mm', 'YYYY.MM.DD HH:mm'
var _ICALENDAR_LOCALE		= 'nl'; //en,hu, etc. 

// Calendar
var calendars = {}
calendars.f1 = {maxitems: 5, title:'', image:'', icalurl:'--F1 CALENDAR URL--'}
calendars.prive = {maxitems: 5, title: '', image: '', --PRIVATE CALENDAR URL--'}

// Online Radio Stream Plugin, Note: you must enable plugin in column section 'streamplayer'
var _STREAMPLAYER_TRACKS     = [
   {"track":1,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
   {"track":2,"name":"Radio 538","file":"http://vip-icecast.538.lw.triple-it.nl/RADIO538_MP3"},
   {"track":3,"name":"Arrow Classic Rock","file":"http://www.garnierstreamingmedia.com/asx/streamerswitch.asp?stream=205"},
   {"track":4,"name":"Radio Veronica","file":"http://live.icecast.kpnstreaming.nl/skyradiolive-SRGSTR09.mp3"},
   {"track":5,"name":"Q-music","file":"http://live.icecast.kpnstreaming.nl/omroepbrabantlive-OmroepBrabantHq.m3u"},
];

var buttons = {}
buttons.moon = {width:8, isimage:true, refreshimage:60000, image: 'moon'}
buttons.cam_voor = { width:12, isimage:true, refresh:2000, image: '--CAMERA URL--', url: '--CAMERA URL--' }

//CUSTOM POSITIONING:
//defining wich blocks to show, de numbers represents the IDX of the device in Domoticz
//only define if you want to use a custom width instead of the default

var blocks = {}

//Schakelaars
blocks[226] = {} //Rolluik woonkamer - Selector
blocks[226]['title'] = 'Rolluik Woonkamer';
blocks[226]['width'] = 12;
blocks[226]['icon'] = '' 

blocks[225] = {} //Rolluik slaapkamer - Selector
blocks[225]['title'] = 'Rolluik Slaapkamer';
blocks[225]['width'] = 12;
blocks[225]['icon'] = '' 

blocks[6] = {} //Rolluik woonkamer
blocks[6]['width'] = 12;
blocks[6]['hide_stop'] = true;
blocks[6]['hide_data'] = false; 
blocks[6]['icon'] = 'fa-align-justify';

blocks[217] = {} //Rolluik slaapkamer
blocks[217]['width'] = 12;
blocks[217]['hide_stop'] = true;
blocks[217]['hide_data'] = false;
blocks[217]['icon'] = 'fa-align-justify';

blocks[461] = {} //Woonkamer achter - Selector
blocks[461]['title'] = 'Woonkamer achter';
blocks[461]['icon'] = '' 
blocks[461]['width'] = 12;

blocks[179] = {} //Woonkamer achter
blocks[179]['title'] = 'Woonkamer achter';
blocks[179]['width'] = 12;

blocks[193] = {} //Woonkamer voor
blocks[193]['title'] = 'Woonkamer voor';
blocks[193]['width'] = 12;

blocks[462] = {} //Woonkamer voor - Selector
blocks[462]['title'] = 'Woonkamer voor';
blocks[462]['icon'] = '' 
blocks[462]['width'] = 12;

blocks[443] = {} //Schemerlamp woonkamer
blocks[443]['title'] = 'Schemerlamp';
blocks[443]['width'] = 12;

blocks[463] = {} //Overloop
blocks[463]['title'] = 'Lamp Overloop';
blocks[463]['width'] = 12;

blocks[464] = {} //Zolder
blocks[464]['title'] = 'Lamp Zolder';
blocks[464]['width'] = 12;

blocks[213] = {} //Yeelight Huiskamer
blocks[213]['title'] = 'Yeelight';
blocks[213]['width'] = 12;

blocks[214] = {} //Yeelight RGBW
blocks[214]['title'] = 'Yeelight Woonkamer';
blocks[214]['icon'] = ''
blocks[214]['width'] = 12;

blocks[452] = {} //Schemerlamp - Sara
blocks[452]['title'] = 'Lamp Sara';
blocks[452]['width'] = 12;

//Overige
blocks[150] = {} //iPhone Harm
blocks[150]['width'] = 12;		
blocks[150]['icon'] = 'fa-male'
blocks[150]['show_lastupdate'] = true;
blocks[150]['protected'] = true;
blocks[150]['playsound'] = 'sounds/sonar.mp3';	
blocks[150]['title'] = 'Harm'

blocks[153] = {} //iPhone Nassira
blocks[153]['width'] = 12;		
blocks[153]['icon'] = 'fa-female'
blocks[153]['show_lastupdate'] = true;
blocks[153]['protected'] = true;
blocks[153]['playsound'] = 'sounds/sonar.mp3';	
blocks[153]['title'] = 'Nassira'

blocks[211] = {} //Maanphase
blocks[211]['width'] = 4;
blocks[211]['title'] = ''
blocks[211]['icon'] = 'fa-moon-o'

blocks[208] = {} //Maanpercentage
blocks[208]['width'] = 4;
blocks[208]['title'] = ''
blocks[208]['icon'] = 'fa-moon-o' 

//Block Titles
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Familie agenda';

blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'F1 Kalender';

blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Afvalkalender';

//Empty Block
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = '';

//blocks[1] = {}
//blocks[1]['width'] = 4; 						// 1 to 12, remove this line if you want to use the default (4)
//blocks[1]['title'] = 'Living room' 				// if you want change the name of switch different then domoticz
//blocks[1]['icon'] = 'fa-eye'; 					// if you want an other icon instead of the default, choose from: http://fontawesome.io/cheatsheet/
//blocks[1]['image'] = 'bulb_off.png'; 				// if you want to show an image instead if icon, place image in img/ folder
//blocks[1]['switch'] = true;						// if you want to switch title and data
//blocks[1]['hide_data'] = true; 					// if you want to hide the data of this block
//blocks[1]['show_lastupdate'] = true;				// show lastupdate time from device (per device)
//blocks[1]['protected'] = true;					// make switch protected (no actions on push)
//blocks[1]['playsound'] = 'sounds/sonar.mp3';		// play sound

var columns = {}

columns[1] = {}
columns[1]['blocks'] = [226,6,461,179,214,213,443]
columns[1]['width'] = 3; 

columns[2] = {}
columns[2]['blocks'] = [225,217,462,193,464,463,452]
columns[2]['width'] = 3; 

columns[3] = {}
columns[3]['blocks'] = [buttons.cam_voor, 'blocktitle_1',calendars.prive,'blocktitle_2',calendars.f1]
columns[3]['width'] = 4; 

columns[4] = {}
columns[4]['blocks'] = ['clock', buttons.moon, 211, 208, 'sunrise','currentweather_big','garbage',150,153]
columns[4]['width'] = 2; 

//TOP Bar
//columns['bar'] = {}
//columns['bar']['blocks'] = ['logo','miniclock','settings']


//Standby Screen
var columns_standby = {}

columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','weather']
columns_standby[1]['width'] = 12

columns_standby[2] = {}
columns_standby[2]['blocks'] = ['blocktitle_1',calendars.prive]
columns_standby[2]['width'] = 4

columns_standby[3] = {}
columns_standby[3]['blocks'] = ['blocktitle_2',calendars.f1]
columns_standby[3]['width'] = 4

columns_standby[4] = {}
columns_standby[4]['blocks'] = ['blocktitle_3','blocktitle_4','garbage']
columns_standby[4]['width'] = 4

//Screens & Background
var screens = {}

screens[1] = {}
screens[1]['background'] = 'dv2-bg10.jpg';
screens[1]['columns'] = [1,2,3,4]

Spoiler: show

Code: Select all

/*
CUSTOM CSS FILE
*/

/* Modifications Top Bar */
.transbg.dark.col-xs-1, 
.transbg.dark.col-xs-2,
.transbg.dark.col-xs-3, 
.transbg.dark.col-xs-4, 
.transbg.dark.col-xs-5, 
.transbg.dark.col-xs-6, 
.transbg.dark.col-xs-7, 
.transbg.dark.col-xs-8, 
.transbg.dark.col-xs-9, 
.transbg.dark.col-xs-10, 
.transbg.dark.col-xs-11, 
.transbg.dark.col-xs-12 {
    border: 3px solid rgba(255,255,255,0);		/* 7px solid rgba(255,255,255,0); */
    background: rgba(0,0,0,0.1);				/* rgba(0,0,0,0.5); */
    background-clip: padding-box;
}

/* Modifications for the currentweather_big block */
.big .weatherdegrees, .big .weatherloc {
    display: inline-block;
    margin-top: -4px;		/* default -2px */
	margin-left: 24px;		/* move text to the right */
    font-size: 20px;		
    font-weight: bold;
}

.skyconsmall {
    display: block;
	width: 75px;			/* default 100% - make icon smaller */
    max-width: 125px;
    font-size: 15px;
	margin-left: -30px;		/* move icon to the right */
}

/* Modification for Moonphase and Moon %*/
.block_208,					/* Moonphase */
.block_211 {  				/* Moon % */
	font-size: 13px !important;
}

/* Modifications to the fa en wi font family*/
.fa.fa-lightbulb-o.on {
	color: rgba(255,255,0,1.0);
	font-size: 35px !important;
	margin-top: 1px; 
	margin-left: 1px;
}
.fa.fa-lightbulb-o.off {
    color:#fff;
	font-size: 35px !important;
	margin-top: 1px; 
	margin-left: 1px;
}
.fa.fa-male.on.icon,
.fa.fa-female.on.icon {
	font-size: 35px !important;
	color: rgba(255,255,0,1.0);
}
.fa.fa-male.off.icon,
.fa.fa-female.off.icon {
	font-size: 35px !important;
}
.fa.fa-moon-o {
    margin-top: -12px !important;		/* Move icon to the top */
    font-size: 20px !important;
    display: block;						/* Needed to get margin-top to work */
}

/* Fontsize buttons Blinds */
.fa,.wi {
   font-size: 20px !important;
}

/* Sunrise & Sunset icon */
.wi.wi-sunrise, 
.wi.wi-sunset {
	font-size: 20px !important;
}

/* Fontsize Sunrise & Sunset */
.sunriseholder, 
.sunriseholder .wi {
    font-size: 17px !important;
}

/* Background blocks */
.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: 2px solid rgba(255,255,255,0);		/* border: 7px -> 3px - Smaller space between blocks */
	background: rgba(0,0,0,0.1);				/* rgba(0,0,0,0.1); -> 0,0,0,0 makes transparent */ 
	background-clip: padding-box;
	border-radius: 15px;						/* Round corners */ 
}

.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover {
	padding-top:15px; 
	padding-bottom:15px; 
	border: 2px solid rgba(255,255,255,0); 
	background: rgba(255,255,255,0.1); 
	background-clip: padding-box; 
	border-radius: 15px; 
	cursor:pointer;
}

/* Height of the blocktitles and center text in new height */
div.mh.titlegroups {
    height: 20px !important;
    padding-top: 3px !important;
	background: rgba(0,0,0,0);	
}

.col-xs-12.mh.titlegroups.transbg {
	height: 0px;
}

/* Text size in blocks */
div.screen {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-position: center;
    color: white;
    font-size: 12.5px !important;				/* default 10px - 12.5px */
}

/* Text behind icon in blocks */
.col-xs-10 {
  width: 73%;		/* overrule bootstrap.css - width: 83,33333% */
}

/* Block Title */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    margin: 0px;
    margin-left: 15px;
    font-weight: 900;
    font-size: 150%;
}

/* Standby screen */
.standby .clock{
   font-size:60px !important;
}
.standby .weekday,.standby .date{
   font-size:40px !important;
}

/* Transparent Background for arrow Blinds - Big Screen */
.input-groupBtn.input-chevron .btn-number {
    padding: 5px 10px 5px 10px;
    background-color: transparent;
}

/* Transparent Background for arrow Blinds - Small Screen */
@media only screen and (max-width: 1400px) {
	.input-groupBtn.input-chevron .btn-number {
		padding: 7px 10px 7px 10px;
		background-color: transparent;
	}
}

/* Trashcan text modification */
.trash .state div.trashrow {
    font-size: 14px;
}
.trash .state div.trashtoday {
    font-size: 18px;
}
.trash .state div.trashtomorrow {
    font-size: 14px;
}

.trashcan { 
    height: 30px;
    width: 30px;
} 

/* Modified sliders for the dimmers */
.block_179 .ui-slider-handle,
.block_193 .ui-slider-handle,
.block_213 .ui-slider-handle {
    border-radius: 25px;
    height: 28px;
    width: 35px;
	padding: 6px 10px 6px 10px;
	background-color: rgb(126,119,166);
	border-color: rgb(126,119,166);
}

.block_179 .ui-slider-horizontal,
.block_193 .ui-slider-horizontal, 
.block_213 .ui-slider-horizontal {
    border-color: transparent;
    height: 6px;
	bottom: -5px;
	margin-left: 10px;
	background-color: rgb(126,119,166);
}

.slider-on .ui-slider-handle {
    background-color: #fff;
    border-color:  #fff;
}

.slider-on .ui-slider-horizontal{
	background-color: #fff;
	border-color:transparent;
	height: 3px;
}

/* Scrollbar - Anywhere on the dashboard */
::-webkit-scrollbar {
    width: 1px;									/* Small vertical scrollbar */
    background-color: transparent !important;	/* Scrollbar transparent */
}

/* Location Buttons in Blocks */
.block_213 .btn-group, .block_214 .btn-group-vertical,
.block_214 .btn-group, .block_214 .btn-group-vertical,
.block_225 .btn-group, .block_225 .btn-group-vertical,
.block_226 .btn-group, .block_226 .btn-group-vertical,
.block_443 .btn-group, .block_443 .btn-group-vertical,
.block_461 .btn-group, .block_461 .btn-group-vertical,
.block_462 .btn-group, .block_462 .btn-group-vertical {
    position: fixed;
    display: inline-block;
    vertical-align: middle;
	margin-left: 10px !important;
}

/* Large Font for Block Titles */
.block_6 .title,
.block_150 .title,
.block_153 .title,
.block_179 .title,
.block_193 .title,
.block_213 .title, 
.block_214 .title, 
.block_217 .title,
.block_225 .title, 
.block_226 .title, 
.block_443 .title,
.block_452 .title,
.block_461 .title, 
.block_462 .title, 
.block_463 .title, 
.block_464 .title {
	font-size: 17px !important; 
	margin-left: 10px !important;
}

/* Large Font for Block Status */
.block_6 .state,
.block_150 .state,
.block_153 .state,
.block_179 .state,
.block_193 .state,
.block_213 .state,
.block_217 .state,
.block_443 .state,
.block_452 .state,
.block_463 .state,
.block_464 .state {
	font-size: 17px !important;
	margin-left: 10px !important;
}

/* Position Last Update Text */
.block_150 .lastupdate,
.block_153 .lastupdate {
	margin-left: 10px !important;
}

/* Font Size Calendar Items */
.col-xs-12.transbg.containsicalendar {
	font-size: 14px !important;	
}

/* END CUSTOM MODIFICATIONS */

EdwinK wrote: ↑Saturday 04 November 2017 23:13

yfands wrote: ↑Friday 13 October 2017 10:34 Hai Rob,

Nice work, I like Dashticz very much.

But I have way to many 'items' for 1 dashboard, so by creating more dashboards (screens) I'll keep swiping, so In my opinion there was only one thing missing, a mainmenu, I can now jump to the desired screen by a click/touch.
So with a little change in main.js I was able to create a menu with buttons, once clicked/touched will slide to the desired screen.
Maybe another option for Dashticz, but I like to see it in an ordered fashion, something in Config.js saying var Menu{} etc..
Or maybe keep the dashboard 'look', and create a mainmenu in the topbar.


Regards
Frank

I've been playing with this, and although it looks great, I rather go back to the original Dashticz for now. Do I need to change stuff in main.js again?