Smartstaff, administrator
3,316
edits
Changes
→List Settings
:* Click the '''Upload''' button.
:* Reload the page in your browser with a forced cache refresh (CTRL + F5 on the PC).
==Favicon==
The favicon is short for Favorite Icon; it is also known as shortcut, website, tab, URL and bookmark icon. Depending on your browser, this icon will appear on your tabs, in your bookmarks on shortcuts and in other areas of the user’s browser or desktop.
:# Click on the '''menu icon''' which looks like 9 squares in the top right of the header.
:: {{Icon-Menu}}
:
:# Select '''Global Settings'''.
:# Click on the '''Branding''' tab.
:# Click the '''Upload''' button.
:# Reload the page in your browser with a forced cache refresh (CTRL + F5 on the PC).
==Compact Header==
Use the compact header for a cleaner and more streamlined look. This header option, gives you more screen real-estate to work within. Toggle this setting on or off based on your preference. Note this setting applies to all users of the system.
:# Click on the '''menu icon''' which looks like 9 squares in the top right of the header.
:: {{Icon-Menu}}
:
:# Select '''Global Settings'''.
:# Click on the '''Branding''' tab.
:# Click the '''Save''' button.
:# Reload the page in your browser with a forced cache refresh (CTRL + F5 on the PC).
==Colors & Styles==
Beyond uploading image files, you can adjust the colors and you have some style choices. 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) Here is a tool you can use to check your contrast ratio http://leaverou.github.io/contrast-ratio/.
:# Click on the '''menu icon''' which looks like 9 squares in the top right of the header.
:: {{Icon-Menu}}
:
:# Select '''Global Settings'''.
:# Click on the '''Branding''' tab.
:# Click '''Save'''.
:# Reload the page in your browser with a forced cache refresh (CTRL + F5 on the PC).
===Color & Styles settings explained===
====Global Settings====
|-
||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
|-
||Heading Font
||Text color for table headers. This must be a dark color. Typically, the header color if the header color is darkused.
|-
||Heading Background
||Table Header color. Typically, We recommend using a lighter version of the of the header color at around 15% is recommended. 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 with accessibility standards for color contrast. You can use this tool to check https://webaim.org/resources/contrastchecker/
|-
||Top Border
:# Click on the '''menu icon''' which looks like 9 squares in the top right of the header.
:: {{Icon-Menu}}
:
:# Select '''Global Settings'''.
:# Click on the '''Branding''' tab.
:# Click '''Save'''.
:# Reload the page in your browser with a forced cache refresh (CTRL + F5 on the PC).
==Tip: Image sizing and compression==
When you upload images to your SmartSimple system, always size them to the desired dimensions and format. This usually involves resizing the chosen image and saving it as optimized in photo editing software such as Adobe Photoshop. For example, if you upload a 16MB image it will take several seconds to download and display plus it will use up more of your client’s data. Conversely the same Image could be saved in JPG format at medium compression and its file size will be less than 0.1MB which will load instantly with no discernible difference to the look and feel.
https://www.flaticon.com/
[[Category:Interface]]
