menu Topic is solved

[pvklink]

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

[madpatrick]

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

[pvklink]

Thanks!
Will try it

[pvklink]

Works perfect , thanks!