Colors, Links, Buttons, Backgrounds

Item Details
.btn-um white text, um-blue bg and border, hover lighter blue: my button
.bg-um-gray a light gray background:
.white makes background white. used with <hr> tags sometimes
.btn-um-orange white text, with #cc6600 background and borders, hover darker orange: my button
.text-um-red this is text color red
.text-um-orange this is text color orange
.text-um-blue-light this is text color light blue
.text-um-blue-dark this is text color dark blue
.text-um-gold this is text color gold
.text-black this is text color black
.blue-fill usually used to ensure an icon gets the right color (if they're SVGs - like from iconzilla)

Google Integrations

Item Details
Embedding Google Sheet Allows faculty/staff to manage simple Google sheet content that is placed inline with other content on the site.
  1. Ensure the client's Google Sheet is set for public and shared with you
  2. Go to https://awesome-table.com
  3. Select "Create a new view" and then "Select a spreadsheet" (you may need to click it multiple times to authenticate with Google if your session isn't already linked up.)
  4. Shows list of Google Sheets you can access (note: this doesn't mean they're public)
  5. Select the spreadsheet you want. Then select the individual sheet in that spreadsheet you want.
  6. Click "Create"
  7. In resulting page, Click Share Icon   , choose "Embed", and copy the iFrame line of code.
  8. Place that code where you want the table embedded (use with Bootstrap modals is our default approach on this site - but other uses are fine where needed)

Slide-in Menus

Item Details
Create a non-linking divider for grouping links Insert a text divider in any slide-in menu for grouping links.
  1. Go to Structure>Menus>[select the menu you want]
  2. Click "Add Link"
  3. Link (field): route:<nolink>
  4. Menu link title (field): whatever divider text you want
  5. Open "Attributes" accordion
  6. In "Class," add "menu-divider" (just the class name, no period in front)
  7. Save new link - and - drag to preferred location in menu links list

Showing / Hiding Content

Item Details
.hide-on-node-view hides any item from the actual page view. useful when some content is only for the benefit of views pages/blocks. example: the first simple paragraph entry for each lab page is the customized html for the labs overview page. we hide it on the actual lab page with this class.

method: span tags around button text with class 'toggle-text' and a data-toggle-message attribute for the secondary message when item is opened.

here is some expanded text

Default Blue Accordion

some content here

Orange Accordion

Some content here

Embedding Lists of Content

Item Details

DIRECTORY views (for embedding)

Does not include default master directory pages. Only tools for embedding lists in other content.
Contacts Table 3 columns: name, phone, email
embed code here
Basic 1 per row
Full 1 per row		 (no portrait), name, title, contact info
embed code here
Basic 3 per row
Full 3 per row		 (no portrait), name, title, contact info
embed code here
Forced Order - Basic 1
CONTENT views
By Department and Category