Customizing Icons and Colors

BetterSTR offers extensive customization options for icons and colors, allowing you to match your guidebooks to your brand identity.

Icon Style Options

Choose from five FontAwesome icon styles:

• Regular - Light outline style (default)
• Light - Thinner outline variant
• Thin - Ultra-thin outline for a minimal look
• Duotone - Two-color effect with depth
• Solid - Filled solid icons

Each style provides a different visual feel. Regular and Light work well for clean, modern designs, while Solid offers high visibility.

Setting Icon Style

Property-Level Setting

1. Go to Properties
2. Click the action menu on a property
3. Select Property Settings
4. Find the Icon Style section
5. Click on your preferred style
6. Save your changes

Default Setting (All Properties)

1. Go to Properties
2. Click Property Defaults
3. Find the Icon Style section
4. Select your preferred default style
5. Save defaults

Icon Color

Customize the color of icons throughout your guidebook:

1. In Property Settings or Property Defaults, find Icon Color
2. Click Choose Color
3. Use the color picker to select your color
4. You can also enter a hex code directly (e.g., #FF6900)
5. Click Save to apply

The default icon color is #ff7c7c (coral red).

Theme Colors

Two theme colors control the overall look of your guidebook:

Main Theme Color

Controls the primary accent color used for:

• Header backgrounds
• Primary buttons
• Accent elements

Default: #45B5AA (teal)

Navigation/Footer Color

Controls the color for:

• Navigation menu backgrounds
• Footer areas
• Secondary accent elements

Default: #4C6265 (dark gray-blue)

Using the Color Picker

The Pickr color picker provides:

• Color Preview - See your selected color in real-time
• Hue Slider - Select the base color
• Saturation/Brightness - Fine-tune intensity
• Hex Input - Enter exact color codes
• Opacity - Adjust transparency if needed

Map Location Colors

Map markers have their own color settings:

• Icon Color - The color of the icon symbol
• Circle Color - The background circle behind the icon

These are set per location in the Map section.

Color Presets for Maps

Quick-select from common colors:

• Black (#000000)
• White (#FFFFFF)
• Orange (#FF6900)
• Yellow (#FCB900)
• Teal (#7BDCB5)
• Light Blue (#8ED1FC)
• Blue (#0693E3)
• Gray (#ABB8C3)
• Red (#EB144C)
• Pink (#F78DA7)
• Purple (#9900EF)

Best Practices

Brand Consistency

Use your brand colors for theme colors to maintain consistency across all guest touchpoints.

Contrast

Ensure sufficient contrast between icon colors and backgrounds for readability.

Test on Mobile

Preview your color choices on mobile devices where most guests view guides.

Property-Specific Theming

Consider using different color schemes for different property types or brands within your portfolio.