Web Style Guide

Web FAQ & Tips

 

Website Editing FAQ

Answers to common topics about editing the website.

Helpful OU Tools

Global Search  - Magnifying glass icon in top right corner 

  • Find pages across the entire site
  • The Filter only searches names of folders

Support  - Question mark icon in top right corner 

  • Search common questions about how to use OU
  • Quickest way to find answers, especially when web team is not available

Gadgets - Plug icon hanging off the top right corner

  • Quick tools to give you information on your pages and content
  • Bookmarks - save pages you edit frequently.
  • Page Analytics - find out how much traffic your page is getting.
  • Link Check - quickly check for broken links on your page.
  • URL Shortener - useful to clean up frighteningly complicated web addresses. This can help solve problems that OmniUpdate has with any URL that includes a question mark. (This is a known issue with OU - mostly with YouTube or Zoom links.)
  • Dependency Tag Info - search and find the "Dependency Tag" for any file or page on the site, and find out if it's being used. Page Info will do the same, but only for the page you are on.

Web Tips

Side Navigation

  • Edit _nav.inc file
  • To add a sublist (intent) item, go to the code and change the <li> tag to <li class="sub-sub-nav"> 
  • To hide a list item, go to the code and change the <li> tag to <li class="ou-no-subnav">.
  • You can't add more than one class to the "<li>" tags. So either one or the other.  
  • You can add the "sub-sub-nav" class to the anchor tag if you need to both hide a sub-navigation, and indent the link.
  • Be careful. Longer side navigation links will do weird things with text wrapping. 

Tables  

  • Avoid tables where possible. Otherwise, you need to code it for accessibility and mobile-friendly design.
  • If you must, use the "Table with default settings" Snippet. It places a table with the the code below to make sure there are labels to correspond with the data. Italicized <th> tag can be customized. 

<table class="default-table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Office, Phone</th>
</tr>
</thead>

Contact

If you need help, submit Web Request.