Extension Research Article Style Guide

Old Main
This is an example of a floated-right image with a caption.

The guidelines below were written to make creating professional-looking research articles easier:

Adding Article Descriptions

In the properties settings, give each article a short, meaningful description of one or two sentences. These descriptions appear in the research news feed. The article's Digital Commons page is a good place to look for a description. Often the first couple sentences of an article work too, but make sure it contains a useful summary and remove any citations from the description.

Descriptions are displayed in search engine results and in news feeds on OU Campus. If they are too long, they get cut off in those places.

Also, replace any references in the description and article text that refers to "fact sheets" with "articles" when migrating them to the web.

Adding Images

  • The full-width top image should be 960x540.
  • Some research sections have an alternate, smaller image size of 480x270
  • Article images should be optimized for the web. They shouldn’t be larger than necessary to look clear when displayed on the page, and to make sure any important information or details in the image are legible.
  • Think about accessability. When possible, avoid using images with text in them. Give all images alt text.

To make responsive images that float to the right of paragraph text, you can paste the following HTML into the source code directly above the paragraph you want the image to float:

<div class="float-lg-right ml-lg-3 my-2">
<img src="depedency tag" alt="Alt text here" width="480" height="270"/>
</div>

To make responsive images that float to the left of paragraph text, just change a couple of classes or paste the following HTML into the source code directly above the paragraph you want the image to float:

<div class="float-lg-left mr-lg-3 my-2">
<img src="depedency tag" alt="Alt text here" width="480" height="270"/>
</div>

To create images with captions, use the following HTML (you can remove the <div> and </div> tags if you don't need to float the image):

<div class="float-lg-right ml-lg-3 my-2">
<figure class="figure">
<img src="depedency tag" alt="Alt text here" width="480" height="270"/>
<figcaption class="figure-caption text-center">Caption text here.</figcaption>
</figure>
</div>

Adding Headings

  • All headings should be bold
  • In general, remove colons after headings
  • In the source code, give headers the classes as shown in the examples below:
    • H2<h2 class="mt-4">
    • H3<h3 class="text-bright-light">
    • H4<h4 class="text-brick">
    • H2 headers above the author and related research blocks<h2 class="mt-4 h3">

Quick tip: to avoid needing to go into the source code of the page you’re editing to insert new headings, leave the default text on the page, so you can copy and paste the headers from there.

Adding Author Blocks

  1. In the code editor or source view, paste the following HTML before the last </div> tag directly before the <h2> tag for the related research section:
<div class="col-md-6">
INSERT COMPONENT HERE
</div>
  1. In the WYSIWYG editor view, select the text that says "INSERT COMPONENT HERE," click the "Insert Component" button from the menu bar, select "CP Directory Feed (All Sites)" from the dialogue and click the "Insert" button.
  2. Enter the following values into the dialogue's form and save:

How many items do you want to show? (Feed Length): 1
Tag List: Enter name of author
Style: Horizontal
How Many Columns Should the Feed Appear In? (Breakpoint): 2

Adding Tags in Related Research Blocks

In the related research component dialogue, you will have to add the appropriate tag for topic you’re working on along with the tag of “research,” which is added by default.

Other Tips

Line Breaks

When creating a line break for a new paragraph or heading, rather than pressing enter (or pressing enter twice), press shift+enter. This will create a properly spaced paragraph or heading rather than only moving the cursor down to the next line.

Show Blocks

To more clearly see what elements are on your page in the WYSIWYG, and to problem solve, try selecting the Show Blocks view button from the top menu bar. This will outline and label page elements.

Pasting Text

Often times, when pasting text into OU Campus from a word processing program, unnecessary styling is introduced into the HTML code. It might look fine in the editor, but if you look in the source view, you can see that it makes future edits more difficult.

To prevent this unwanted styling, press command+shift+v to paste text into OU Campus for clean, unformatted code.