making on off buttons in mobile dashboard bigger

[djazzz]

Hi,

could some css/htnl-guru, tell me how i can make the on and off switch/lights buttons bigger in dashboard (mobile view)?

thanks

[gizmocuz]

Maybe control + / - keys in the browser work ?

[djazzz]

yes it does, but unfortunately on my android phone that isn t an option.

I would want them a bit wider, on my sub 5 inch phone, it is hit and miss. They are displayed below each other:

Screenshot_2016-03-14-18-04-54.png (140.47 KiB) Viewed 1920 times

[stlaha2007]

Depends on what your browser is... Chrome or FireFox have 'remote' debufging options.

With that you can see which css-file AND which tag you need to modify...
Dont have a guide howto, but on developer.google.com are a few howto's for Chrome.

Problem (at least for me) is both Phone and Desktop PC need to be in the same ip-range to do this wired/wireless. Else you can debug thru usb-datacable.


Grtz,
Stephan

[djazzz]

<button class="btn btn-mini btn-info" type="button" onclick="SwitchLight(2,'On',RefreshFavorites,false);">On</button>

that what i find, bootstrap.css, but how should i proceed...

[gizmocuz]

That text "Status at this moment" should not be there...
buttons should be next to each other like this:

MobileTheme.PNG (22.82 KiB) Viewed 1865 times

Are you using the default domoticz theme/html files ?

[gizmocuz]

I think you are using the element theme... could you change to simple gray for example ?
Will be corrected in a beta

[djazzz]

yeah, i switched layouts, put it back on default
i removed browser cache, reinstalled browser and now buttons are displayed next to each other.

But question remains, where is the size defined of these on/off buttons?

Anyone?

[stlaha2007]

You already answered your question. You did find out which class and which css file bootstrap.css is responsible.

In debugger, just edit the sizes, changes on the fly.

However it is possible that another (loaded and called later) overwrites the setting. Debugger should show that also. Out of the head css option "important" or "no-overwrite" should fix that.

I'm mobile so no example available right now.

Grtz,
Stephan

[Marci]

But question remains, where is the size defined of these on/off buttons?

Anyone?

Code: Select all

<button class="btn btn-mini btn-info" type="button" onclick="SwitchLight(2,'On',RefreshFavorites,false);">On</button>

The web interface looks to be a bit of a mashup between Bootstrap3 for JS, and Bootstrap2 for CSS (looking at reported versions at top of each file). Refer to http://getbootstrap.com/2.3.2/base-css.html#buttons

If hunting thru bootstrap.css (around line 2539), then you’ll be looking to change the padding values in the btn-mini class - first value is used for top/bottom padding, second value is for left/right padding.

OR you could leave the css alone and do a find-and-replace on ~/domoticz/www/app/DashboardController.js where you should try changing all instances of btn-mini to btn-default, or btn-large, or (if you want to get brutal) btn-block. Restart Domoticz, and possibly drop your cache to get the changes to take effect.