The layout of the columns is determined by the CSS of your site. The Geometrix Demo site only has evenly split columns in it's CSS. In order to get variations in the split of the column you need to do a couple of things (this list assumes you want to keep the 50/50 split):
- Add CSS classes to your site's CSS to support that new split. Your CSS class names must follow the same patterns as the demo site's CSS - which means you will have a wrapper div around all the columns with what I'll call as base CSS class name - this can be anything you want it to be - for example in the Geometrix Demo they use cq-colctrl-lt0 for the two column base class. Then for column the div class name is created by adding a column number to the end of the base classname. The format of this column number is -c0 for the first column, -c1 for the second, and so on for all the columns. So if you look at the Geomettrix demo you see class names cq-colctrl-lt0-c0 and cq-colctrl-lt0-c1 for the two column control. So you might need CSS for mycolumnname, mycolumnname-c0, and mycolumnname-c1 where mycolumnname-c0 would apply the 70% width, and mycolumnname-c1 would be the 30%. If you look at /etc/designs/geometrixx/static.css you can see the Geometrixx CSS classes starting on line 814 in the 5.6.1 version.
- The next step is to configure the column control component in design mode.
- Go to a page with a column control on it
- Go into design mode
- Open the Design of colctrl Edit button
- You will see an Allowed Formats text box with a several lines. The format of these lines looks like NbrColumns:BaseCSSClass Descriptive Name where there is a tab between base CSS Class and Descriptive name. So in the Geometrixx demo you see entries like 2;cq-colctrl-lt0 2 Columns (50%, 50%) it might look like 2:mycolumnname 2 Columns (70-30)
- Save and you new column format should be available.
It's critical that your CSS class names match the configuration in design mode and the pattern of the column numbers or the column will just stack.
If you want your custom columns to be dragable you have to create a virtual column control component - look at /libs/foundation/components/parsys/colctrl/virtual for examples.