In this section
Advanced Layout & Customization Guide
Take control of your Drupal site!
This page is designed to work in tandem with the Sample Content and Styles page.
The Sample Styles page is a plain listing of available styles, while this page will provide you with more details on how to implement the more advanced styles, as well as how to combine styles to fully unlock the customization potential of your Drupal site.
Is There A Particular Layout You Want To See Here?
If there's a particular layout you want to achieve, send us an email!
Applying CSS Classes
Apply Classes in HTML
All CSS classes here can be applied to the appropriate element through HTML, which you can access with the Source view. For example, if you want to use an image class, you can apply it directly to the image tag itself, like this:
Apply Classes in CKEditor
Some styles can be applied in CKEditor. In addition to the two methods described below, there is a button (pictured) in CKEditor to insert templates.
After a template is inserted, you can replace the sample content with your own.
Many elements have a properties dialog box that can by right-clicking the element and selecting the properties option.
The Advanced tab has a Stylesheet Classes field where classes from this guide can be added.
After selecting an element, the Style dropdown menu of CKEditor can be used to browse and apply styles available to that element type.
Image Styles
Direct Image Classes
The legend for these icons is in the right sidebar!
Some common image classes are listed in the table below. Use the links in the right column to apply the class to the sample image below (expand the accordion to see the sample image) and try them out on the fly!
| Image Class | Name in Styles Dropdown | Click to Apply |
|---|---|---|
| No Class (Default) | N/A | Try it out! |
| image_left_noborder | Img, Lft noBorder | Try it out! |
| image_left_border | Img, Lft+Border | Try it out! |
| image_left_border_padding | Img, Lft+Padding+Border | Try it out! |
| image_right_noborder | Img, Rt noBorder | Try it out! |
| image_right_border | Img, Rt+Border | Try it out! |
| image_right_border_padding | Img, Rt+Padding+Border | Try it out! |
| image_border | Img, Border noWrap | Try it out! |
| image_border_padding | Img, Padding+Border | Try it out! |
| image_inline | Img, align w/textbottom | Try it out! |
Expand to View Sample Image
This is sample paragraph text. It helps illustrate how the different image classes you can try here impact the image's behavior around other content. This isn't an exhaustive sampler, as there are nearly endless places you can put an image into a page, and these classes may behave
slightly differently in different context. As an example, there is even variance within this same context. Generally, an image aligned to the left will format better around text if it precedes the text that you're trying to wrap. If you want to align an image to the right, however, you may find it wraps better when you insert it after the text. With that in mind, though – this is a good starting place that helps illustrate the number of options that are available to Drupallers!
Image Caption Classes
There are also two classes for image classes. However, unlike the image classes above, the caption classes are applied to a "p" tag that wraps both the image and the desired caption.
| Caption Class | Click to Apply |
|---|---|
| No Class (Default) | Try it out! |
| imageCaptionLeft | Try it out! |
| imageCaptionRight | Try it out! |
Expand to View Sample Image and Caption
This is regular paragraph text inserted after
an image that can be made into a caption with one
of the above classes.
How to Code This Example
Line breaks must be inserted to get a caption to wrap correctly underneath the image. One line break is required after the image and before the text, and additional line breaks may be added as necessary to wrap long captions to multiple lines. Line breaks can be inserted in CKEditor with the keyboard shortcut Shift + Enter, or in HTML with the <br /> tag.
<p class="captionLeft">
<img src="[IMAGE SOURCE]" />
<br />
This is regular paragraph text inserted after <br />
an image that can be made into a caption with one <br />
of the above classes.
</p>
Content Boxes
Content Boxes can be used to help emphasize or organize content as they offer a visible container that helps bring visual hierarchy to your page. There are three classes for content boxes, and they can be used by inserting a sample content box from the templates menu, or by directly adding one of the classes to a div in HTML. As an example:
<div class="contentBox"> [Your content goes in the div] </div>
You can try these content boxes out by using the links in this table to apply the different classes to the sample div located just below the table. Watch how the content box helps group content box classes help group the content together!
| Content Box Class | Click to Apply |
|---|---|
| No Class (Default) | Try it out! |
| contentBox | Try it out! |
| contentBox_no_outline | Try it out! |
| contentBox_outline_only | Try it out! |
Expand to View Sample Div
Content Box Sample Div
This is the sample div. By default it has no class, but you can bring some structure to this content by applying one of the classes in the table above. These classes help bring structure and visual hierarchy to your page!
Split Columns
Split column layouts only utilize two classes:
| Split Column Class |
|---|
| splitLeft |
| splitRight |
At their core, these classes are straightforward – they simply create two columns evenly split within their parent container. However, these two classes can be combined with other elements such as content boxes and may even be nested within each other, allowing for a vast array of potential combinations. Here are some of those options:
Basic Split Column Layout
Expand Example
Div Class "splitLeft"
This paragraph and header are inside a div with the class "splitLeft". Since this div isn't nested inside of any other tags, its parent container is the page. This means this div will take up the left half of the page.
Div Class "splitRight"
This paragraph and header are inside a div with the class "splitright". This div is also not nested inside of any other tags, so its parent container is also this page. As a result, this div takes up the right half of the page.
How to Code This Example
<div class="splitLeft">
<h3>Div Class "splitLeft"</h3>
<p>[PARAGRAPH TEXT]</p>
</div>
<div class="splitRight">
<h3>Div Class "splitRight"</h3>
<p>[PARAGRAPH TEXT]</p>
</div>
Multiple Content Box Column Layout
Expand Example
Content Box Inside a Split Left Div
The paragraph here is nested inside of a div with the class "splitLeft". The div itself isn't inside of anything else, so its parent container is the page. As a result, this paragraph will take up the left half of the body area of this page. Because we read left to right, the splitLeft div is usually the first div in the source code. It is usually followed by the splitRight div.
Content Box Inside a Split Right Div
The paragraph here is nested inside of a div with the class "splitRight". The div itself isn't inside of anything else, so its parent container is the page. As a result, this paragraph will take up the left half of the body area of this page. Because splitRight is usually the second div in the source code, it is usually followed by the "clear" div.
How to Code This Example
<div class="splitLeft">
<div class="contentBox">
<h3>Content Box Inside a Split Left Div</h3>
<p>[PARAGRAPH TEXT]</p>
</div>
</div>
<div class="splitRight">
<div class="contentBox">
<h3>Content Box Inside a Split Right Div</h3>
<p>PARAGRAPH TEXT]</p>
</div>
</div>
Single Content Box Split Column Layout
Expand Example
Split Left Column In Content Box
This paragraph and header text are nested inside of a div with the class "splitLeft," which is itself nested inside of a div with the class "contentBox".
Split Right Column In Content Box
This paragraph and header text are nested inside of a div with the class "splitRight," which is itself nested inside of the same "contentBox" div as the left column.
How to Code This Example
<div class="contentBox">
<div class="splitLeft">
<h3>Split Left Column In Content Box</h3>
<p>[PARAGRAPH TEXT]</p>
</div>
<div class="splitRight">
<h3>Split Right Column In Content Box</h3>
<p>PARAGRAPH TEXT]</p>
</div>
</div>
Four Column Layout
Expand Example
How to Code This Example
<div class="splitLeft">
<div class="splitLeft">
<img src="[IMAGE SOURCE]" />
</div>
<div class="splitRight">
<img src="[IMAGE SOURCE]" />
</div>
</div>
<div class="splitRight">
<div class="splitLeft">
<img src="[IMAGE SOURCE]" />
</div>
<div class="splitRight">
<img src="[IMAGE SOURCE]>" />
</div>
</div>
Accordions
Accordions are built with a CSS class ("accordion") like many things detailed in this guide. However, the accordions have standalone guides. For details on accordion implementation see the written guide or the video tutorial.
Tables
There are two different tables classes that, alongside the default style, give you a few different options for tables. The try it now links here will apply the class to the table itself, as well as the sample table!
| Table Class | Click to Apply |
|---|---|
| No Class (Default) | Try it out! |
| table_directory | Try it out! |
| table_noStyle | Try it out! |
Expand to View Sample Table
| Sample Header | Hooray Tables! |
|---|---|
| Test 1 | Awesome |
| Content | The best thing ever |
| Sample | Hello world |
Breaks
There are several types of breaks you can use on your pages:
Section Breaks
What is it?
Sections Breaks create an invisible vertical break in the page. They do not create any visual line on the page, but if placed between two elements, it will force those elements to stack vertically instead of side-by-side.
These can be inserted through CKEditor as a template.
Special Uses
This type of break can "contain" layouts. For example, split column layouts occasionally cause problems when single-column content is added (usually below them) on the page. A section break between the split and single column layouts can prevent one layout from breaking the other.
Section Break Code
<div class="clear"> </div>
Teaser Breaks
What is it?
Teaser breaks are designed specifically for use with news content. The Recent News page will show the text of news page as a teaser – the teaser break tells Recent News when to stop loading additional text, thus defining your teaser.
These can be added through CKEditor with the Insert Teaser Break button.
Teaser Break Code
<!--break-->
Visible Line Breaks
What is it?
Horizontal line breaks simply insert a thin dotted line on your page. They can help break up the page and provide visual hierarchy.
They can be added through CKEditor with the Insert Horizontal Line button.
Horizontal Line Break Code
<hr />
Simple Line Breaks
What is it?
The simple line break creates a "soft return," which is most often used to wrap text to a single line without creating a new paragraph or header tag. Keeping text within the same paragraph or header tag means there is less space between lines.
Simple line breaks can be inserted through CKEditor with the keyboard shortcut Shift + Return.
Horizontal Line Break Code
<br />
