Changing Metro theme box size

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

Changing Metro theme box size

Post by shasta59 » 2013-01-19 22:41

Here is how to change the metro theme box size you see after you log in.

The size is kept in the metro.css file and this is the only place you need to make changes.

Please insure you backup your file before making any changes.

The size of the one big box is related to the size of the smaller boxes so make sure you pay attention to that relationship. If, after making changes it looks wrong then adjust accordingly. I will put in the sizes I use as an example.

Here is the code to look for in metro.css

.one{width:280px;height:130px}
.two-h{width:580px !important;height:130px}
.two-v{width:280px;height:280px !important}


The changes are done to the numbers. Please make sure to retain the px after the numbers. Here are my changes: (in red). Note I have put in what the size used to be as a comment.

.one {width:280px;height:100px /* was 130 */}
.two-h {width:580px !important;height:130px}
.two-v {width:280px;height:220px !important /* was 280 */}

Save the metro.css file and upload to your server and you now have a new size to use.

Hint - to make switching back easier to the original sizes I leave the old metro.css file on the server. I just rename it to metroold.css. If I need to switch back I rename the new one and rename the original one back to metro.css

Alan
Calgary, Alberta, Canada - Using Appgini 5.50 -

Post Reply