How to Customize POS Buttons (Size, Background Color, and Text Style) in POS Dashboard

Popular Search:Tips, Setup, Troubleshooting

blogicsystems Software Guides, Point of Sale

Introduction

This article explains how to use Customize POS Buttons in POS Dashboard to configure button Size, Background Color, and Text Style. You will learn how to set colors for Light mode and Dark mode, preview changes, apply updates, and restore defaults when needed.

Version Support

  • Supported version: BLogic POS v7.2025.12.30
  • Module: POS Dashboard → Settings → Customize POS Buttons
  • If you do not see this menu or the updated color picker dialog, please contact Support for assistance.

Table of Contents

  1. Open Customize POS Buttons
  2. Understand Tabs and Configuration Areas
  3. Set Button Size (with Best-Practice Recommendations)
  4. Set Background Color (Light Mode & Dark Mode)
  5. Set Text Style (Font & Size)
  6. Save, Reset to Default, and How Changes Are Applied
  7. Preview Mode in Products Module (Light/Dark Toggle)
  8. FAQ

1. Open Customize POS Buttons

  1. Open POS Dashboard.
  2. Go to Settings.
  3. In the left menu, select Customize POS Buttons.

2. Understand Tabs and Configuration Areas

Each tab has its own setup. Common tabs include:

  • Group Button Color & Size
  • Modifier Button Color & Size
  • Forced Modifier Button Color & Size
  • Item Button Color & Size
  • (Optional) Sales Screen Button Layout

Each tab includes three main sections:

  • Button Size
  • Background Color
  • Text Style

ℹ️ Note: Settings do not automatically copy across tabs. Configure each tab you want to change.

3. Set Button Size (with Best-Practice Recommendations)

Each tab provides 6 default button sizes. Choose a size that matches your device resolution and improves speed and readability.

Steps

  1. In the selected tab, go to Button Size (w x h).
  2. Click one of the 6 preset sizes.
  3. Check the Preview panel to confirm:
    • Text fits well (not too small or cut off)
    • Buttons are easy to tap/click
    • Spacing looks balanced

✅ Tip: For busy stores, prioritize readability and tapping accuracy over fitting more buttons on one screen.

3.1 Recommended Sets for POS devices: 1366 × 768

Use one of the following sets for a clean and balanced layout:

  • Set 1
    • Groups: 135 × 75
    • Modifier: 115 × 55
    • Item: 160 × 75
  • Set 2
    • Groups: 145 × 80
    • Modifier: 120 × 60
    • Item: 180 × 85
  • Set 3
    • Groups: 155 × 80
    • Modifier: 130 × 65
    • Item: 155 × 90

3.2 Recommended Sets for POS devices: 1920 × 1080

Use one of the following sets for better spacing on larger screens:

  • Set 1
    • Groups: 160 × 80
    • Modifier: 110 × 60
    • Item: 140 × 70
  • Set 2
    • Groups: 140 × 80
    • Modifier: 160 × 70
    • Item: 185 × 85
  • Set 3
    • Groups: 120 × 80
    • Modifier: 120 × 80
    • Item: 120 × 80

✅ Tip: If your menu has long names, choose a wider button size or slightly reduce font size to avoid truncation.

4. Set Background Color (Light Mode & Dark Mode)

You can configure button colors separately for Light mode and Dark mode.

  1. In the selected tab, find Background Color.
  2. Click the pencil icon (Pick color).
  3. The dialog Choose a button background color appears.
  4. In the dialog:
    • Select a color for Light mode
    • Select a color for Dark mode
    • Use Preview to verify readability
  5. Click Apply to confirm your selection.
  6. Back on the main screen, confirm the preview reflects the update.

ℹ️ Hint: The button text color is automatically set to white or black based on the selected background color to ensure the label stays readable.

5. Set Text Style (Font & Size)

The system uses Roboto as the default font and allows different Roboto styles and font sizes.

Change Font Style

  1. Go to Text Style → Font.
  2. Open the dropdown.
  3. Select a Roboto style (example: Roboto Regular, Roboto Bold, Roboto Italic, etc.).

Change Font Size

  1. Go to Text Style → Size.
  2. Open the dropdown.
  3. Choose one of the 10 available font sizes.

✅ Tip: Use Bold for higher visibility in bright environments or fast-paced operations.

6. Save, Reset to Default, and How Changes Are Applied

Save your changes

  1. Click Save after completing your configuration.

Reset to Default

  1. Click Reset To Default to restore system default settings.

ℹ️ Important Behavior (Existing Stores / Backward Compatibility)

  • If you do not change anything after updating to the new build, your previous settings remain unchanged.
  • Settings will only update when you make changes and click Save.

7. Preview Mode in Products Module (Light/Dark Toggle)

A new Preview Mode toggle is available in the Products module to quickly view button colors in both themes.

  1. Open POS Dashboard → Products.
  2. Use the Preview Mode toggle in the top header.
  3. Switch between Light and Dark to verify button appearance.

✅ Tip: Always verify both themes after changing colors to ensure consistent readability.

8. FAQ

1) Do I need to set colors for both Light mode and Dark mode?

Yes. This ensures buttons remain readable if the store switches themes.

2) Will the update overwrite my previous button settings?

No. Your existing settings are kept until you change something and save.

3) I picked a color but nothing changed—what happened?

Make sure you clicked Apply in the color dialog, then click Save on the main page.

4) Why do Group, Modifier, Forced Modifier, and Item need separate setup?

Each tab controls a different button type, so settings must be configured per tab.

Popular Search:Tips, Setup, Troubleshooting