Smartstaff
2,014
edits
Changes
m
[[File:branding-main-heading-1-2018.png|thumb|none|500px|Main Heading area with compact header setting '''Off''']]
Generally, files should be saved in In regards to file formats JPG or and PNG format and make use of compression are the best optionsfor your system.
→Overview
=Overview=
As part of the implementation process, SmartSimple or its partners typically configure the look and feel of your system. If you have '''Global Administrator''' privileges, you can change the look and feel of your system at any time. This article explains how you to upload logos and change the system colors to align your system with your brand.
The branding settings effect affect multiple areas of the system.
[[File:branding-listview-2020.png|thumb|none|800px|List View page as seen by Administrator]]
You can upload a logo that will appear in the header for all users. This logo appears at the top left of all screens. Typically, people upload their organization’s logo, unless they have created a special logo for their system. If you don’t have a logo, you can enter text.
[[File:Branding-object-logo-2020.png|thumb|none|800px|Logo appears in the top left in the header of all pages.]]
===Logo Specifications===
{| class="wikitable"
|-
||SizeDimensions
||112 pixels high is recommended. Try to keep the width under 250 pixels as wide logos will be scaled down.
|-
:* Click on the '''Branding''' tab.
:* For '''Logo''' click on the '''Browse…''' button, which looks like an open folder and select the desired file you want to upload.
:* Click the '''Upload''' buttonto upload your submission.:* Reload the page in your browser with Force a forced cache refresh on your browser (CTRL + F5 on the PC, Cmd + R on Mac)to view your changes.
==Favicon==
The favicon is short for Favorite Icon. Depending on your browser and operating system, this icon may appear on your tabs, in your bookmarks, and on the user’s desktop.
[[File:Branding-favicon-2020.png|thumb|none|500px800px|Favicon in browser tab]]
===Favicon specifications===
{| class="wikitable"
|-
||SizeDimensions
||48 pixels high by 48 pixels wide.
|-
:# 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 Force a forced cache refresh on your browser (CTRL + F5 on the PC, Cmd + R on Mac)to view your changes.
==Logo Text==
The '''Logo Text''' setting is used to set the '''Alt''' text on the logo. The '''Alt''' text will appear if there is no image or if the image fails to load. This text is also used by assistive technology such as screen readers for the visually impaired.
[[File: Branding-logo-text.png|thumb|none|800px|Logo Text]]
==Compact Header==
Use the compact header for a cleaner and more streamlined look. This header option is recommended and gives you more screen real-estate to work within. Note this setting applies to all users of the system.
[[File:branding-main-heading-2-2019.png|thumb|none|500px800px|Compact Main Heading area with compact headersetting <strong>On</strong>]] [[File:branding-main-heading-1-2018.png|thumb|none|800px|Main Heading area with compact header setting <strong>Off</strong>]]
===How to enable the Compact Header===
:# Toggle on '''Enable Compact Header'''.
:# Click the '''Save''' button.
:# Reload the page in your browser with Force a forced cache refresh on your browser (CTRL + F5 on the PC, Cmd + R on Mac)to view your changes.
==Colors & 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) [https://webaim.org/resources/contrastchecker/ Here is a tool ] you can use to check your contrast ratio http://leaverou.github.io/contrast-ratio/.
Also: note that 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.
:# Click on the desired color picker to choose a new color or enter a Hexadecimal value (example: #000000) or choose a style.
:# Click '''Save'''.
:# Reload the page in your browser with Force a forced cache refresh on your browser (CTRL + F5 on the PC, Cmd + R on Mac).to view your change
===Color & Styles settings explained===
|-
||Button Font
||Text The color used by text and icons inside buttons will use this color. Typically, this is set to white.
|-
||Button Background
||Buttons will be this color. Typically, buttons are 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 succes success messaging.
|-
||Button Foreground
====Main Heading Settings====
[[File:branding-main-heading-2-2019.png|thumb|none|500px800px|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>]]
|-
||Font
||Main Font color for main menu links and the main menu icon uses this coloricons.
|-
||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.|-||Foreground||If you want Make sure there is a gradient in the header, use this setting. This gradient will go from bottom to top, fading when it gets to the topcontrast ratio of 4. Typically, 5 or greater between the background color and foreground colors are the same, giving the header a flat lookfont setting to ensure your systems is accessible.
|}
====Navigation Settings====
[[File:branding-nav-settings-1-2018.png|thumb|none|500px800px|Navigation Settings Area]]
{| class="wikitable"
|-
||Heading Background
||User Color behind the text on the user menu and on the related objects menu color.|-||Heading Foreground||If you want a gradient in the user menu use this setting. Typically, it is set to the same color as the heading background giving it a flat look.
|-
||Menu Icon Header Font
||This setting is not used with the compact style header. If you click on the menu Menu icon using the old-style header you will see a menu of many links. These links are grouped under headings such as “Tools” '''Tools''' and “Help”'''Help'''. This setting controls the icon text and underline color of these headings. Typically, the heading background color is used for this if the heading is set to a dark color.
|}
====Title Settings====
This section controls the display of the title areas found in areas like the personal dashboard and on portal sections using the default theme. [[File:branding-titlebarBranding-1title-20182020.png|thumb|none|500px800px|Title Settings Area appears on portal sections set to the default theme]]
{| class="wikitable"
|-
||Font
||Text in a portal section uses this settingTitle text color. Typically set to whitea dark color like #000000.
|-
||Background
||The background color of the title bar of portal sections uses this settingarea. Typically set to a dark color similar to the header.|-||Foreground||If you want a gradient in the title bar of portal sections use this setting. Typically, it is the same light color as the background to give a flat looklike #EEEEEE.
|-
||Bottom Border
||If you want a line under the title bar of a portal section 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 heresuch as #CCCCCC.
|}
====Sub-Title Settings====
[[File:brandingBranding-subtitletitlebar-1-20182020.png|thumb|none|500px800px|SubLayout -Title Settings AreaBar custom field as seen on object pages]][[File:Branding-title-settings-2020.png|thumb|none|800px|Heading as seen by administrators seen on setting pages]]
{| class="wikitable"
|-
||Font
||Text color for all title bars and headings in the system. Typically set to a dark grey.
|-
||Bottom Border
||Underline color for all title bars and headings in the system. Typically set to a color or light shade of grey.
|}
====List Settings====
[[File:brandingBranding-listlistview-12020-2018highlight.png|thumb|none|500px800px|List Settings Area]]
{| class="wikitable"
|-
||Heading Font
||Text color for table headers. This must be Typically a dark color. Typically, such as the header color is used.
|-
||Heading Background
||Table Header background color. We recommend using Typically a version of the 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 with accessibility standards for color contrast. You can use this tool to check [https://webaim.org/resources/contrastchecker/this tool] to check font and background contrast.
|-
||Top Border
||A Display options for the line at the top of each row in the table to give differentiation between rows. Typically set to a 1px solid FFFFFF (which is white).
|-
||Bottom Border
||A Display options for the line at the bottom of each row in the table to give differentiation between rows. Typically set to a 1px solid CCCCCC (which is a light grey).
|}
===How to export and import colors and styles between systems===
:# Click on the '''menu iconMenu''' icon which looks like 9 squares in the top right of the header.
:: {{Icon-Menu}}
:
:# 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 Force a forced cache refresh on your browser (CTRL + F5 on the PC, Cmd + R on Mac)to view your changes. ===Sample colors and styles file===Here is a sample color and styles file you can download and import into your system. It will give you a blue header like the screenshots in this wiki. [[File:Sample-colors-styles.txt]]
==Tip: Image sizing and compressionUploading images==When you upload images to your SmartSimple system, always size them the images to the desired dimensions and save to the desired file formatwith compression. This usually involves resizing the chosen image and saving it as optimized Image optimization is typically done in photo editing software such as Adobe Photoshop. For example, if you upload a 16MB Take the time to ensure your image it will files are 1 MB or less. Larger images can 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 may cause a noticeable delay while pages load instantly with no discernible difference to the look and feel.
'''JPG/JPEG''' Joint Photographic Experts Group (JPG/JPEG) is a lossy format best for photos such as an image images of people or a landscape, landscapes, and realistic photography.
'''PNG''' Portable Network Graphics (PNG) is a lossless format that supports transparency and is best suited for logos , graphics, and graphicsicons.
==Tip: Sourcing imagery==
Don’t have photos to use in your SmartSimple system? Here are some websites that offer copyright -free stock photos for commercial use. Find the images you want, crop and size the images then upload them into SmartSimpleyour system.
* [https://unsplash.com/Unsplash]
* [https://gratisography.com/Gratisography]
* [https://morguefile.com/Morguefile]
* [https://pixabay.com/Pixabay]
* [https://www.stockvault.net/Stockvault]
* [https://www.pexels.com/Pexels]
* [https://picjumbo.com/Picjumbo]
* [https://www.rawpixel.com/Raw Pixel]
* [https://www.reshot.com/Reshot]
You may also want to check out the following paid stock photo sites.
* [https://www.iStockphoto.comiStock Photo]
* [https://www.Shutterstock.comShutterstock]
For free icons
* [https://www.flaticon.com/Flaticon]
[[Category:Interface]]
