Changes

||56 112 pixels high (the width of the logo can vary but something around only 250 pixels wide or less is recommended).

# ::: {{Icon-Menu}}: :* Select '''Global Settings'''.# :* 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''' button.# :* Reload the page in your browser with a forced cache refresh (CTRL + F5 on the PC).

:# 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. [[File:branding-main-heading-2-2019.png|thumb|none|500px|Compact header]] ===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).

:# 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). You may also want to choose some style options that appear under the select one inputs.:# Click '''Save'''.:# Reload the page in your browser with a forced cache refresh (CTRL + F5 on the PC).

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

||: 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, the button foreground and background are set to the same color giving buttons a flat look.

||Text color for table headers. This must be a dark color. Typically, the header color if the header color is darkused.

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

:# 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. Generally, files should be saved in JPG or PNG format and make use of compression options. Joint Photographic Experts Group (JPG/JPEG) is a lossy format best for photos such as an image of people or a landscape. Portable Network Graphics (PNG) is a lossless format that supports transparency and is best suited for logos and graphics. ==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 SmartSimple. https://unsplash.com/ https://gratisography.com/ https://morguefile.com/ https://pixabay.com/ https://www.stockvault.net/ https://www.pexels.com/ https://picjumbo.com/ https://www.rawpixel.com/ https://www.reshot.com/  You may also want to check out the following paid stock photo sites. https://www.iStockphoto.com https://www.Shutterstock.com  For free icons https://www.flaticon.com/