Admin Console Design Tab
Updated
In the Advocacy Design Tab, you can edit various design aspects of your site to create a unique look and feel that is specific to your brand.
To Access the Design Tab
Click the New Tab icon
. Under the Sprinklr Social tab, click Admin Console within Engage.
In the Community window, hover over the Options icon
alongside an Advocacy Community and select View Sites.
Next to the site you'd like to make changes to, hover over the Options icon
and select Build Site.
In the site dashboard bar, click Design to navigate to the Design tab.
In the Design tab, there are a number of elements that you can edit to make changes to the design of your Advocacy site.
Click Save in the bottom right corner.
Design Tab — Field Descriptions
Element | Description |
Brand Logo | |
Logo | Your logo will appear in your site header in the top left corner. |
Logo Symbol | Your logo symbol should be a square image (at least 128x128px) and will appear on widgets like forums. |
Favicon | Your favicon will be the icons shown in browser tabs to identify your site and should be a square image (at least 64x64px). |
Brand Colors Select your company's brand colors. These colors appear below as color suggestions for configuring your site. | |
Primary Colors | Select up to four primary brand colors. |
Secondary Colors | Select up to four secondary brand colors. |
Tertiary Colors | Select up to four tertiary brand colors. |
Background | |
Body Background | Determines the main body background color of the site. |
Content background | Determines the background color of the content on your site. |
Content foreground | Determines the background color of comments within discussions. |
Overlay Background | Determines the background that will appear when content pop-outs or notifications are viewed on the site. |
Fonts | |
Primary Font Family | Determines the font of descriptions. Use the font-family CSS property to specify a prioritized list of font family names or generic family names for a specified element. Separate fonts by commas to indicate alternatives. |
Secondary Font Family | Determines the font of titles. Use the font-family CSS property to specify a prioritized list of font family names or generic family names for a specified element. Separate fonts by commas to indicate alternatives. |
Upload Font Family CSS | Specify a stylesheet URL to upload a font. |
Text | |
Colors on Body Background | Select the color of text that appears on the body background (we recommend selecting a color with a significant difference from your body background color). |
Colors on Content Background | Select the color of text that appears on the content background (we recommend selecting a color with a significant difference from your content background color). |
Alignment | |
Title Alignment | Choose whether your title alignment will be Left-aligned or Center-aligned. |
Description Alignment | Choose whether your description alignment will be Left-aligned or Center-aligned. |
Link Colors Determines the color of unvisited links. | |
Text | Determines the color of the text for links. |
Active Text | Determines the color of the text for visited links. |
Hover Text | Determines the color of the links when users hover their mouse over links. |
Decoration | Determines whether links appear underlined or not. |
Button | |
Button Radius | Determines how curved the edge of buttons are. |
Primary Button Colors | Choose the color of text, hover text, background, and hover background for Share, Upload, and Login buttons. |
Secondary Button Colors | Choose the color of text, hover text, background, and hover background for Cancel and Close buttons. |
Inactive Button Colors | Choose the color of text, hover text, background, and hover background for Inactive buttons. Buttons are considered Inactive when a user is ineligible to select because requirements have not been met. |
Icons | |
Icon | Determines the color of icons that appear throughout your site. |
Hover Icon | Determines the color of icons on hover. |
Dropdown | |
Text | Determines the color of text in the drop-down site menu. |
Background | Determines the color of the background of the drop-down site menu. |
Hover Background | Determines the color of the drop-down menu elements on hover. |
Checkbox | |
Default Background | Determines the color of unchecked checkboxes. |
Checked Background | Determines the color of checked checkboxes. |
Disabled Background | Determines the color of disabled checkboxes. |
Header | |
Text | Configure the color of the header text. |
Active Text | Determines the color of active text in the header. |
Background | Configure the background color of the header. |
Icon | Configure the icon color of icons in the header. |
Hover Icon | Configure the color of icons on hover in the header. |
Separator | Choose whether or not to include a separator line between your header and site content. |
Footer | |
Text | Determines the color of text in your footer. |
Background | Determines the background color of your footer. |
Social Icons | |
Background | Determines the background color of social icons. |
Layout | Choose whether social icons appear on the left or right side of the screen. |
Content Tab | |
Horizontal Content Tab | Configure the text, active text, and background colors for the horizontal content tab. |
Vertical Content Tab | Configure the text, active text, and background colors for the vertical content tab. |
No Content | |
Image | Choose the image that users will see when there is no content. |
Text | Choose the text that users will see when there is no content. |
Featured Carousel | |
Text | Determine the color of the featured tag text on the Featured Carousel. |
Background | Determine the color of the featured tag background on the Featured Carousel. |
Icon | Determine the color of the arrow icon on the Featured Carousel. |
Hover Icon | Determine the color of the arrow icon on hover of the Featured Carousel. |
Background | Determine the background color of the arrow icon on the Featured Carousel. |
Hover Background | Determine the background color of the arrow icon on hover on the Featured Carousel. |
Sharer | |
Primary Background | Determines the color that appears in the sharer content window. |
Secondary Background | Determines the color that appears in the sharer side menu. |
Schelduler | |
Active Month Text | Determines the color of text in the active month. |
Inactive Month Text | Determines the color of text in inactive months. |
Selected Day Text | Determines the color of text on the selected day. |
Selected Day Background | Determines the background color of the selected day. |
Hover Text | Determines the color on hover of text in the Scheduler. |
Hover Background | Determines the background color of a day on hover in the Scheduler. |
Waiting for Admin Approval | Determines the color of items in Waiting for Approval share status. |
Scheduled | Determines the color of items in Scheduled share status. |
Sent | Determines the color of items in Sent share status. |
Leaderboard | |
Header Background | Determines the background of the Leaderboard header. |
Body Background | Determines the background color of the Leaderboard body. |
Toast Notifications | |
Success | Determines the color of popup notifications when users have successfully submitted their screener or uploaded content. |
Error | Determines the color of popup notifications when users encounter an error in submitting their screener or uploading content. |
Neutral | Determines the color of popup notifications when users earn a badge or points. |
Notification Bar | |
Header Background | Determines the header background of the notifications bar. |
Body Background | Determines the body background of the notifications bar. |
Miscellaneous | |
Brand Theme | Determines the color of trimmings throughout the site. |
Separators | Determines the color of content separators throughout the site. |
Search Highlight | Determines the color of the highlight that appears when users search the site. |
Upload Image | |
Upload Image Background Color | Determines the background color of the image uploader. |