# Design

*Article Topics:* [*Design*](/getting-started/common-topics/design.md)*,* [*Themes*](/getting-started/common-topics/themes.md)*,* [*Customization*](/getting-started/common-topics/customization.md)

The Design section of a Theme's Menu contains settings for changing the color of common elements within a Theme.

<figure><img src="/files/n8KJV5EOhf2RdrjHeGjP" alt=""><figcaption></figcaption></figure>

Selecting the field of a setting brings up the color picker, where you can use sliders, enter RGBA values, or enter hex values to select your ideal color.&#x20;

<figure><img src="/files/UUoMOnRYhYM7tzrfCv5t" alt=""><figcaption></figcaption></figure>

## General

The **General** section provides a place for you to insert CSS Classes and IDs that have been defined in the [Custom CSS](/content-management/member-areas-and-tours/themes.md#custom-css) section of a theme.

* **Body ID -** The ID of a Custom CSS you have designated.
* **Body Class -** The Class of a Custom CSS you have designated.
* **Favicon URL -** The URL of the icon that appears in browser tabs (your favicon).

## Base Theme Colors

Base Theme colors control the most high-level parts of your site's design.

{% hint style="info" %}
**Please Note:** While these settings are useful for quickly determining the color of many important elements in your theme, these settings can be overridden by more specific settings later on this page. For example, setting the **Page Text Color** to white, but setting the **Card Text Color** to blue will override the Page Text Color setting anywhere there is a Card. This affords you more flexibility with your design.&#x20;
{% endhint %}

<figure><img src="/files/tZZ7V8zoExmLZlC1JjFO" alt=""><figcaption></figcaption></figure>

* **Theme Color -** Determines the primary color of buttons and links.
* **Page Background -** Determines the background color of all pages within the theme.&#x20;
* **Page Text Color -** Determines the text color that appears in the theme.
* **Focus Background -** Determines the color of objects such as cards and navigation bars.&#x20;
* **Focus Text Color -** Determines the color of certain text, such as time stamps, dates, and links in navigation bars.&#x20;

## Links

The following settings change the color of links and override the settings found in the Base Theme Colors section.

* **Link Color -** Determines the color of links.
* **Link Color(on hover) -** Determines the color of links when they are hovered over.
* **Link Color(on active) -** Determines the color of links when clicked.

## Navigation

These settings define the colors that appear on Navigation Elements like the [Navigation Bar Block ](/content-management/member-areas-and-tours/themes/block-types/navigation-bar-block.md)and the [Navigation List Block](/content-management/member-areas-and-tours/themes/block-types/navigation-list-block.md).

* **Navigation Background -** Determines the color of the background of a Navigation Bar Block or Navigation List Block.
* **Navigation Text Color -** Determines the color of the text that appears on the Navigation Bar and Navigation List Blocks.
  \\

## Pagination

* **Link Background -** Determines the color of the background of a pagination button when there is a link.&#x20;
* **Link Text Color -** Determines the color of the text of a pagination button when there is a link.
* **Link Border Color -** Determines the color of the border of a pagination button when there is a link.
* **Disabled Link Background -**&#x44;etermines the color of the background of a pagination button with no active link.
* **Disabled Link Text Color -** Determines the color of the text of a pagination button with no active link.
* **Disabled Link Border Color -** Determines the color of the border of a pagination button with no active link.
* **Active Link Background -** Determines the color of the background of the currently selected/active pagination link.
* **Active Link Text Color -** Determines the color of the text of the currently selected/active pagination link.
* **Active Link Border Color -** Determines the color of the border of the currently selected/active pagination link.

## Cards

These settings define the colors that appear on cards, which are individual Sets in Set Lists, or Models and Metadata in [Model Lists](/content-management/member-areas-and-tours/themes/block-types/model-list-block.md) and [Metadata Lists](/content-management/member-areas-and-tours/themes/block-types/metadata-list-block.md). These settings will also override the base theme colors.

* **Card Background -** Determines the background color for the card.
* **Card Text Color -** Determines the color of text on the card. Overridden by Sub-text Text Color.
* **Sub-text Text Color -** Determines the color of sub-text that appears on the card, like dates and Metadata Types.
* **Date Text Color -** Determines the color of the published date of a Set.
* **Description Text Color -** Determines the color of the description of a Set or Model.
* **Title Link Text Color -** Determines the color of the Title of the Set or Model. Setting this will override the **Card Text Color** and **Special Link Text Color**.
* **Special Link Text Color -** Determines the color of any links on the card, such as metadata.

## Buttons

The following settings control the color of buttons and the text that appears on them.

* **Default Background -** Determines the default background of buttons, overriding the Theme Color in the Base Theme Colors.
* **Default Background (on hover) -** Determines the default background of buttons when they are hovered, overriding the theme color in the Base Theme colors setting.
* **Default Text Color -** Determines the default color of text on buttons, overriding the theme color in the Base Theme colors settings.
* **Default Text Color (on hover) -** Determines the default color of text on buttons when they are hovered, overriding the theme color in the Base Theme colors settings.
* **Primary Background -** Determines the color of the background of a button.
* **Primary Background (on hover) -** Determines the color of the background of a button when hovered over.
* **Primary Text Color -** Determines the primary color of text that appears on all buttons.
* **Primary Text Color (on hover) -** Determines the color of the text when hovered over.

## User Interaction

The following settings control the color of [User Interaction](/content-management/user-interaction.md) elements that appear on pages.

* **Username in Comments Text Color -** Determines the color of member usernames when used on a Comment Block.
* **Icon Text Color -** Determines the color of the Heart and Thumbs Up/Down Buttons.
* **Active Icon Text Color -** Determines the color of Heart and Thumbs Up/Down Buttons once they are in an active state.
* **Button Background -** Determines the background of the user interaction buttons.
* **Button Border Color -** Determines the border of the user interaction buttons.
* **Button Text Color -** Determines the color of text that appears on user interaction buttons.

## Media and Carousel Block Types

The following settings control the colors of elements that appear on [Media Blocks](/content-management/member-areas-and-tours/themes/block-types/media-block.md) and [Carousel Blocks](/content-management/member-areas-and-tours/themes/block-types/carousel-block.md).

* **Heading Background -** Determines the background color of the heading.
* **Heading Text Color -** Determines the color of text that appears on the heading.
* **Heading Button Background -** Determines the background color for the button.
* **Heading Button Background (on hover) -** Determines the background color of the button once hovered over.
* **Heading Button Text Color -** Determines the color of text on the button, overriding the heading text color for this button.
* **Heading Button Text Color (on hover) -** Determines the color of text on the button once hovered over.

## Detail Area on Model and Set View

The following settings control the colors of elements that appear in the list of details for a [Model View Block](/content-management/member-areas-and-tours/themes/block-types/model-view-block.md) and [Set View Block](/content-management/member-areas-and-tours/themes/block-types/set-view-block.md). These are details such as Model Attributes, published date of a set, metadata associated with a set, and more.

* **Detail List Background -** Determines the background color of the list of details associated with a Set or Model.
* **Detail List Text Color -** Determines the color of the text that appears when displaying details for a Model View and Set View.
* **Detail List Link Color -** Determines the color of links that appear on Set and Models.

## Related Articles

{% content-ref url="/pages/vLjui31B0zD3wR6LMs6z" %}
[Customizing Your Theme](/content-management/member-areas-and-tours/customizing-your-theme.md)
{% endcontent-ref %}

{% content-ref url="/pages/J6Pe6MmfmWL8KMam8usM" %}
[Block Types](/content-management/member-areas-and-tours/themes/block-types.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.toomuchmedia.com/content-management/member-areas-and-tours/themes/design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.