---
title: Custom images and colors utilization guide for visual themes
description: Learn how to customize your Centercode site's appearance with colors and images. Control everything from the menu bar to background colors.
---

[Skip to content](https://learn2.centercode.com/en/custom-images-and-colors-utilization-guide#main-content)

English

Show submenu for translations

[Report an Issue](https://learn2.centercode.com/en/kb-tickets/new?hsLang=en) [Customer portal](https://help.centercode.com/admin-portal?hsLang=en)

![New\_Centercode\_Logo.png\]](https://learn2.centercode.com/hs-fs/hubfs/New_Centercode_Logo.png?height=35&name=New_Centercode_Logo.png)

- [Centercode Blog](https://www.centercode.com/blog)

Open main navigation

Close main navigation

- [Centercode Blog](https://www.centercode.com/blog)
- English
  
  Show submenu for translations
- [Report an Issue](https://learn2.centercode.com/en/kb-tickets/new)
- [Customer portal](https://help.centercode.com/admin-portal)
- Starter & Delta Edition Help

 Starter & Delta Edition Help

 How can we help?

- There are no suggestions because the search field is empty.

1. [Legacy Help Center](https://learn2.centercode.com/en?hsLang=en)
2. [Community Administration](https://learn2.centercode.com/en/community-administration?hsLang=en)
3. [Community Administration](https://learn2.centercode.com/en/community-administration?hsLang=en#community-administration)

# Custom images and colors utilization guide for visual themes

This article applies to **All** editions.

Knowing which color to use, and where, goes a long way towards creating a professional site that is visually appealing. Here's a quick rundown of the Visual Theme custom image and color settings, as well as examples of the more prominent places they'll appear on your site. 

### Selecting your site theme colors

When you're creating or modifying a Visual Theme, you’ll see a section header titled “Select your site theme colors” Within this section, there is an upload window for your community logo, as well as five different color selection options.

- **Logo**Appears within the top bar of the top left of each page ([Example](https://centercode.gyazo.com/96ebe2ad4f132ac4c702870c2a2c73eb))
- **Menu bar - Background**Changes the background color of the navigation bar, its dropdown menus, and flyout menus ([Example)](https://centercode.gyazo.com/89d1aa214312d6bb7921464bedfe6246)
- **Menu bar - Accent**Changes the color of the carets used to indicate dropdown menus ([Example](https://centercode.gyazo.com/da3ad73857744830111b5f57723177bb))
- **General - Text link**Changes the color of links located within pieces of content and forms (Does NOT include feedback ticket title links) ([Example](https://centercode.gyazo.com/b0fc11cf029f79a853da6d4048427301))
- **General - Primary brand accent**Changes the color of most buttons throughout the site (with a few exceptions controlled by other color selections) ([Example](https://centercode.gyazo.com/7f50b3c5ab0494e6b00180deef889ef2))
- **General - Secondary brand accent**Changes the color of buttons that appear within forms and as alternate choices located near primary buttons, as well as table headings ([Example](https://centercode.gyazo.com/0f37ac1c977ff800c26744975c33e5ba))

### Choose a page background

This section allows you to choose the background color or image that will be seen behind all of your internal (after users have logged in) pages, as well as the text and link colors in the background section of the site. The preview window will show you an example of how these color/image and text choices combined will appear on your live site.

- **Background image**Appears behind each page for logged in desktop users ([Example](https://centercode.gyazo.com/733d7405e7e5dd167bf614f71ccb8cbb))
- **Background - Background/tint**Changes the color of the site background (will not be visible if using an Inner Background image) ([Example](https://centercode.gyazo.com/6ccf4cf1c9e94ecd37716e9ca1fe0236))
- **Background - Text**Changes the color of text used within the background section of the site ([Example](https://centercode.gyazo.com/3826e16bfea17aa7978ed986f12a4408))
- **Background - Text link**Changes the color of link text used within the background section of the site ([Example](https://centercode.gyazo.com/787f4881952b14f51ea1936018728abe))

### Customize your sign-in and landing pages

This section allows you to choose the background color or image that will be seen behind all of your external (before users have logged in) pages, as well as the text and link colors in the background section of those pages. The preview window will show you an example of how these color/image and text choices combined will appear on your live site.

- **Background image**Appears behind each external landing/login page for desktop users ([Example](https://centercode.gyazo.com/733d7405e7e5dd167bf614f71ccb8cbb))
- **Background - Background/tint**Changes the color of your external landing/login page background (will not be visible if using an Inner Background image) ([Example](https://centercode.gyazo.com/6ccf4cf1c9e94ecd37716e9ca1fe0236))
- **Background - Text**Changes the color of text used within the background section of your landing/login pages ([Example](https://centercode.gyazo.com/3826e16bfea17aa7978ed986f12a4408))
- **Background - Text link**Changes the color of link text used within the background section of your landing/login pages ([Example](https://centercode.gyazo.com/787f4881952b14f51ea1936018728abe))

### Customize your site details

This section contains a few different extra options to further customize the look of your site, including the custom colors used in reports, report logo images, and the favicon that will be used by your site.

- **Custom colors**Custom colors allow you leverage your brand colors throughout the site, including WYSIWYG editors, reports, and dashboards. Updating these colors will be automatically reflected in these areas ([Example](https://centercode.gyazo.com/f37b6a1cfb1f4edee1a594e1335a238b))
- **Email and PDF logo**Appears within system generated emails and exported PDF reports (I.e Recruiting invitations, etc) ([Example](https://centercode.gyazo.com/afe673a38909d35000ff396eb35a90cb))
- **Favicon**The small image that appears in the browser bar and bookmarks ([Example](https://centercode.gyazo.com/ad15af58dedba9d44a3b9c9f15b1f47c))

### Custom CSS

**CSS** is the language used to style an HTML document or website. **CSS** describes how HTML elements should be displayed. Through the use of custom CSS you can completely control nearly every facet of how colors are used within your site. Here are a few examples of how you can use custom CSS to customize aspects of your site. Simply insert the hexcode for the color you wish to use in place of #FF0000 in the example:

**Table heading**

![](https://t.gyazo.com/teams/centercode/18b8dd0dd924a80a08ed48ad9c780cbb.png)

Normally this section would use your secondary brand accent color. Here is how you would manually define a table heading color via CSS:

```
.listouter .rowgrouphdr {background-color: #FF0000 !important;}
```

**Landing page login section**

**![](https://t.gyazo.com/teams/centercode/0ddf3ec8bccafc0a9b1cd9f243ebd87f.png)**

Normally this section would use your secondary brand accent accent. Here is how you would manually define a secondary landing/login page color via CSS:

```
.section-bar.section-bar--cta {background-color: #FF0000 !important;}
```

**Landing page login button**

![](https://t.gyazo.com/teams/centercode/3d79a4d7580f287bc7bfba3e14c64383.png)

This is the button that appears on your login page. Normally it uses a version of your secondary brand accent, just like the landing page login above. Use this CSS to change the button text color:

```
.section.section-bar--cta.section-bar--cta-colors-inverted .bttn {  color: #FF0000 !important;}
```

**Note:** While Centercode will allow the use of custom CSS they essentially override the Centercode recommended and supported Visual Theme and site design settings and is done at your own risk. As such, we cannot officially support or assist with any changes made via custom CSS that may break between updates.

### Additional Resources

- For general Visual Theme information, example templates, and additional resources click [Here](https://help.centercode.com/en/what-are-visual-themes-what-can-i-do-with-them?hsLang=en)
- For information on how to access and edit visual themes click [Here](https://help.centercode.com/en/how-do-i-create-or-edit-a-visual-theme?hsLang=en)

- [Customer Training & Centercode Basics](https://learn2.centercode.com/en/customer-training-centercode-basics?hsLang=en#main-content)

    - [Customer Video Training](https://learn2.centercode.com/en/customer-training-centercode-basics?hsLang=en#customer-video-training)
    - [Centercode FAQs](https://learn2.centercode.com/en/customer-training-centercode-basics?hsLang=en#centercode-faqs)
    - [Centercode Basics](https://learn2.centercode.com/en/customer-training-centercode-basics?hsLang=en#centercode-basics)
- [Community Administration](https://learn2.centercode.com/en/community-administration?hsLang=en#main-content)

    - [Initial Configuration](https://learn2.centercode.com/en/community-administration?hsLang=en#initial-configuration)
    - [Community Administration](https://learn2.centercode.com/en/community-administration?hsLang=en#community-administration)
- [Project Setup & Administration](https://learn2.centercode.com/en/project-setup-administration?hsLang=en#main-content)

    - [Project Creation](https://learn2.centercode.com/en/project-setup-administration?hsLang=en#project-creation)
    - [Recruiting](https://learn2.centercode.com/en/project-setup-administration?hsLang=en#recruiting)
    - [Project Administration](https://learn2.centercode.com/en/project-setup-administration?hsLang=en#project-administration)
    - [Macros and Automation](https://learn2.centercode.com/en/project-setup-administration?hsLang=en#macros-and-automation)
- [User Management](https://learn2.centercode.com/en/user-management?hsLang=en#main-content)

    - [Surveys](https://learn2.centercode.com/en/user-management?hsLang=en#surveys)
    - [Content & Resources](https://learn2.centercode.com/en/user-management?hsLang=en#content-resources)
    - [Tester & User Management](https://learn2.centercode.com/en/user-management?hsLang=en#tester-user-management)
- [Feedback Management](https://learn2.centercode.com/en/feedback-management?hsLang=en#main-content)

    - [Feedback Collection](https://learn2.centercode.com/en/feedback-management?hsLang=en#feedback-collection)
    - [Feedback Triage & Moderation](https://learn2.centercode.com/en/feedback-management?hsLang=en#feedback-triage-moderation)
- [Reporting](https://learn2.centercode.com/en/reporting?hsLang=en#main-content)

    - [Delta Dashboards](https://learn2.centercode.com/en/reporting?hsLang=en#delta-dashboards)
    - [Custom Reports](https://learn2.centercode.com/en/reporting?hsLang=en#custom-reports)
- [Enhanced Integrations & APIs](https://learn2.centercode.com/en/enhanced-integrations-apis?hsLang=en#main-content)

    - [Integration Center Endpoints](https://learn2.centercode.com/en/enhanced-integrations-apis?hsLang=en#integration-center-endpoints)
    - [Single Sign-On Integrations](https://learn2.centercode.com/en/enhanced-integrations-apis?hsLang=en#single-sign-on-integrations)
    - [Centercode Guides to Simple API Integrations](https://learn2.centercode.com/en/enhanced-integrations-apis?hsLang=en#centercode-guides-to-simple-api-integrations)
    - [Centercode Guides to Endpoint Specific Systems](https://learn2.centercode.com/en/enhanced-integrations-apis?hsLang=en#centercode-guides-to-endpoint-specific-systems)
    - [Enhanced Integrations Troubleshooting](https://learn2.centercode.com/en/enhanced-integrations-apis?hsLang=en#enhanced-integrations-troubleshooting)
- [Troubleshooting & Miscellaneous](https://learn2.centercode.com/en/troubleshooting-miscellaneous?hsLang=en)
- [Announcements and Releases](https://learn2.centercode.com/en/announcements-and-releases?hsLang=en#main-content)

    - [C17 - The Delta Release](https://learn2.centercode.com/en/announcements-and-releases?hsLang=en#c17-the-delta-release)
    - [Centercode's GoEarly Program](https://learn2.centercode.com/en/announcements-and-releases?hsLang=en#centercodes-goearly-program)
    - [Update Archive](https://learn2.centercode.com/en/announcements-and-releases?hsLang=en#update-archive)

- [Centercode Blog](https://www.centercode.com/blog)

[![Chill listening crop-3](https://learn2.centercode.com/hs-fs/hubfs/Centercode_Logo_Icon_M.png?width=48&height=48&name=Centercode_Logo_Icon_M.png "Chill listening crop-3")](https://help.centercode.com?hsLang=en)

Centercode Help Center

Copyright © 2026, Centercode