51

Skip navigation
USM Home/Web Support/Style Guide

Style Guide

Page Content

Approved Color Palette

image

Note: Different colors (old carryovers) may be visible in the editing window. The old colors will be automatically stripped out upon saving and publishing the page.

Active Button Style Options

image

  • Choose the Regular Button option under Class in the Insert/Edit link window.

    image

  • Choose the Angle Inline option under Class in the Insert/Edit link window.

Images

  • Hero Banner – 1920 x 600

  • Side by Side Features/Two Column Split Snippet – 1080 x 720

  • Small Featured Grid Video/Photos – 360 x 240

  • Head Shots – 768 x 768

  • Sidebar Block – 1080 x 720

For best results on mobile viewing, the focal point should always be the center.

Remember to optimize images after they are edited to compress the file sizes. This will help your page load faster and the system does have max file size limits set for uploads. Optional examples of online image optimization tools:

Reminder – after uploading an image it must be published to be able to display.

Social Media Icons

An Asset for “Approved.Official USM Social Media Channels” has been configured and is available to add to any web page.

image

Recommended Contact Block Display Format

  • Unit Name (hyperlinked to home/index page)

  • Room Number/Building Name (physical address)

  • USM Mailing Address (118 College Dr. #0000 or alternate mailing address)

  • Optional Location Line – choose one of the following standard options:

    • Hattiesburg Campus

    • Gulf Park Campus

    • GCRL – Halstead

    • GCRL – Cedar Point

    • Stennis Space Center

    • Port of Gulfport

      Note: Complete map functionality is still being configured. The general “Campus Map” link will remain until specific building map links are ready to load. More information will be provided when direct map links are available.

Pages

  • When creating a new Page:

    • Separate words in the file name field with hyphens, which are preferred over the use of underscores for page URLs.

      • Reminder – file names are only lower case with no special characters or spaces.

    • Align page titles with file names (which create the page URLs), but only use substantive words in the file name structure. Example:

      • For a Page titled Center for Web Studies, the File Name should be web-studies, not center-for-web-studies.

      • For a Page titled Black and Gold, the File Name should be black- gold, not black-and-gold.

    • Use the word “and” instead of “&” in page titles and headings.

  • The following fields are scanned for Search purposes – ensure these are complete and accurate when reviewing existing pages (see Properties Parameters) and when creating new pages:

    • File Name (URL structure)

    • Page Title

    • Description

    • Keywords

    • Note: “Tags” are internal to OU only and are an organizational tool to group pages together. They are not utilized by search engines or the internal site search function.

  • Hero banners should use the site title as their text overlay.

    • Reminder – to edit Hero banner images, make sure your page is checked out and go to Properties -> Parameters.

  • Folders should only be used to store images, videos, or files and should follow this naming convention:

    • _images

    • _files

    • _videos

Program Pages

  • Program pages are aligned with official program data in the Bulletin. Bulletin content should not be duplicated on program pages and has been removed where possible. Please delete any duplicate content that still remains.

  • Additional detailed pages or files for required accreditation or compliance information should be housed in the respective School sites and can be linked from the program pages.

  • Contact blocks on program pages may be synced with the contact section on the School site. If you click “Edit Content” in the sidebar and a link to a widget file appears instead of an editable contact block, that means the section is synced.

    • In this case, to update contact information on a program page, you will need to update and publish the _site-sidebar file in the School site.

    • If you need to have different contact information on the program page, email web@usm.edu and we will set up a new contact section for you.

    • Minors and Certificates

      • Location information for minors and certificates was not available. If you want location information added, email your request to web@usm.edu.

      • Some stand-alone minors and certificates have not been added because there was not a parent program page. If you have a minor or certificate you want added to a specific program page, email your request to web@usm.edu.

        • Minors or certificates that apply to more than one subject area can be added to more than one page if you want to recruit to different student interests. Example - History and Music History Minor appears on the page for History and the page for Music.

        • Minors or certificates for a specific school can also be grouped on an interdisciplinary landing page by request to webFREEMississippi.

       

Profiles

  • Use the Manual Profile List Snippet and the New Manual Profile Page template to create listing pages (snippet) and profile pages (template) where necessary for dean's/director's offices and other staff who many need to be represented. The Snippet and Profile template will match what has been implemented for the Faculty Directory and will eliminate the old Drupal table format for staff/office lists.

  • If you add someone to a dean's or director's office list, and that person already has a Digital Measures profile page in the Faculty Directory (/faculty-directory/), link to the DM Profile page instead of creating a manual Profile page.

  • When your list pages are ready, they should be linked from your “People” navigation menu option. If you need help with this, submit a Content Editor Help Request.