Dashticz - buttons format - full button

[Doudy]

Hello,
I would like to put (enlarge) the image in the "buttons" frame



Here are my settings:
CONFIG.js

Code: Select all

buttons.meteo = {
	key: 'meteo',
	title: 'Météo',
	width: 3,
	height: 350,
	isimage: true,
	refresh: 60,
	image: 'meteo-nuageux.png',
	
}

custom.css

Code: Select all

.button[data-id='meteo'] {
	min-height: 185px;
	border: 3px solid rgba(255,255,255,0);
	background-color: #cba !important;
	font-size: 12px;
	color: red;
}

isimage is on true !

Code: Select all

isimage	Set to true if the image should be shown in the full button width (default false).

An idea ?

[Doudy]

Nobody ?

[cornesch]

Hi Doudy,

See my configuration below, this will help you to the solution:

CONFIG.js
var buttons = {}
buttons.page1 = { width:12, title:'page 1', image: 'img/thuis.png', isimage: true, slide:1};
buttons.page2 = { width:12, title:'page 2', image: 'img/grafiek.png', isimage: true, slide:2};
buttons.page3 = { width:12, title:'page 3', image: 'img/thermometer.png', isimage: true, slide:3};
buttons.page4 = { width:12, title:'page 4', image: 'img/instellingen.png', isimage: true, slide:4};

[Doudy]

Hi Doudy,
See my configuration below, this will help you to the solution:

Hi Cornesch,
I tried your suggestion

CONFIG.js

Code: Select all

var buttons = {} //only once!!
buttons.meteo = {
	key: 'meteo',
	title: 'Météo',
	width: 8,
	height: 350,
	image: 'img/lesoir.png',
	isimage: true,
	slide: 1
};

But same result as above

Capture.PNG (4.49 KiB) Viewed 454 times

Where could the problem lie?

[Doudy]

Nobody ?

[cornesch]

Hi Doudy,

See below how this works with an icon, it should work the same with an image.

CONFIG.js:
var buttons = {}
buttons.p2 = {key: "button0",width:1, isimage:true, icon:'fas fa-bars', title: '', slide:2}

custom.css:
[data-id='button0'] {
//background-color: red !important;
max-height: 70px !important;
width: 80px;
}

Try to get it working first with an icon and then with an image.

The image must be placed in the /dashticz/img folder.

[Doudy]

Hi cornesh,

I tested this
CONFIG.js:

Code: Select all

buttons.meteo = {
	key: 'meteo',
	title: 'Météo',
	width: 1,
	image: 'img/hot_water_on.png',
	isimage: true,
};

custom.css:

Code: Select all

.button[data-id='meteo'] {
	max-height: 70px !important;
	width: 170px !important;
}

Result:

Capture.PNG (6.54 KiB) Viewed 402 times

I tested with different images (.png and .jpg)
Same result!

[Doudy]

The problem was

there are

Code: Select all

image: 'img/hot_water_on.png',

it's necessary

Code: Select all

image: 'hot_water_on.png',

delete folder name

But the image is not be shown in the full button width isimage