The Column ID option provides a handy way to assign styling to one or more columns. This is best used to handle exception styling; where the grid has been assigned a Column Color Scheme and you wish to style one or more columns differently, without the need to assing any special style classes.
1. Set the Column Color Scheme to Deep Blue. This assigns the green background to all columns.
2. Enable the 'Assign Column IDs' option. This will assign a unique id to every column in the grid.
3. Click OK to close the interface.
4. To set the center (2nd) column to a red background and white text, add this style rule to your style sheet:
#qgm-1-2 {
background-color: rgba(255,0,0,1);
color: #FFF;
}
5. Save the style sheet and preview the page, your grid will look like this:
Column 1
<div id="qgm-1-1" class="qgm-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed magna nec elit fermentum bibendum.
Column 2
<div id="qgm-1-2" class="qgm-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed magna nec elit fermentum bibendum. Praesent sollicitudin auctor erat, in elementum augue ultricies non. Nam iaculis, sapien sit amet consequat interdum, tellus erat bibendum mauris, eget hendrerit felis velit vel ante. Morbi laoreet vitae ipsum ut semper. Vivamus ipsum ex, volutpat nec ultrices vitae, tincidunt a tellus.
Column 3
<div id="qgm-1-3" class="qgm-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed magna nec elit fermentum bibendum.
Nam sed magna nec elit fermentum bibendum.
You can also target more than one column. Here is a 5 column grid with a Column Color Scheme set to Deep Blue. We can set the 1st and 4th column to a custom color by using a compound selector. Add this rule to your style sheet:
#qgm-2-1,
#qgm-2-4 {
background-color: rgba(255,0,0,1);
color: #FFF;
}
The 1st and 4th columns will now have a red background with white text:
Column 1
<div id="qgm-2-1" class="qgm-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis, sapien sit amet consequat interdum, tellus erat bibendum mauris, eget hendrerit felis velit vel ante. Morbi laoreet vitae ipsum ut semper.
Column 2
<div id="qgm-2-2" class="qgm-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Column 3
<div id="qgm-2-3" class="qgm-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Column 4
<div id="qgm-2-4" class="qgm-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis, sapien sit amet consequat interdum, tellus erat bibendum mauris, eget hendrerit felis velit vel ante. Morbi laoreet vitae ipsum ut semper.
Column 5
<div id="qgm-2-5" class="qgm-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Column 6
<div id="qgm-2-6" class="qgm-col">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.