Carrington Build Documentation

Creating Custom Module Styles

Since the module markup stays consistent, it’s easy to create interchangeable styles by adding CSS classes to the module wrapper. To add custom classes, just click the “gear” menu in the top-right corner of any module edit lightbox.

Let’s create a grey callout box style that can be used to highlight important content. We want a rounded border around the box and 20px of padding on the inside of the box. Additionally, we want 6px of space between the title and content. One hitch: box may or may not have a title. The style is applied to a module by adding the class special to the module.

/* Best-practice shared module styles */
.cfct-module {
	/* Keep overflow contained */
	overflow: hidden;
}
.cfct-mod-content {
	/* Keep spacing consistent */
	margin-bottom: 20px;
}

/* Grey box styles */
.cfct-module.special {
	background: #eee;
	border: 4px solid #ddd;
	/* Rounded corners */
	-moz-border-radius: 4px; /* FF1+ */
	-webkit-border-radius: 4px; /* Saf3+, Chrome */
	-khtml-border-radius: 4px; /* Konqueror */
	border-radius: 4px; /* Standard. IE9 */
	margin-bottom: 20px;
	padding: 20px 20px 0; /* Space on bottom will be filled by -content margin */
}
.cfct-module.special .cfct-mod-title {
	margin: 0 0 6px;
}

 

Let’s break this down.

  • Add a bottom margin to the module: all modules have 20px of space below them from the module content margin. Now that we’ve wrapped that space in a box style, we’ll want to add extra space below the box so it doesn’t bump into modules below it.
  • Pad module inside: padding is added to the left, right, and top of the module. The bottom is left at zero, because…
  • Margin on bottom of module content keeps spacing consistent.

See also:

Back to Carrington Build

These sections are available to the public. The remaining sections are available exclusively to customers.