Skip to main content
Skip to main content
Give      University of Florida

UF/IFAS Communications

UF/IFAS Communications

Graphics and Identity

The UF/IFAS Web Template

It is strongly recommended and preferred that UF/IFAS websites use the current UF/IFAS web template. The UF/IFAS template already meets web policy and accessibility standards and visually conveys affiliation with UF and IFAS. The template for UF/IFAS websites is available through the TERMINALFOUR (T4) Web Content Management System (WCMS) after gaining access. An overview of the UF/IFAS template can be found here. The template will dictate other parameters to promote consistency across our web presence. All UF/IFAS T4 templates are mobile-friendly. You can use 30 preloaded content pieces to build your website. Before customizing these preloaded content pieces be sure to review the AA accessibility standards information.

IFAS Web Services - Website Example Mandatory Features Snapshot Diagram

Header - Mandatory and persistent

UF/IFAS websites are required to include the following:

  • Header Background color - Hex#0021a5.
  • Header text color - Hex#ffffff.
  • Name of the unit under the UF/IFAS logo (in editable text). As an example, see The UF/IFAS homepage page at https://ifas.ufl.edu/. 
  • UF/IFAS logo on the left. UF/IFAS branding clearly visible in the upper left-hand area of your web page. The UF/IFAS logo should link to http://ifas.ufl.edu. (Remember that the UF/IFAS logo always needs to be surrounded on all sides by clear space that is no less than one-half the height of the “UF” monogram.) 
  • Header and style requirements are different for UF/IFAS Extension websites and are located in the UF/IFAS Branding Guidelines - Web or part of the UF/IFAS Extension web template.

IFAS Web Services - Website - Example -Unit Site Title Diagram

Footer - Mandatory and persistent

UF/IFAS websites are required to include the following:

  • Footer Background color - Hex#0021a5.
  • Footer text color - Hex#ffffff.
  • A way to contact persons responsible for web updates. This should be included in the footer.
  • Date of last revision. This is required on the homepage but recommended for all pages.
  • An active logo or text link to the UF homepage. Please add it to the footer.
  • An active logo or text link to the UF/IFAS homepage. 
  • Other footer requirements are located in the UF/IFAS Branding Guidelines - Web. These pages include a list and explanation of required privacy and other policy links in the footer.

Coding and Identity

UF/IFAS Favicon

The UF/IFAS favicon is mandatory for all UF/IFAS websites and is available at https://tinyurl.com/ifasfavicon.

Other coding requirements are located in the UF/IFAS Branding Guidelines - Web. These pages include an explanation of the required meta code to improve the findability and searchability of all UF/IFAS websites.

The UF/IFAS favicon is mandatory for all UF/IFAS websites and is available at https://tinyurl.com/ifasfavicon

 

Mandatory Colors and Use

Web Colors (Meet WCAG 2.0 AA guidelines)

Color RGB HEX WCAG  Recommended Use
Blue
(UF)		 0, 33, 165 #0021A5 Yes, on white or the reverse. IFAS header and footer color.
Orange
(Screen)		 250, 70, 22 #FA4616 No, do not use it unless the text is large. Acceptable on borders, or other graphical elements when on white or the reverse.
Gray (Body copy) 52, 55, 65 #343741 Yes, on white or the reverse.

*Color Notes: Large text is defined as 14 point (typically 18.66px, or 1.2em) and bold or larger, or 18 point (typically 24px, or 1.5em) or larger.

Colors to Promote Unit Individualization

Web Colors (Meet WCAG 2.0 AA guidelines)

Color RGB HEX Recommended Use For
Purple 106, 42, 96 #6A2A60 Yes, on white or the reverse.
Green
(BRIGHT)		 34, 136, 76 #22884C No, do not use it unless the text is *large. Acceptable on borders, or other graphical on white or the reverse.
Blue
(DARK)		 0, 38, 87 #002657 Yes, on white or the reverse. No, not for footers or headers.
Yellow (Alachua) 242, 169, 0 #CD8C00 No, do not use unless the text is *large and on Gray (#343741) or its reverse. Use on borders, or other graphical elements when on white or the reverse.
White 255, 255, 255 #FFFFFF Yes, on-page background color and other dark palette colors. 
Warm Gray 1 216, 212, 215 #D8D4D7 Yes, on Gray (#343741) or the reverse or other dark palette colors. For table rows/cells/site title and page backgrounds.
Gray 199, 201, 200 #C7C9C8 Yes, on Gray (#343741) or the reverse or other dark palette colors. For table rows/cells/site title and page backgrounds.

