1.3 How style.css works. Apps Template improvements.

CreaTusApps made some essential page and template improvements. There are significant modifications in style.css.
All templates have been modified to support Landscape / Portrait mode. All pages in all templates will use flexible HTML/CSS to align center in both modes (Portrait and Landscape)

To make page modifications easier you need to know the connection between a page and a CSS class.


On CreaTusApps each page has several corresponding CSS classes. To detect them, please go in your application.

Dashboard-> Design Properties->Edit" style.css"

Sample: If you have created Grid MENU page type, in your style.css classes with prefix gridmenu will be inserted (ex. .gridmenuimagecontainer).

How style.css works. Apps Template improvements

For Button MENU page type in style.css will be inserted classes with buttonmenu prefix (ex. buttonmenuitemcontainer)

image buttonmenucss of style

These classes will be inserted in style.css when you create a new page or when you convert an existing page to a specified page type.
These injected classes affect only the pages of specified type.
The Style.css classes has been modified to support landscape/portrait mode.
Let's take for example Grid MENU page type. 
If you already created a Grid MENU page type in your app, it will not support landscape mode.
Why? Because your classes related to a page have been already injected before.
You need to replace these classes with new classes.
To repair this issue please follow these steps:
  • 1.1 Go in your app Dashboard->Design Properties->Edit"style.css"
  • 1.2 Find /*gridmenucssaddition*/ comment and delete all classes starting with   gridmenu prefix including  /*gridmenucssaddition*/ comment.
  • 1.3 Go to your app Dashboard->Edit Pages
  • 1.4 Create a new Grid MENU page, in your style.css will be inserted new gridmenu CSS classes.
  • 1.5 Verify on your device the old Grid menu page, it should work like a new page supporting landscape mode, because it uses the new CSS classes.
  • 1.6 Delete from your pages the last new Grid MENU page created.
Atenttion: The second option may result in loss of page information.
  • 2.1 Go to your app Dashboard->Edit Pages
  • 2.2 Click on your existing Grid MENU page and convert it to Grid MENU page type. If you do not have /*gridmenucssaddition*/ in your file style.css, corresponding classes will be inserted in style.css when you convert your page to Grid MENU page type. If you have /*gridmenucssaddition*/ please follow steps 1.1 – 1.6


Leave a Reply

Your email address will not be published. Required fields are marked *