Virginia Tech®home

Ut Prosim Stripe

Example of the Ut Prosim stripe from vt.edu

The Ut Prosim stripe widget is a brief, supplemental information area. It is designed to be used directly underneath an embedded Call to Action component on a home page.

User level: basic

1. Open your home page
Home page in edit mode.

2. Under the featured component area, place a container component.

Container component dragged from components panel to the drop zone.

3. Open the container component’s properties by clicking the wrench icon.

4. In the CSS Class field, enter “vt-utProsim.”

Container component properties window. Title and Options tab is active. CSS class form field is filled.

5. Click the Full Browser Width checkbox.

Container component properties window. Title and Options tab is active. Full Browser Width checkbox is checked.

6. Click the Common CSS Properties tab.

7. Enter these properties in these fields:

  • Color: white
  • Padding: 5em 2em 5em 2em
  • Background-color: #75787B
Container component properties window. Common CSS Properties tab is active. Color, Padding, and Background-Color form fields are filled.

8. Click the checkmark icon to save the properties.

9. Place a text component inside the container.

Text component dragged from the components panel to the container component's drop zone.

10. Open the text component’s properties by clicking the wrench icon.

11. In the CSS Class field, enter “gineso text-uppercase vt-utProsim-intro.”

Text component properties window. CSS class form field is filled.

12. Click the pencil icon to edit the text component’s content.

13. Type the text.

14. Highlight and center the text by using the alignment controls.

Text component in edit mode. Text "Our Motto" is typed in the text component.

15. Click the checkmark icon to save the text.

16. Place a text component inside the container, underneath the first one.

A second text component has been dragged from the component panel underneath the first text component.

17. Open the text component’s properties by clicking the wrench icon.

18. In the CSS Class field, enter “text-uppercase suppress-margin crimson vt-utProsim-motto.”

Text component properties window. CSS class form field is filled.

19. Click the checkmark icon to save the properties.

20. Click the pencil icon to edit the text component’s content.

21. Type the text.

22. Highlight and center the text by using the alignment controls.

  • (optional) Format the text as you choose by using the formatting controls.

23. Click the checkmark icon to save the text.

Finished Ut Prosim stripe widget.