Logos & Styles
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.
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.
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.
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.
