Search

Information


Snippets

UI Elements

Home  >  OU Campus Self-Help  >  Snippets  >  UI Elements

To use the UI Elements snippets, select the UI Elements category in the Snippets window.
category UI Elements

There are currently five types of UI Element snippets. Click the link below or keep scrolling down to find more information on these snippets.


Image with Caption

Editing an Image with Caption SNippet

edit img
Select image inside the snippet and then click the Insert/Edit Image icon from the WYSIWYG toolbar

edit img
Enter the image URL in the Image URL field in the Insert/Edit Image window. Add an image description, then click Update

edit img
Click the Save icon in the WYSIWYG toolbar. 

TYPES OF Image with Caption Snippets

Center Aligned

add an image description
caption for image goes here.

Left Aligned

add an image description
caption for image goes here.

 

 

 

 

 

 

 Right Aligned

add an image description
caption for image goes here.

 

 

 

 

 

 


Columns

EDITING A Column SNippet

edit columns

caption for image goes here.

edit column

edit columns

caption for image goes here.

Types of Column Snippets

Five Equal Columns

First Column

One two three four five six seven eight Sclemeel schlemazel hasenfeffer incorporated. The movie star the professor and Mary Ann here on Gilligans Isle. Goodbye gray sky hello blue. There's nothing can hold me when I hold you. Feels so right it cant be wrong.

Second Column

Fleeing from the Cylon tyranny the last Battlestar – Galactica - leads a rag-tag fugitive fleet on a lonely quest - a shining planet known as Earth. They call him Flipper Flipper faster than lightning. No one you see is smarter than he.

Third Column

In a freak mishap Ranger 3 and its pilot Captain William Buck Rogers are blown out of their trajectory into an orbit which freezes his life support systems and returns Buck Rogers to Earth five-hundred years later.

Fourth Column

Movin' on up to the east side. We finally got a piece of the pie. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour?

Fifth Column

Wouldn't you like to get away? Sometimes you want to go where everybody knows your name. And they're always glad you came. Just sit right back and you'll hear a tale a tale of a fateful trip that started from this tropic port aboard this tiny ship.

Four Equal Columns

First Column

One two three four five six seven eight Sclemeel schlemazel hasenfeffer incorporated. Goodbye gray sky hello blue. There's nothing can hold me when I hold you. Feels so right it cant be wrong.

Second Column

Fleeing from the Cylon tyranny the last Battlestar – Galactica - leads a rag-tag fugitive fleet on a lonely quest - a shining planet known as Earth. They call him Flipper Flipper faster than lightning. No one you see is smarter than he.

Third Column

In a freak mishap Ranger 3 and its pilot Captain William Buck Rogers are blown out of their trajectory into an orbit which freezes his life support systems and returns Buck Rogers to Earth five-hundred years later.

Fourth Column

Movin' on up to the east side. We finally got a piece of the pie. The mate was a mighty sailin' man the Skipper brave and sure. Five passengers set sail that day for a three hour tour a three hour tour?

Three Equal Columns

Two Equal Columns

First Column

One two three four five six seven eight Sclemeel schlemazel hasenfeffer incorporated. The movie star the professor and Mary Ann here on Gilligans Isle. Goodbye gray sky hello blue. There's nothing can hold me when I hold you. Feels so right it cant be wrong. Rockin' and rollin' all week long. Just two good ol' boys Never meanin' no harm.

Second Column

Fleeing from the Cylon tyranny the last Battlestar – Galactica - leads a rag-tag fugitive fleet on a lonely quest - a shining planet known as Earth. They call him Flipper Flipper faster than lightning. No one you see is smarter than he.: The first mate and his Skipper too will do their very best to make the others comfortable in their tropic island nest.


Tables

EDITING A Table SNippet

replace text with image
Highlight the text that says "Replace this text with image," then click the Insert/Edit Image icon in the WYSIWYG toolbar.
 
