Changes

Jump to: navigation, search

Branding

2,888 bytes added, 18:08, 25 June 2019
no edit summary
|-
||Size
||56 112 pixels high (the width of the logo can vary but something around only 250 pixels wide or less is recommended).
|-
||Format
===How to upload the logo===
# 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 '''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).
==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.
[[File:branding-favicon-1-2018.png|thumb|none|500px|Faviconin browser tab]]
===Favicon specifications===
===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. [[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).
==Colors & Styles==
===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). 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).
===Color & Styles settings explained===
====Main Heading Settings====
[[File:branding-main-heading-1-2018.png|thumb|none|500px|Main Heading Settings Area]]
 
[[File:branding-main-heading-2-2019.png|thumb|none|500px|Main Heading area with compact header setting on]]
 
{| class="wikitable"
|-
====Navigation Settings====
[[File:branding-nav-settings-1-2018.png|thumb|none|500px|Navigation Settings Area]]
 
{| class="wikitable"
|-
====Title Settings====
[[File:branding-titlebar-1-2018.png|thumb|none|500px|Title Settings Area appears on portal sections set to the default theme]]
 
{| class="wikitable"
|-
====Sub-Title Settings====
[[File:branding-subtitle-1-2018.png|thumb|none|500px|Sub-Title Settings Area]]
 
{| class="wikitable"
|-
====List Settings====
[[File:branding-list-1-2018.png|thumb|none|500px|List Settings Area]]
 
{| class="wikitable"
|-
===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. 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/  
[[Category:Interface]]
2,299
edits

Navigation menu