Other Colors

Some UF/IFAS initiatives have preexisting style guides. Generally, the UF/IFAS color guide should supersede preexisting style guides. Preexisting style guides should select the closest colors in the above UF/IFAS color palettes. For questions about integrating your style guide with UF/IFAS colors, contact webteam@ifas.ufl.edu.

Colors On Graphics

It is recommended that communication pieces on the web only feature our orange and blue colors and use other colors as accents. All graphics must meet accessibility requirements.

Web Fonts

To add official branding typefaces to websites, reach out to IFAS Web Services at webteam@ifas.ufl.edu. 

For adding official branding typefaces to images, visit the Fonts section to acquire or request licenses at https://brandcenter.ufl.edu/typography/.

UF/IFAS Web Template Styles

Most UF/IFAS styles are part of the UF/IFAS Template. This page will show the styles and demonstrate the appropriate hierarchy.

How To Use This Page: Review and use the code examples, but do not copy and paste them directly from this page.

Heading 1

TYPE CODE USE
HEADING 1 <h1></h1> Use to start major sections on our web page. 

Heading 2

TYPE CODE USE
HEADING 2 <h2></h2> Should precede a Heading 1. Since the site title is Heading 1,
Heading 2 can be used as the first heading on a web page.

Heading 3

TYPE CODE USE
HEADING 3 <h3></h3> Should precede a Heading 3

Heading 4

TYPE CODE USE
HEADING 4 <h4></h4> Should precede a Heading 4
Heading 5
TYPE CODE USE
HEADING 5 <h5></h5> Should precede a Heading 5
Heading 6
TYPE CODE USE
HEADING 6 <h6></h6> Should precede a Heading 6

Body Copy

TYPE CODE USE
BODY COPY OR BODY TEXT <p></p> You can bold, emphasize, or underline the body copy.

Links

Here is a standard link.

TYPE CODE USE
Standard Link <p><a href="#">Some Link</a>.
</p>		 It appears bold when active, and an underline is added on hover.

Buttons

The UF/IFAS Web Button Generator will help you make and use officially branded buttons. Go here to use the button generator: https://branding.ifas.ufl.edu/web-button-generator/.

List Styles

There are three list styles. You can use special CSS classes on list tags to change the look of bulleted lists (linked and unlinked).

  1. Numbered list. Numbered list linked.
TYPE CODE USE
UNORDERED LIST <ul><li></li></ul>

Regular circular bulleted list.
ORDERED LIST <ol><li></li></ol>  Numbered list.
UNORDERED LIST WITH ORANGE SQUARES <ul class="blue-arrow-list"><li></li></ul>  We know it says arrow list, but it will change the circular bullets to squares. To get the look, add class="blue-arrow-list" inside the opening <ul> tag. 

Table Stack

Creates a vertically stacked table on cellphones from your horizontal desktop table.

TYPE CODE USE
STACK <table class="stack"></table> MANDATORY FOR ALL TABLES FOR MOBILE VIEWING. 

Table Scroll

For large data tables where stack is not applicable, use the scroll function. Then, users have the ability to scroll large tables when viewing on a cellphone.

TYPE CODE USE
SCROLL <div class="table-scroll"><table></table></div> MANDATORY FOR ALL LARGE TABLES FOR MOBILE VIEWING. 

Basic Table Layout

Here is a basic table and you can use any of the styles above inside tables: Headings, lists, paragraphs, and links. 

Column 1 Column 2 Column 3
Row 1 Some text Some text
Row 2 Some text Some text

Special Classes

Use special CSS classes, on images, text, and sidebars.

Images

You can use special CSS classes on images, to float images left or right within a page. See how to float images.

Centering Text

You can use special CSS classes on some text and elements for centering.

TYPE CODE USE
CENTER <p class="text-center"></p>  Center text and buttons within blocks. Using this class is preferred over using the Center button on the T4 editor.

Blockquote

You can use special CSS classes on paragraphs to create blockquotes.

Here is a blockquote.
TYPE CODE USE
BLOCKQUOTE <blockquote></blockquote> Emphasize certain text.

