Page 1 of 1

making on off buttons in mobile dashboard bigger

Posted: Monday 14 March 2016 16:45
by 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

Re: making on off buttons in mobile dashboard bigger

Posted: Monday 14 March 2016 18:00
by gizmocuz
Maybe control + / - keys in the browser work ?

Re: making on off buttons in mobile dashboard bigger

Posted: Monday 14 March 2016 18:06
by 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
Screenshot_2016-03-14-18-04-54.png (140.47 KiB) Viewed 1923 times

Re: making on off buttons in mobile dashboard bigger

Posted: Monday 14 March 2016 18:50
by 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

Re: making on off buttons in mobile dashboard bigger

Posted: Monday 14 March 2016 20:38
by 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...

Re: making on off buttons in mobile dashboard bigger

Posted: Tuesday 15 March 2016 8:47
by gizmocuz
That text "Status at this moment" should not be there...
buttons should be next to each other like this:
MobileTheme.PNG
MobileTheme.PNG (22.82 KiB) Viewed 1868 times
Are you using the default domoticz theme/html files ?

Re: making on off buttons in mobile dashboard bigger

Posted: Tuesday 15 March 2016 8:47
by gizmocuz
I think you are using the element theme... could you change to simple gray for example ?
Will be corrected in a beta

Re: making on off buttons in mobile dashboard bigger

Posted: Wednesday 16 March 2016 16:26
by 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?

Re: making on off buttons in mobile dashboard bigger

Posted: Wednesday 16 March 2016 16:48
by 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

Re: making on off buttons in mobile dashboard bigger

Posted: Tuesday 22 March 2016 18:14
by 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.