Styling Options in myUSF

Multicolored or Hairline Border Boxes

  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
    1. 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

Please Note: This can also be as a sidebar callout. Please contact Web Services at webservices@usfca.edu for a consult.

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