Sidebars

There are three sidebar styles. For sidebars, we prefer that you use the following special CSS classes and add to blocks.

TYPE CODE USE
ADD A RIGHT-SIDEBAR <div class="gray-vertical-border"></div>

Adds a border for a right sidebar menu that contains large text.
ADD A RIGHT-SIDEBAR WITH SMALL TEXT <div class="gray-vertical-border" id="county-right-sidebar"></div> Adds a border for a right sidebar menu that contains small text.
ADD A LEFT-SIDEBAR <div class="gray-vertical-border2"></div> Adds a border for a left sidebar menu that contains large text.

Embeds

Social Feeds

It is preferable to use a LinkedIn embed, which is more stable across browsers. You can add LinkedIn embed code to any block.

Video

IFAS pages only track plays, pauses, and stops on video embeds. For videos, we prefer that you use one of two video content pieces you can automatically add to pages by clicking the green Create Content button. Then, you will NOT need to use the below embed code. The following special CSS classes will create a video embed that works on a mobile phone.

Add a UF/IFAS Branded cover photo to all video embeds, contact UF/IFAS Graphics or Video for details.

TYPE CODE USE
VIDEOS <div class="flex-video widescreen responsive-embed"><iframe src="https://www.youtube.com/embed/RDdbJxHYnKM" width="560" height="315"></iframe></div> Use content pieces to easily add videos to webpages. Or, embed this code in a block .

AA Accessibility Standards

The WCAG AA Accessibility standards explain how to make web content more accessible to people with disabilities. WCAG defines web content as what you see (text, images, and sounds) and do not see (code or markup that defines the structure, presentation, etc.). All UF/IFAS websites, web applications, and blogs must comply with University standards and meet at least AA accessibility standards.

UF/IFAS White Web Template In TERMINALFOUR (T4)

Our latest web template meets accessibility and performance requirements. We recognize that these scores are only one benchmark used to measure accessibility and performance. We are making improvements behind the scenes, so the performance score is not comprised as more content pieces are added to a page. 

Resources

Third-party Web Builders And Custom Code

Information on UF/IFAS web policies and practices is found at https://ics.ifas.ufl.edu/our-services/web-services/ and may easily be found by searching for UF IFAS Web Services in any browser.

It is critical that any IFAS faculty or staff member interested in creating, editing or revamping their website first contact the web team at webteam@ifas.ufl.edu to discuss the project. Making this contact at the initial stages of the project will save time, money and frustration of all involved.

If you are considering contracting with an outside vendor to work on your website, please first contact the web team. We request that any outside vendor meet with the web team and possibly with other members of IFAS Communications to learn about web and branding standards before embarking on a project. There are preferred design templates and requirements that should be followed.

Guidelines

Third-party web builders should adhere to the web standards provided as UF/IFAS Web Branding guidelines and as stated on the following page sections: graphics and identity, colors, web fonts, styles, and aa accessibility standards. These links provide enough flexibility to add individuality to the website you are building. There are no exceptions, and custom coding, styles, fonts, graphics, and standards not outlined here are not allowed.

Third-Party And Custom Code On UF/IFAS Websites

Effective immediately, any digital properties used to distribute university information on website templates or components cannot be altered in a way that misrepresents the UF/IFAS brand identity or violates the UF Accessibility Policy. The current (CMS) platform comes with content types that are up-to-date and thoroughly vetted to address potential web security breaches. UF/IFAS Web Services is responsible for managing and maintaining associated assets. Any custom third-party content added to UF/IFAS templates or websites must be updated and continuously maintained by website builders. Before adding custom code to any web page, website builders should contact UF/IFAS Web Services. Approval from UF/IFAS Web Services and Integrated Risk Management – Fastpath Solutions - https://irm.ufl.edu/fast-path-solutions/ is required before adding any third-party code to a UF/IFAS website.

Please be aware that web builders will need to monitor custom code for errors and compatibility as long as it is present on the platform. Please note that IFAS Web Services reserves the right to remove the code at any time and for any reason. Lastly, the web builder is responsible for any technical issues that arise from embedding unapproved code on a UF/IFAS digital property. IFAS Web Services is not responsible for supporting or troubleshooting custom code, nor for resolving any issues caused by custom code.