What can I display in the Dashticz title bar?

[Daro1003]

What can I display in the title bar except: ['logo','mini clock','settings']
Can I display, for example, the temperature from one of the sensors? Outdoor temperature or Raspberry temperature?

As you can see, there is a lot of space on it and you can use it for information.

[SilentSimon]

Im curious as well

[madpatrick]

Just make own.
Remove the defualt top bar and make your own custom blocks

2024-02-18 16_48_01-Fully Remote Admin.png (215.61 KiB) Viewed 722 times

[SilentSimon]

that looks fancy, can you share your config (css) files?

[madpatrick]

Publishing the complete config is a bit too much info i think, so this is a snip for the title blocks

CONFIG.js

Code: Select all

var blocks = {}
// -------------------------------------------------------------------------------
// TITLE BLOCKS
// -------------------------------------------------------------------------------
blocks['Title_Lichtschakelaars']= {width: 12,type: 'blocktitle',title: 'Schakelaars',image : 'patrick/blue_switch-on.png'}
blocks['Title_Dials']		= {width:  4,type: 'blocktitle',title: 'Functies',image : 'patrick/blue_switch-on.png'}
blocks['Title_Garbage']		= {width: 12,type: 'blocktitle',title: 'Afval',image : 'patrick/garbage.png'}
blocks['miniclock'] 		= {width: 8};

// --------------------------------------------------------------------------------------------
// BLOCKS 
// --------------------------------------------------------------------------------------------
blocks[gr_tuin] 		= {width: 2, hide_data : true, last_update : false, image: 'patrick/blue_garden.png', title:'Tuin'}
blocks[gr_kamer] 		= {width: 2, hide_data : true, last_update : false, image: 'patrick/blue_desk_lamp.png', title:'Kamer'}
blocks[dimmer_hal]	 	= {width: 2, hide_data : true, last_update : false, image: 'patrick/blue_hal_light.png', title:'Hal'}
blocks[ventilatie] 		= {width: 2, hide_data : true, last_update : false, image: 'patrick/blue_fan.png', title:'Ventilatie'}
blocks['Slide_1'] 		= {width: 2, hide_data : true, last_update : false, image: 'patrick/blue_blinds.png', title:'Screens',slide:2}
blocks['Slide_2'] 		= {width: 2, hide_data : true, last_update : false, image: 'patrick/blue_speaker.png', title:'Muziek' ,slide:3}






// --------------------------------------------------------------------------------------------
// columns 
// --------------------------------------------------------------------------------------------
var columns = {}
columns['home1'] = {blocks: ['Title_Garbage','mygarbage'], width: 3}							
columns['home2'] = {blocks: ['Title_Dials','miniclock',gr_tuin,gr_kamer,dimmer_hal,ventilatie,'Slide_1','Slide_2'], width: 9}
columns['home4'] = {blocks: ['Title_Lichtschakelaars','Somfy_blok1','Somfy_blok2','Somfy_woonkamer'], width: 12}	

Code: Select all

/* ---------------Different fontsize & color for Column --------------- */ 
.blocktitle 					{height: 40px !important;background-color: rgba(130,130,130,0.2)!important;display: flex !important;justify-content: center !important;	align-items: center !important;}
.blocktitle .dt_title				{font-size: 24px;color: rgba(255,255,255,1); text-shadow: 4px 4px 4px #000000;padding-top: 4px !important}
.blocktitle img					{max-width: 34px !important;padding-bottom: 10px !important}
.miniclock					{font-size: 24px;color: rgba(255,255,255,1); text-shadow: 4px 4px 4px #000000;padding-top: 4px !important;height: 40px !important;background-color: rgba(130,130,130,0.2)!important;text-align: right !important}

/*---------------CHANGE ICON SIZES---------------*/ 
.mh .fas,
.mh .far,
.mh .wi						{font-size: 28px !important;}


/* ---------------GARBAGE---------------  */ 
[data-id='mygarbage']				{height: 130px !important;background-color: rgba(77, 77, 222, 0.2) !important;border: 3px solid rgba(255,255,255,0) !important;border-radius: 1px !important}
[data-id='mygarbage'].garbage .trashdate	{width: 50% !important} 				
[data-id='mygarbage'].garbage .trashtype	{width: 50% !important} 	
[data-id='mygarbage'].garbage .trashtoday	{font-size: 14px; font-weight: bold; color:yellow !important;text-align:right !important;}
[data-id='mygarbage'].garbage .trashtomorrow 	{font-size: 14px; font-weight: bold; color:yellow !important;text-align:right !important;}
[data-id='mygarbage'].garbage .trashrow      	{font-size: 14px; font-weight: normal; color:white!important;text-align:right !important;opacity: 0.7 !important}
[data-id='mygarbage'].garbage img		{max-width: 75px !important;display:inline-block;position: relative; top: -10px !important;}}

/* --------------- LIGHT  SWITCHES ---------------  */ 

.block_59,
.block_64,
.block_69,
.block_96,
.block_276,
.block_455,
.block_355,
.block_431,
.block_264,
.block_540,
.block_237,
.block_559,
.block_256,
.block_267,
.block_454,
.block_638					{height: 100px !important;background-color: rgba(77, 77, 222, 0.2) !important;border: 3px solid rgba(255,255,255,0) !important;border-radius: 1px !important;text-align: center !important}

.block_59 .icon,
.block_64 .icon,
.block_69 .icon,
.block_96 .icon,
.block_276 .icon,
.block_455 .icon,
.block_355 .icon,
.block_431 .icon,
.block_264 .icon,
.block_540 .icon,
.block_237 .icon,
.block_559 .icon,
.block_256 .icon,
.block_267 .icon,				
.block_454 .icon,
.block_638 .icon				{font-size: 40px !important;}


.block_59 img,
.block_64 img,
.block_69 img,
.block_96 img,
.block_276 img,
.block_455 img,
.block_355 img,
.block_431 img,
.block_264 img,
.block_540 img,
.block_237 img,
.block_559 img,
.block_256 img,
.block_267 img,				
.block_454 img,
.block_207 img,
.block_198 img,
.block_464 img,
.block_630 img,
.block_638 img,
.block_721 img					{max-width: 65px !important;}

.block_673 .off.icon 				{opacity: 1 !important}
.block_454 .value				{font-size: 20px !important;}

.block_59 .state,
.block_64 .state,
.block_69 .state,
.block_96 .state,
.block_276 .state,
.block_455 .state,
.block_355 .state,
.block_431 .state,
.block_264 .state,
.block_540 .state,
.block_237 .state,
.block_559 .state,
.block_256 .state,
.block_267 .state,
.block_454 .state,
.block_638 .state				{display: none !important}

.block_59 .title,
.block_64 .title,
.block_69 .title,
.block_96 .title,
.block_276 .title,
.block_455 .title,
.block_355 .title,
.block_431 .title,
.block_264 .title,
.block_540 .title,
.block_237 .title,
.block_559 .title,
.block_256 .title,
.block_267 .title,
.block_454 .title,
.block_207 .title,
.block_198 .title,
.block_464 .title,
.block_630 .title,
.block_638 .title				{font-size: 18px !important;color:lightyellow !important;}

[EdwinK]

Sure looks nice. See I have some work to do