Domoticz

Posted: **Saturday 29 January 2022 12:42**

What is the best way to make a menu with buttons to active several pages ?
My goal is to have a clickable button, with an image that is as large as the button with a title center horizontal enad vertical

I tried the button way and had problems with getting the button-height changed
Another way is to use normal blocks, but with this approach i cant get the title aligned vertically

blocks['menu_irrigatie'] = {title: 'IRRIGATIE',width: 3, icon: 'fas fa-hdd',slide:6}

css
div[data-id='menu_irrigatie'] {height: 200px !important;text-align: center; vertical-align: middle} */
also tried v-align: and values middle and center

Posted: **Saturday 29 January 2022 19:14**

This is how i did it

config.js

Code: Select all

buttons.slidehome 	= {
	key: "Home",
	width: 12, 
	title:"Home Screen",
	slide:1, 
	icon: 'fas fa-home'}

custom.css

Code: Select all

.button[data-id='Home']				{height: 50px !important;background-color: rgba(255,255,0,0.1)!important;}
.button[data-id='Home'] .dt_title			{font-size: 30px !important; color: #f4ffcc !important;padding-left: 30px !important}
.button[data-id='Home'] .col-icon			{font-size: 30px !important; color: white !important;padding-left: 350px !important}

I use padding to play with the location.
Did not find yet a good alternative to center the text

Posted: **Saturday 29 January 2022 20:40**

Thanks!
Will try it

Posted: **Sunday 06 February 2022 19:21**

Works perfect , thanks!

Domoticz

menu

menu

Re: menu

Re: menu

Re: menu