This document will guide you through the use of the compatibility styles for the Gambio GX3 shop.
Since v2.5.1.0 the shop implements a compatibility mode that will automatically style old pages (with the help of JavaScript). You do not need to worry about compatibility when implementing new pages.
Continue reading in order to learn how to use the gx-admin.css through the provided examples and demos. Keep in mind that you will need to place the "gx-container" class only once in your page and not for every container element as shown in the examples. The "gx-compatibility" class will be automatically added into old pages that use the "header.php" file.
The gx-admin.css file is working closely with the JS Engine which is shipped with the project's source code. For more complex UI widgets take a look at the "JavaScript Engine" documentation.
The gx-admin.css will be already included in every admin page that contains the "header.php" file the only thing required to get it working is to set the markup as shown in the following examples.
The table model allows you to arrange data into rows and columns of cells.
You can put own configuration contents for your custom module into the sidebar.
In many tables we use descriptive action icons instead of labeled buttons. These are most commonly used icons in the shop.
To display messages (e.g. error messages) in the shop you can use these pre-styled alerts.
Following panels can be used for alerts as well as control panels.
To limit the page width you can use these predefined breakpoints on the element which wraps the
content of the site.
Attention: It is highly recommended to use the smallest breakpoint as possible.
There are predefined text input classes to set consistent field sizes.