Design

Article Topics: Design, Themes, Customization

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

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.

General

The General section provides a place for you to insert CSS Classes and IDs that have been defined in the 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 location of the favicon you wish to use.

Base Theme Colors

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

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.

• Theme Color - Determines the primary color of buttons and links.

• Page Background - Determines the background color of all pages within the theme.

• 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.

• Focus Text Color - Determines the color of certain text, such as time stamps, dates, and links in navigation bars.

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 and the Navigation List Block.

• 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.

• 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 -Determines 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 and Metadata Lists. 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 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 and Carousel Blocks.

• 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 and Set View Block. 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

Customizing Your ThemeBlock Types