Go To ↓ Navigation & Information Other Information

Using the Column Shortcode

The [column] can be used to create build columns which can be more appropriate for displaying content than using HTML tables. These shortcodes have some special attributes that handle creating all the proper HTML needed to create a column that can be displayed properly.

Attributes

The [column] actually creates an HTML DIV container with all the proper attributes to create a simple column. Special attributes can be used to manipulate the way the column is created and displayed.

  • width – The width of the column. Height is defined by the content.
  • padding – By default this defines right gutter spacing to the next column. Should be something like 1px, 1em, or other CSS measurement.
  • style – The width and height above are normally combined to create an HTML style attribute, but a specific style attribute can be defined for knowledgeable users.
  • class – This creates the HTML class attribute. This is the preferred method at Nicholls to create columns that have been tested.

Examples

Here is the basic example of a column. This the default so is no different than using [column]My column text[/column].


[column width=0 padding=0 style=false class="column-"]
My column text
[/column]

Here is the example that creates a column that floats to the right with a red border on the left and a gray pattern background. This is one of the more complex columns.


[column class="column- float-right width-right-default border-red border-2-left pattern-light-grey"]
My Column Text
[/column]

My Column Text

This is how it looks when used. You’ll notice the complex text shown in the Class attribute. Those special classes are combined to create the column and set how it is displayed. These attributes are specific to the Nicholls WordPress websites and the classes may change depending on the theme.

2010 Nicholls Core Theme Column Classes

Here are the classes specifically for the 2010 Nicholls Core Theme.

  • column- You must include the dash at the end. It must be used by default do indicate the column.
  • float-left or float-right Indicates how the if the column is displayed on the right or left. You should be aware how the text before or after the column will wrap since the text wrapping depends on how the column is floating.
  • width-50, width-49, width-47, and width-46 are classes that define the width percentage.
  • width-default and width-right-default both define the width to line up the column with the logo. Typically used with a column that is float-right with a border that lines up with the logo’s vertical red line.
  • Some other special effects for columns can be found on the HTML & CSS Notes.
Go To ↑ Top