Logos & Styles
6 min
uploading and adjusting logos your first view use your pre configured account to log in initially, the interface will appear without custom styles or logos let's change that navigate to the settings by default the > themes & styles tab will be selected change the site title the image above also shows how to first change the " site title" your portal will also use the site title as the name to reference your company in all email contacts let's modify the site title under the settings to reflect your branding change the logo and favicon let's get to work uploading 2 images the designer makes it easy to understand how to update and create highly customizable branding all uploaded images must be either png or jpeg if necessary, convert heic , webp , ico by using a free online tool like cloudconvert the first will be your general logo that will brand your portal navigation, login screens, and emails templates next, upload what is called a "favicon" this icon will be used in the top browser tab of your website possible favicon issue you may notice a scrunching ↔️ effect (see the image below) the clearsquare editor is showing exactly what the browser will eventually do to your image upload a logo with a 1 1 ratio in a png or jpeg format to prevent this from happening use a free tool like figma to crop and resize your images will save you a lot of ui headaches customizing site colors there are 3 ways to change a color my favorite option use the color dropper (the color selector tool) to change navigation and text colors click the icon and select a color from anywhare on the browser page you can also use the hex code input to copy and paste from one location to another or from a saved value for your company colors and styles finally, you can click inside the color chart to find a color that suits your needs let's style the website now! customize the navigation i recommend a white top navigation background and selecting the darkest color from your logo to be the top navigation's text text colors this includes but the active text and inactive text in the left navigation and background color for menus highlight choose colors that complement your logo for the site's highlights like buttons and accents content width set the maximum content width the default max width is 100% , but you can also toggle to the usage of px if you switch to pixels try something in the ballpark of 1400px , this size will be the right fit for most desktop displays and allow for some margin on either side of your dashboards mobile screens will default to 100% width even if you toggle to a px base unit artistic advice i would recommend using no more that 3 different colors using multiple colors can cause a little bit of eye fatigue on the viewer