Changes

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.

'''Note:''' Logos will appear in a container that is 40 pixels high x 200 pixels wide and as such fine text, details, taglines or longer wordmarks may be hard to read. We suggest using your organization's logo that is best suited for smaller spaces. [[File:Branding-object-logo-2020.png|thumb|none|800px|Logo appears in the top left in the header of all pages.]] [[File:Wiki-logos.jpg|thumb|none|800px|Example of organization logos suitable for large and small spaces. Note how elements are removed from logos intended for small spaces.]]  

||SizeDimensions||112 pixels 112px high is and 560px wide are the recommendeddimensions. Try to keep the width under 250 pixels as wide logos Logos will be scaled sized downto appear at 56 pixels high or lower within the system.

:* 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.

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]]

||SizeDimensions

:# 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.

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.

==Compact Header==Use the compact header for a cleaner and more streamlined look. This header option is recommended and gives you more screen real[[File: Branding-logo-estate to work within. Note this setting applies to all users of the systemtext.png|thumb|none|800px|Logo Text]]

[[File:branding-main-heading-2-2019==Header==All clients were transitioned to the header below in the November 2021 upgrade.png|thumb|none|500px|Compact header]]

===How to enable the Compact Header===[[File:# Click on the '''Menu''' icon which looks like 9 squares in the top right of the standard-header.:: {{Icon-Menu}}: :# Select '''Global Settings'''2021.png|thumb|none|800px|Main Heading area]]:# Click on the '''Branding''' tab.:# Toggle on '''Enable Compact Header'''.==Colors and Styles==:# Click Beyond uploading image files, you can adjust the '''Save''' buttoncolors and some styles.:# Reload If you choose to change the page colors in your browser system, make sure you maintain a contrast ratio between fonts and backgrounds of 4.5 or greater to ensure you meet with a forced cache refresh accessibility standards (CTRL + F5 on the PCSection 508 and WCAG 2.0). The following tool may be used to check your contrast ratio [https://webaim.org/resources/contrastchecker/ contrast checker by webaim].

==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) Here is a tool you can use to check your contrast ratio http'''Note://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.

===How to modify the Colors & and Styles===:# Click on the '''menu icon''' icon which looks like 9 squares in the top right of the header.

:# Click on the desired color picker to choose a new color or enter a Hexadecimal value (example: #000000)or choose a style.

:# 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 & and Styles settings explained===

||Mandatory Field Font Color

||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 Mouse-OverHover||The color displayed on text links when you mouse hovers over the link (hover).

||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.

||Text The color used by text and icons inside buttons will use this color. Typically, this is This should be set to whiteor a light color.

||Buttons will be this color. Typically, this is This should be set to a dark color like dark 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).

||When the user clicks into an input, or tabs to an input the inputs 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 colorsetting. This setting gives an extra layer of visibility and differentiation to for the currently selected input. Typically, this is This must be set to a light tint of , example yellowsuch 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.

[[File:branding-main-heading-1-20182022.png|thumb|none|500px800px|Main Heading Settings Area]] [[File:branding-main-heading-2-2019.png|thumb|none|500px|Main Heading area with compact header setting on]]

||Main Font color for main menu links and icons located in the main menu icon uses this colorheader.

||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 accessibility.

[[File:branding-left-nav-settings-1-20182022.png|thumb|none|500px800px|Left Navigation Settings Area]]

||Heading Font||Text color on the user menu and on the related objects menu (object left navigation).

||Heading Background||User menu and on Color behind 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||If you click text on the menu icon you will see a menu of links. These links are grouped under headings such as “Tools” and “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 colorleft navigation.

This section controls the display of the title areas found in areas like the personal dashboard and on portal sections using the traditional theme. [[File:branding-titlebarBranding-1title-20182020.png|thumb|none|500px800px|Title Settings Area appears on portal sections set to the default theme]]

||Text in a portal section uses this settingTitle text color. Typically set to whitea dark color or #000000.

||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 lookor #EEEEEE.

||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 heresuch as #CCCCCC.

[[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]]

||Text color for all title bars and headings in the system. Typically set to a dark greyor #000000.

||Underline color for all title bars and headings in the system. Typically set to a color or light shade of grey.

[[File:brandingBranding-listlistview-12020-2018highlight.png|thumb|none|500px800px|List Settings Area]]

||Text color for table headers. This must be Typically a dark color. Typically, 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.

||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 mindful of accessibility standards for color contrast. You can use this tool to check https://webaim.org/resources/contrastchecker/

||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).

||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).

==Importing/Exporting Colors & and Styles==You can import and export your colors and styles settings from one system environment to another, or save a copy of your colors and styles for archival purposes. For example, you can make changes and test them on your backup or development system environment and then when you are happy, apply all your changes at once to your production environment system.

:# Click on the '''menu iconMenu''' icon which looks like 9 squares in the top right of the header.

:# Close the alert and the modal window.

:# 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: Uploading images==When you upload images to your system, always size the images to the desired dimensions and save to the desired file format with compression. Image optimization is typically done in photo editing software such as Adobe Photoshop. Take the time to ensure your image files are 1 MB or less. Larger images can take several seconds to download and may cause a noticeable delay while pages load. Note an image saved a 72 pixels per inch (ppi), 240 ppi and 500 ppi will all look the same if viewed at 200 pixels by 200 pixels. The quality of each version of image is exactly the same when viewed on screen. The higher ppi versions have a much higher file size which means your users may have to wait unnecessarily and use more data, but the higher ppi makes no difference to image quality on screen.So, if the image you are uploading is intended to be printed in a PDF, then a higher resolution is ok such as 150 or 300 dpi (dots per inch), but if the image is going to be used as a background in a portal or the login page a smaller resolution such as 72 ppi is recommended.

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.

'''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.

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]

* [https://www.iStockphoto.comiStock Photo]

* [https://www.Shutterstock.comShutterstock]

* [https://www.flaticon.com/Flaticon]