Styling Options in myUSF

Box Styles

1. Select Columns Equal from Paragraphs Dropdown
2. Within the Column Content Dropdown, Select "Add Box Style"
3. Input an optional heading and subheading for the box
4. Input text into the body text are
5. Add an optional link to make this box a link
6. Add an optional image
   • If the image does not require alt text, input "" into the required alt text field.
7. Select a color from the dropdown
8. Input a height (200 is recommended). This will allow you to ensure all boxes in the same row are of equal height

Adding a Button

To add buttons with different styling, you can follow these steps:

1. Create a "Simple" block while editing a page
2. Add some Text Content that you would like to be the text of the button
3. Highlight that text and select the "Link" icon to add a link to the content you would like to link out to (PDFs, other pages, etc.)
4. Highlight that text again and select the "Styles" dropdown  
5. Select the "Button" Option
6. To change the color of the button, first click "Source"
7. Then find the part of the code that says "button" followed by a color. i.e. <p><a class="button green" href="https://myusf.usfca.edu/">Link Text</a></p>
8. Change "green" to whatever color you'd like. Available options include: olive, turquoise, plum, orange, terra_cotta, and blue

Adding a Callout

1. Create a "Simple" block while editing a page
2. Add some Text Content that you would like to be the text of the button
3. Highlight that text and select the "Styles" dropdown
4. Select the "Callout" option
5. To change the color of the button, first click "Source"
6. Then find the part of the code that says "callout"
7. Within the quotation marks that contain callout, add a space, followed by the color you would like the callout to be.  i.e. <p class="callout green">Callout Text</p>
8. Available options include: olive, turquoise, plum, orange, terra_cotta, and blue

Adding a Diamond Link

1. Create a "Simple" block while editing a page
2. Add some Text Content that you would like to be the text of the diamond link
3. Highlight that text and select the "Styles" dropdown
4. Select one of the "Diamond Link" options

Adding a Contact Box

1. Go to the Add Content page.
2. Create a Contact Box.
   1. Make sure to fill out the main Title field with something unique (i.e. put "OMC - Contact Box" and not just "Contact Box").
   2. Fill out all the remaining needed fields.
   3. Save.
3. Edit the page that you want to add the Contact Box to.
4. Scroll to the end, open the "add" dropdown, and select "Add Contact Box."
5. Type in the main title of your Contact Box and click it when it pops up.
6. Save the page.

Adding an In Content Promo Box

1. Go to the Add Content page.
2. Create a Promo Box.
   1. Make sure to fill out the main Title field with something unique (i.e. put "OMC - Contact Box" and not just "Contact Box").
   2. Fill out the remaining fields based on what you want the callout box to look like. Image, Body, and the Call to Action URL are all optional fields that you can use based on your needs.
   3. Save.
3. Edit the page that you want to add the Promo Box to.
4. Scroll to the end, open the "add" dropdown, and select "Add In Content Promo Box with Rich Text."
5. Type in the main title of your Promo Box into the In Content Promo Box field and click it when it pops up.
6. Add in the text content that you want to wrap around the Promo Box.
7. Choose whether you want it to be on the left or right side of the content area.
8. Save the page.