Tag Archives: text

Image Captions

In the top navigation CMS template you can add captions to images displayed inline on a page. Creating these captions involves some code editing.

  1. Create your image using the Image Editor in the CMS. Note: This feature will add a gray box around the image and caption that will extend the entire available width. Be sure to use the appropriate size image for the space the picture and caption will be using. Refer to the Suggested Use of Image Sizes to determine the appropriate size to crop.
  2. Insert the images inline on your page or highlight using the screen shot of the inline image icon icon.
  3. Access the code using the Source Code button (<>).
  4. If your image is linked, look for the link tag (<a …>), otherwise find the image tag (<img … />).
  5. Continue reading


Homepage Full Width Impact Statement

This widget can be used for a site homepage, generally beneath the main image. Your site must be using the top nav, responsive layout for it to function. It will stretch across the entire screen width, automatically centers the text, and gets a gray background and yellow line beneath. You could include links in the statement also. These styles cannot be changed.impact-statement

 

 

  1. Create a Highlight that includes the text with any links or buttons in the callout section.
    1. The button is not automatically styled. A default button will be gold filled. To create the outline button your must format it as “blank.”
      1. Create the button.
      2. Click on the Source Code icon.
      3. Find the code that includes ” . . . a class=”button” href= . . .” and change “button” to be “button-blank” (with quotation marks).
  2. Slot the Highlight in the Academic Banner slot of the Generic (Page) item using the Callout template. It is generally slotted after the main page image.

Aligning Items

You can align paragraphs, divs, tables, images and other elements using CSS classes. Alignment options include left align, center align, and right align. You may align items using the following classes in ePhox code view:

Paragraphs

<p class="right">Right aligned paragraph.</p>

This is an example of a right aligned paragraph.

Images

<img src="test.jpg" class="center" />

Centered Image
Centered Image

Continue reading