enter image URL
The Insert/Edit Image window will appear on your screen. Enter your image's URL in the Image URL field, and enter a description in the Image Description field. Click Insert.

add an image description
The image is now displaying.

change text
Change the text in the second row.

 

To add or remove columns and rows from a snippet table, use the tools found on the third row of the WYSIWYG Toolbar.
toolbar third rowFor an explanation on each of the tools used for tables, check out our overview of Table Tools.

TYPES OF Table SNippets

Course Listing Table

Semester-by-Semester Course Registration
[Year (Freshmen, Sophomore, etc)]
Fall Spring
Course Number Course Name Credits Course Number Course Name Credits
Engl 101 English 4 Engl 102 Intro to Literature 4
Math 101 Algebra 4 Math 102 Trigonometry 4
Phys 101 Physics 3 Phys 102 Astronomical Physics 3
Art 101 Foundations of Art 3 Art 102 Art Appreciation 3
Bio101 Biology 3 Bio102 Molecular Biology 3
Bio 101 L Biology Lab 1 Bio 102 L Molecular Biology Lab 1
  18   18

Tuition Table

Tuitions and fees for Undergraduates 2014-2015
On-Campus Off-Campus
  Cost for Year   Cost for Year
Tuition $24,000 Tuition $24,000
Fees* $1,590 Fees* $1,590
Books $1,200 Books $1,200
Room & Board $1,200 Rooms $0
*Fees listed do not include the laptop fee
Total $38,516 Total $27,090

Profile-Bio Layout

Use this snippet when creating a profile or biography web page. Upon inserting the snippet, you will notice a two column table, the left column reserved for a thumnail image (150 pixel width maximum, please), and the right column reserved for text content.

Replace this text with image

Name or Title: Fleeing from the Cylon tyranny the last Battlestar – Galactica - leads a rag-tag fugitive fleet on a lonely quest - a shining planet known as Earth. They call him Flipper Flipper faster than lightning. No one you see is smarter than he.: The first mate and his Skipper too will do their very best to make the others comfortable in their tropic island nest.


Panels

EDITING A Panel Snippet

Change Text

change text

Change the text "Heading Goes Here" in the the first row of the first column called Teaser on the right.

change text
enter text

Change the text  in the the first row of the second column called Content on the left.

preview
Preview the edited content after clicking the Save icon in the WYSIWYG toolbar. 

TYPES OF Panel SNippets

Tabbed Panel

  • Heading 1

    Makin' your way in the world today takes everything you've got. Takin' a break from all your worries sure would help a lot.

  • Heading 2
  • Heading 3

Accordion Panel

  • Heading Goes Here

    Makin' your way in the world today takes everything you've got. Takin' a break from all your worries sure would help a lot.

  • New Heading Goes Here

    Knight Rider: A shadowy flight into the dangerous world of a man who does not exist.

    These Happy Days are yours and mine Happy Days. Were gonna do it. Give us any chance well take it. Give us any rule we'll break it. We're gonna make our dreams come true.

  • New Heading Goes Here

    In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground!

    They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family.


Box

EDITING A Box Snippet

change text

change text

Change the text in the text box.

preview alert box
Preview of the edited Alert Box

TYPES OF Box SNippets

Yellow Box

Come and knock on our door. We've been waiting for you. Where the kisses are hers and hers and his. Three's company too.

In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground.

Grey Box

Come and knock on our door. We've been waiting for you. Where the kisses are hers and hers and his. Three's company too.

In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground.

Blue Box

Come and knock on our door. We've been waiting for you. Where the kisses are hers and hers and his. Three's company too.

In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground.

Green Box

Come and knock on our door. We've been waiting for you. Where the kisses are hers and hers and his. Three's company too.

In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground.

Teal Box

Come and knock on our door. We've been waiting for you. Where the kisses are hers and hers and his. Three's company too.

In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground.

Red Box

Come and knock on our door. We've been waiting for you. Where the kisses are hers and hers and his. Three's company too.

In 1972 a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground.