Customize Your Theme
Bump lets you customize the look and feel of your KDS. For example, you can change the colors and the amount of orders you see on a page. This guide will walk through each of the theme customizations you can do.
If you still have a question after going through the guide please email sales@getnewline.com
How to Change Your Theme
Click the Settings gear in the bottom right, then click Theme in the top right.
Make any changes you'd like, then click Back to save your changes.
For properties that are colors, you can use this hexademical finder to find the hexadecimal code.
How To Restore The Default Theme
Click the Settings gear in the bottom right, then click Theme in the top right.
Click Reset in the top right to restore the original theme.
Tips
1. For customizations related to color, use this hexademical finder to find the right color.
2. If a theme type is not in this guide, you shouldn't change it.
Bump Layout Overview
Theme Customization Types
App Screen Background
What It Is: This is the background for the main part of Bump, including any unselected order.
Example 1: blue
Example 2: #FFFFFF
App Screen Separator Colors
What It Is: This defines the size and color of the spaces between orders. The example belows results in a green separator that is 2px thick.
Example: 2px solid #0eed16
App Screen Top Padding
What It Is: This adds space at the top of Bump. It must be in pixels (px).
Example 1: 0
Example 2: 50px
App Screen Number of Rows
What It Is: How many rows of orders show on each page.
Example: 2
App Screen Number of Columns
What It Is: How many columns of orders show on each page.
Example: 4
Footer Height
What It Is: This is the height of the footer. It must be in pixels (px).
Example: 68px
Footer Background
What It Is: This is the background color of the footer.
Example: purple
Footer Button Font-size
What It Is: This changes the size of the footer buttons. 10px or 20px is recommended.
Example: 20px
Settings Button Background Color
What It Is: This is the background color for the settings button in the bottom left.
Example: green
Bump Bar Default Buttons Color
What It Is: This is the background color for the filter button and left and right arrows that go to different pages.
Example: blue
Bump Bar Default Buttons Clicked Color
What It Is: This color will flash on a button right after it's pressed to show the touch was received.
Example: yellow
Bump Bar Pagination Block
What It Is: This is the background for the button that shows what page you are on.
Example: black
Chit Border When Selected
What It Is: This is the border around the selected order. You can set the width in pixels and color.
Example: 4px solid orange
Chit Background When Selected
What It Is: This is the background color of the selected order.
Example: blue
Chit Base Font
What It Is: This changes the font of any text.
Example: Arial
Chit Base Font Size
What It Is: This is the text font size in pixels (px).
Example: 18px
Chit Base Font Color
What It Is: This changes the color of order details text.
Example: white
Chit Item Name Font Weight
What It Is: This changes the weight of the item names. This should be a number between 400 and 900.
Example: 400
Chit Item Modifier Color
What It Is: This changes the font color of item modifiers.
Example: red
Chit Item Modifier Padding Left
What It Is: This changes the padding to the left of a modifier. This should be a number in pixels (px).
Example: 20px
Chit Item Modifier Font Size
What It Is: The font size of modifiers. Should be in pixels (px)
Example: 16px
Chit Item Quantity x Sign
What It Is: The color of the X sign next to the item quantity
Example: grey
Chit Item Complete (Done) Color
What It Is: This is the color an item will be in the Expeditor station when marked as done in other stations.
Example: green
Chit Overflow Message Color
What It Is: This is the color of the notification when there is more text that is not visible in an item.
Example: black
Chit Overflow Message Background
What It Is: This is the color of the notification background when there is more text that is not visible in an item.
Example: purple
Chit Overflow Message Height
What It Is: This is the height of the notification when there is more text that is not visible in an item. This should be in pixels (px).
Example: 20px
Chit Overflow Message Bottom
What It Is: This is the space below the notification when there is more text that is not visible in an item.
Example: 0
Chit Overflow Message Font Size
What It Is: This is the font size in the notification when there is more text that is not visible in an item.
Example: 14px
Recall Button Background
What It Is: This is the color of the recall button background.
Example: grey
Bump Button Background
What It Is: This is the color of the bump button background.
Example: yellow
More Details Button Background
What It Is: This is the color of the more details button background.
Example: red
Bump Button Width
What It Is: This is the width of the Bump button, in pixels (px).
Example: 200px
Chit Header Info Color
What It Is: This is the background color of the order header for unselected orders.
Example: green
Chit Header Warning Color
What It Is: This is the color of order header for orders with a warning.
Example: #ffc04d
Chit Header Alert Color
What It Is: This is the color of order header for orders with an alert.
Example: red
Show The Notes For Items (none=hide / block=show)
What It Is: This toggle determines whether to show item notes. Must be none or block
Example 1: none
Example 2: block
Chit Item Notes Color
What It Is: This is the color of item notes.
Example: red
Chit Item Notes Padding Left
What It Is: The padding to the left of item notes. Must be in pixels (px).
Example: 20px
Chit Item Notes Font Size
What It Is: This is the font size for item notes. Must be in pixels (px)
Example: 18px
