Basic Use
After the module is enabled, the UI has to be activated from the theme settings page (admin/build/themes/settings/current_theme).
Inside the fieldset of Grid UI Settings, you'll have to check the box of "Activate Grid Controls", and then click on "Save configuration" button.
In the page you'll see two tabs in the left-middle side of the screen:
- OG UI: Activates the Interface Form.
- Guide: Shows a grid background for reference.
The OG UI Box Elements.
The OG interface has two tabs buttons at the top-right side of the box,this buttons allows Us to select which elements of the layout we want to work with, Regions or Blocks. By default the Regions tabs is selected, the elements in both sections are the same, except by the select field that will switch in each case between Regions or Blocks options respectively.
Info Area
Just under the Top Tabs, there is the area that displays information about the selected area, div id's and classes related to the grid system are shown in there, these values will update if the values are changed from the interface.
Select Region/Block Field
This Field lists all the avaliable Regions/Blocks in the current page.
When a Region/Block is selected, a blue background highlight the selected area, and the div Id's and classes are loaded in the Info area.
Grid Actions
From this field is selected the action to take on the selected element.
Next to this select field is the selector for columns units, from none to the max value for the container selected(the container defines the max number of columns in which the layouts is divided).
Add/Removed Classes
Besides the specific classes for grid systems, the OG UI allows Us to add/remove custom classes to the selected elements. When the fieldset is expanded, we can see a textfield for add/remove classes, with the buttons to the right of it, we control the operations we want to perform on that class.
With the mentioned, in a previous document, classes "alpha" and "omega" can be added/removed with this field.
Custom classes are useful to add pre-configured styles to the div.