Overview

Ruuster offers full customization of your app to fit your agency’s look and style. In this article, we’ll go over how to set a brand logo for all agents as well as how to customize the UI for the app to change colors and button placement.

Set Your Agency Logo

On a mobile device, hit the menu button in the top right. 

For desktops, look at the left navigation bar. 

Scroll to the Admin view section and click Global Settings. In the dropdown, select Branding. 

Click Change logo to upload a new logo for your agency. Drag and drop an image into the field below or click the field to select an image from your device.

Tip: The recommended aspect ratio for logo images is 3:1 - 4:1

Once you’ve added an image you can make some small edits: 

• Crop Logo - Click and drag one of the image corners to crop the logo.

• Rotate Image - Click the circular arrow under the image to rotate it. 

• Flip Image - Click the triangles to flip the logo horizontally. 

• Reset Changes - Click the X button to undo any changes you’ve made to your uploaded logo. 

Note: There’s an option to Allow Agent Override. Toggling this switch to the right means that all agents added in the future can change the logo you select. Toggling the switch to the left means no agent added in the future can edit the logo. Exceptions can be made in individual agent profiles. For more information on permissions see the article Set Agent Permissions. 

When you’re done, scroll down and click Save to keep your changes. If you made a mistake, simply click Revert Changes and the logo will return to the previous save state.

Customize Your App User Interface

You can customize your app user interface so that everything from the layout of buttons on the screen to the color schemes used matches your branding. On a mobile device, hit the menu button in the top right. 

For desktops, look at the left navigation bar. 

Scroll to the Admin view section and click Global Settings. In the dropdown, select UI Customizations. 

Note: You can update the UI on mobile or on a desktop. Just keep in mind, on a desktop you will be able to preview your changes immediately on the right side of your screen. On mobile, you may have to scroll down to see the changes made to the UI options in the preview. It may be easier to make these changes using a desktop.

Dashboard Button Layout 

The dashboard buttons are the four main menu options that show when a client opens your app. You can customize where the buttons navigate, the order they show in, and how they look. 

Click on the Dashboard buttons section to see the options for each of the four buttons.

To customize the top left button, click Top left.  You can select the following options: 

• Background color - Click to use the color selector or enter the hex code for the desired color. This will be the background of the selected dashboard button.

• Text color - Click to use the color selector or enter the hex code for the desired color. This will be the text and the icon color of the selected dashboard button. 

• Select icon - Use the dropdown to select an icon for the center of the dashboard button. The color of the icon is determined by the text color.

• Select link - Use the dropdown to select what page you want the dashboard button to bring a user.

When you’re done, scroll down to click Save. If you made a mistake and want to change the app back to the default UI settings it came with, click Reset to Original App UI Defaults. 

Color Scheme Options

Aside from the dashboard buttons, you can adjust the color of things such as the regular app buttons, app text, and hyperlinks. 

Tip: We’ll go over some of the basics of what you can adjust, but always check your changes before saving. Use the app preview (to the right on desktop and underneath on mobile devices) to see the changes you’ve made and tinker with the perfect color combinations!

Desktop Preview to the Right

Mobile Preview Below

There are three main sections, Buttons, Common, and Links, that we will go over in detail below.

Buttons

Buttons can be found throughout your app. Examples of buttons include Save Search, Map View, and Favorite. 

To manage the background color of buttons and the color of the text inside them, click the Buttons dropdown. You can select the following options: 

• Buttons Color - Use the color picker to select the background color of buttons.

• Buttons text color - Use the color picker to select the color of text in your app buttons.

• Saved search button color - Use the color picker to select the background color of the button to save searches in the app.

• Saved search button shadow  - Use the color picker to select the color for a shadow around the saved search button.

• Saved search button text color - Use the color picker to select the text color in the saved search button.

Common

The main theme colors and fonts for your app can be set in the Common section.  You can select the following options: 

• Accent color - Use the color picker to set the bottom menu color in mobile as well as other primary UI elements like checkboxes.

• Sub Accent Color - Use the color picker to set the highlight that shows when you hover over or click into a text input field. It is also the color used for unselected menu options in the app. 

• Text Color - Use the color picker to set font color for main headings and page contents in the app.

• Secondary text color - Use the color picker to set the font color for subheadings and minor page content. 

• Main font - This is the font for regular text in the app and the bottom menu in the mobile view.

• Secondary font - This is the font used for headings and special tiles in the app.

Links

The Links settings allow you to choose the Link color of any hyperlinks in your app. For example, the education articles will have Read more links. The text of those links will change based on what you select.

Background

You can set two different backgrounds based on the device size your client is using. The first option is called Mobile version and will display for devices less than 600px in width. The second option is called Wider version and is for screens larger than 600px. Remember to customize both!

To set a solid background color, click the Color tile and select the desired color.

To set an image as the background, drag and drop an image into or click inside the Image field. 

If you make a mistake, click Delete to remove the picture. You’ll be able to see what the background looks like in the right preview. You can further customize the image behavior with the following options: 

• Image Size - This dropdown lets you pick if the image stays its original size, stretches to fit the background, or is made smaller. 

• Image Position - Select where you would like the image to sit in the background, you can anchor it to any corner, side, or center. 

• Image Repeat - If you have a small image that will not cover the entire background, you can make the image repeat horizontally or vertically, to fill the space.

• Image Type - Select if the image stays static in the background of the app or if it moves as users scroll down the page.

When you’re done, scroll down to click Save. If you made a mistake and want to change the app back to the default UI settings it came with, click Reset to Original App UI Defaults. 

Still need help? Reach out to us at helpme@ruuster.com and we’d be happy to assist!