Styling Options in myUSF

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