ºÚÁϳԹÏÍø

Skip to Main Content
ºÚÁϳԹÏÍø
Help for Web Editors

Staggered Border Snippet

The instructions below will guide you to put the Staggered Border Snippet into an OU page. A login and basic familiarity with OU Campus is required in order to follow the instructions. If you do not have a login or are not familiar enough with OU Campus where you feel comfortable yet, please contact a member of the web team within The Office of Marketing and Communications.

Examples

The Staggered Border Snippet does not have any options with it. You can place the image in the first column and then text in the second column or you can place the text in the first column and the image in the second column.

Screen Shot
Staggered Border Snippet
 
 

Add STAGGERED BORER Snippet

Please note this snippet should ONLY be used in the Main Content editable region. There will be another snippet/component that will work in Full Width Top or Full Width Bottom editable regions. This snippet is essentially a compressed version without as much white space.

Step 1

Log into OU Campus and navigate to the page that you would like to add the snippet to. Check out the page and begin editing it. 

Step 1

Step 2

Find the spot on the page where you would like to put the snippet. Make sure this is on a new line by itself. 

Step 2

Step 3

Go to the editor toolbar and select the Snippets icon. Find and click on the Staggered Border Snippet. Then insert it. Note that the preview may look odd. This is okay.

step 3

Step 4

A table will be inserted into the page that will have two rows and two columns. 

You can replace the text/images with the content you wish. You can remove the default content and start from scratch. 

The first row does not need to start with an image in the first column. You can start the first column with text and the second column with an image and then alternate from there. It is recommended that you alternate rows.

Note: You can only have ONE image per row. Inserting an image with the text portion will create the borders around the text. 

step 4

Step 5

To add a row, right-click on an already existing content block within the table. Go to Row and then Insert Row Before or Insert Row After depending on where you want to put it. DO NOT right click on the configuration row or the title of the table, ONLY on an existing content block.

To remove a row, right-click on the row you want to remove and then go to Row -> Delete Row. The row will be removed.

Note: Changing any properties of the table will NOT be reflected when the page is published. This table is only presented to make the editing the content simple for the user.

step 5

Step 6

When you are finished addiing the content that you would like. Save, preview and publish. Before you publish, please be sure to make any notes that you made to the page. Also triple check that everything is spelled correctly and linked correctly. This is important.

Step 6

Frequently Asked Questions

Is there an image within your text? If so then it needs to be removed. If there is no image within the text then contact a member of the web team.

Not currently. If you want to suggest additional colors, please contact a member of the web team and we will take it under consideration. There are a few things to consider when adding more colors such as brand guidelines and ADA compliance.

Do you still have questions? Do you have a suggestion to make this guide more helpful or better understood? Please let us know. Seriously, we want to hear from you.

Developers / Programmers Notes:

CSS /_resources/css/kraken-snippets.css
JavaScript None
Third Party Libraries None
Table Transformation Yes
XSL Location /_resources/xsl/_shared/snippets.xsl
Date Created 2018.08.25
Last Audit/Update 2018.08.25