Smartstaff, administrator
3,320
edits
Changes
→Colors and Styles
|-
||Dimensions
||112px high and 560px wide are the recommended dimensions. Logos will be sized down to appear at 40 56 pixels high by 200 pixels wide inside or lower within the system.
|-
||Format
==Colors and Styles==
Beyond uploading image files, you can adjust the colors and some styles. If you choose to change the colors in your system, make sure you maintain a contrast ratio between fonts and backgrounds of 4.5 or greater to ensure you meet with accessibility standards (Section 508 and WCAG 2.0). Use the The following tool may be used to check your contrast ratio [https://webaim.org/resources/contrastchecker/ contrast checker by webaim].
'''Note:''' color settings affect multiple areas in the system, and all color settings affect all users. For example, the colors an administrator sees are the same as the colors an applicant sees.
{| class="wikitable"
|-
||Mandatory Field Font Color
||The color of all fields set as mandatory. Typically, the mandatory field color is set to #D81A01 which is a shade of red. This red has enough contrast to meet with Accessibility guidelines.
|-
||Mandatory Field Style
||Any question that is set as mandatory will be by default prefixed with an asterisk '''*'''and must be left like this for accessibility. Alternately, you You may change the caption color to the mandatory field color, instead of showing an asteriskbut it is not recommended.
|-
||Link
||The color of all text links.
|-
||Link Mouse-OverHover||The color displayed on text links when you mouse hovers over the link (hover).
|-
||Link Underline
||Any text links will be underlined by defaultand must be left like this for accessibility. You do have the option to turn off the underlinesbut it is not recommended.
|-
||Button Font
||Buttons will be this color. This should be set to a dark color for contrast. Popular colors are blue, grey or purple. Red and green are generally avoided as they are associated with error and success messaging.
|-
||Button ForegroundHover||If you want a gradient on your buttons, choose a slightly lighter hue or tint of the background color. This setting gives buttons a slight 3D appearance. Typically, May be used to change the button foreground and background are set to the same color giving buttons a flat lookon hover (mouse over).
|-
||Highlight
||When the user clicks into an input or tabs to an input the focus will move to that input. When an input is in focus that input background will change from white to the color chosen in this setting. This setting gives an extra layer of visibility and differentiation for the currently selected input. Typically, this is This must be set to a light tint of , example yellow such as #F7F4DA. Do not set this color to a grey as the "X" used to clear inputs will not show up.|-||Save Button Color||Choose the desired style for Save buttons on record pages.|-||Delete Button Color||Choose the desired style for Delete buttons on record pages.
|}
====Main Heading Settings====
[[File:branding-main-heading-2-20192022.png|thumb|none|800px|Main Heading area with compact header setting <strong>On</strong>]] [[File:branding-main-heading-1-2018.png|thumb|none|800px|Main Heading area with compact header setting <strong>Off</strong>]]
{| class="wikitable"
|-
||Font
||Font color for main menu links and iconslocated in the header.
|-
||Background
||The header background uses this color. The logo will appear over this color, as will the other text in the header. Typically, a dark color looks best for the header. Make sure there is a contrast ratio of 4.5 or greater between the background color and the font setting to ensure your systems is accessibleaccessibility.
|}
====Navigation Settings====
[[File:branding-left-nav-settings-1-20182022.png|thumb|none|800px|Left Navigation Settings Area]]
{| class="wikitable"
|-
||Heading Font||Text color on the user menu and on the related objects menu (object left navigation).
|-
||Heading Background||Color behind the text on the user menu and on the related objects menu.|-||Menu Icon Header Font||This setting is not used with the compact style header. If you click on the Menu icon using the old-style header you will see many links. These links are grouped under headings such as '''Tools''' and '''Help'''. This setting controls the icon color of these headings. Typically, the heading background color is used for this if the heading is set to a dark colorleft navigation.
|}
|-
||Font
||Title text color. Typically set to a dark color like or #000000.
|-
||Background
||The background color of the title area. Typically set to a light color like or #EEEEEE.
|-
||Bottom Border
||If you want a line under the title bar of a portal section of the theme Traditional to give more separation , use this setting. Typically, it is the same color as the background to give a flat look but sometimes a slightly darker shade of the same color is used here such as #CCCCCC.
|}
|-
||Font
||Text color for title bars and headings in the system. Typically set to a dark greyor #000000.
|-
||Bottom Border
|-
||Heading Font
||Text color for table headers. Typically a dark color such as the header button color background is usedhere. Do not use white as column headers and tables will not show up in some areas of the system.
|-
||Heading Background
||Table Header background color. Typically a version of the header color at around 15% opacity. Note the header font and background color inverse when the header of a column is clicked. The sorting icons for list views are an opacity of the Heading Font, so be careful with the colors you choose to ensure you meet mindful of accessibility standards for color contrast. You can use [https://webaim.org/resources/contrastchecker/ this tool] to check font and background contrast.
|-
||Top Border
