Customizing your site

If your website isn’t exclusively affiliated with UW-Madison, you can use your own logo and change UW’s main red color (#C505C) to a different color that meets WCAG AA contrast standards on white (#FFFFF) text.

If you want to change or remove the UW crest logo, you must also change the UW red color. So, if one changes (color or logo), the other needs to change too. Customized websites need a unique logo and main color to show they’re different from other UW-Madison websites.

Customizing your site costs a flat fee of $255, requires University Marketing approval, and is subject to team member availability. Learn more by visiting WiscWeb’s Customization Policy.

Standard UW Theme site

A regular UW Theme site on WiscWeb, without any changes, uses UW’s main red color and the UW Crest logo. Although we think the UW Theme is excellent as it is, we recognize there might be situations where different branding is needed.

Before requesting customizations, explore existing alternatives in the UW Theme that allow you to personalize your site for free.

The UW Theme uses the UW Crest logo in the site header, and applies UW's primary red color for prominent design elements like the site title, lines above headers, and background colors for content sections.

Customization options

Change or remove the UW Crest logo

Websites can either replace the UW Crest logo in the top header area with a custom logo or choose to remove the logo entirely, leaving the space empty.

If the logo is changed or removed, sites are required to use a different color in place of UW’s main red to ensure the university’s brand is maintained.

Color requirements

The substitute color selected instead of UW red must not be a shade variation of red (darker, lighter, etc). Additionally, it should meet the WCAG AA contrast standards when used with white (#FFFFF) text.

The new color chosen will replace anywhere the UW red color is used. It’s not possible to change the color of some design elements and not others.

Logo guidelines

Okay logos

Logos can only be a graphic or symbol by itself, without any additional words. You can use logos that are just one letter, as long as they look like a designed graphic or icon. However, the letter W is not allowed.

Not okay logos

Logos with additional words (acronyms, titles, etc), purely text-based logos, or those crafted using the Departmental Logo Generator will not be approved. The use of more than one logo is also not allowed.

Size

Logos with a square ratio are recommended and can have a maximum width and height of 300px. Horizontal or wide logos can have a max width of 300px and a max height of 115px.

Logos cannot be too wide that they negatively impact the design of the header; this happens most often when paired with site titles and taglines that exceed 47 characters.

Logos at 80px by 80px will be very blurry, logos at 150px by 150px will be somewhat blurry, and logos at 300px by 300px will be the most clear for users

Resolution

For best visual results, use PNG files that have a transparent background. When saving the image, make sure it’s set at 72 pixels per inch or it will not be accepted.

The logo dimensions should be larger than 150 pixels and no larger than 300 pixels to make sure it does not look blurry when shown on desktop and mobile devices.

Logo display on mobile and desktop

Logos cannot be resized to make them appear bigger. Square logos (1:1 ratio) will display at roughly 40px wide on desktop and 64px wide on mobile. Logos with a wider ratio will display on mobile and desktop at about 125 pixels wide.

Homepage customization alternatives

Background image with logo

Create a custom background or hero image for your homepage that includes your logo. Background images can be added to one, two, and three column layouts for additional creative flexibility.

One column layout with logo

Add a one column layout to your homepage where you can showcase your logo, making it a primary focus for visitors. Use buttons and a brief description to engage users and introduce your organization.

One column section with a bright purple logo of a spaceship center aligned on the page, followed by two lines of content and two call-to-action buttons side-by-side. The primary button on the left is solid blue with white text, and the secondary button on the right is white with blue text and contains a blue outline.

Two-column layout with logo

Add a two-column layout with 50/50 width to your homepage, placing your logo on the left. Share a brief description of your group on the right and consider adding a button to prompt users to take action.

Two column section with a bright purple logo of a spaceship to the left, and three lines of content to the right followed by a blue call-to-action button.

Red outline of a question mark positioned within a red circle.

Get help

If you need more customization than what WiscWeb provides, the UW Theme may offer additional alternatives. We suggest setting up a meeting during Office Hours or exploring the theme’s Page Elements to discover what the UW Theme can do for you.

Request customizations

Follow the steps below to customize your site

The process can take several days to a few weeks, and there’s a flat fee of $255.

  1. Submit customization form: Complete the form to request changes for your sites.
  2. Approval: The request will be sent to WicWeb and University Marketing for approval.
  3. Queue and prioritization: If approved, your request is added to our customization queue, prioritized by urgency and submission date.
  4. Preview changes: Once done, we provide a preview link for you to review the customizations.
  5. Edits: If the changes don’t appear correct during preview, we allow one additional opportunity to change them before making the changes live.
  6. Go live 🎉: Give the green light, and we implement the changes on your live site.

What you’ll need

Before filling out the form, gather the required information.

  • Logo file (if replacing the UW Crest logo)
    • PNG is recommended over JPEG
    • SVG files are not supported
    • Must be exported at 72ppi
    • Needs to be wider than 150 pixels but should not go beyond 300 pixels in width
  • Hex color code (e.g. #2A397C)
  • DoIT Billing Number

Customization request form