2,299
edits
Changes
no edit summary
::: {{Icon-Menu}}
==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.
===How to upload the Favicon===
:# 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.:# For '''Favicon''' click on the '''Browse…''' button which looks like an open folder and select the desired file.:# 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.
===How to enable the Compact Header===
:# 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.:# Toggle on '''Enable Compact Header'''.:# 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/.
===How to modify the Colors & Styles===
:# 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 '''Colors & Styles''' link.:# Click on the desired color picker to choose a new color or enter a Hexadecimal value (example: #000000).:# Click '''Save'''.:# Reload the page in your browser with a forced cache refresh (CTRL + F5 on the PC).
===Color & Styles settings explained===
====Global Settings====
===How to export and import colors and styles between systems===
:# 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 '''Colors & Styles''' link.:# In the action bar located near the header click on the '''Export Styles''' button.:# A modal window will open. Copy the code in the modal window.:# Go to the system where you want to apply these styles.:# Follow steps 1 to 4 above.:# In the action bar located near the header, click on the '''Import Styles''' button.:# Paste the styles you copied into the modal window of the desired system.:# Click the '''Import Styles''' button on the bottom of the modal window.:# Click '''OK''' on the alert.:# Close the alert and the modal window.:# 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.
=See Also=
The '''Branding''' section of '''Global Settings '''also allows you to modify the [[Organization Terminology]] and [[Login Page|login pages]] for your system.
:* [[Organization Terminology]]:* [[Login Page]]:* [[Signup Page]] :* [[How the SmartSimple Support Desk Works]]
[[Category:Interface]]
