Design & Styling

Background Options

The background is the foundation of your announcement bar's visual appearance. HashBar offers multiple background options from basic to advanced.

Solid Color Background (Free & Pro)

All plans support solid color backgrounds for a clean, simple look.

• Unlimited Colors: Choose any color using the color picker
• Hex/RGB Support: Enter custom color codes for precise color matching
• Opacity Control: Adjust transparency (0-100%) for subtle effects
• Preset Colors: Access common colors for quick selection

Gradient Background (Pro Only)

Pro Feature: Create stunning gradient backgrounds with advanced directional control.

Gradients allow you to blend two or more colors smoothly across your announcement bar for a modern, eye-catching appearance.

Background Image (Pro Only)

Pro Feature: Upload custom background images to create unique, branded announcement bars.

Add a background image to your announcement bar for a fully custom look that matches your brand identity.

• Image Upload: Upload PNG, JPG, or GIF files (recommended: max 2MB for performance)
• Cover Mode: Image scales to cover the entire bar, maintaining aspect ratio (some content may be cut off)
• Contain Mode: Image scales to fit within the bar while maintaining aspect ratio (may show empty space)
• Auto Mode: Image displays at its original size (centered)
• Overlay Options: Add a semi-transparent overlay to ensure text readability over images

Configuring Backgrounds

1. Navigate to the Design & Styling section
2. Click on the Background panel
3. Select your background type:
   • Solid Color (Free) - Choose a single color
   • Gradient (Pro) - Select a direction and two colors
   • Image (Pro) - Upload an image and choose fit mode
4. Adjust opacity or overlay settings if applicable
5. Preview your changes and click Save

Typography

Control how your message text appears with comprehensive typography options.

Font Family

Choose from 6 professionally selected font families:

• System Sans-serif: Clean, modern, highly readable (default)
• Georgia: Classic serif font, elegant and traditional
• Courier: Monospace font, technical or code-like appearance
• Comic Sans: Casual, playful appearance (use sparingly)
• Trebuchet: Rounded sans-serif, friendly and approachable
• Palatino: Sophisticated serif font, premium feel

Font Weight and Size

Text Alignment

• Left: Text aligns to the left edge of the bar
• Center: Text centers horizontally (most common for announcements)
• Right: Text aligns to the right edge of the bar

Configuring Typography

1. In the Design & Styling section, locate Typography
2. Select a Font Family from the dropdown
3. Set the Font Weight (300-700) for text thickness
4. Set the Font Size (12-32px) for text scale
5. Choose Text Alignment (left, center, or right)
6. Adjust text color using the color picker (essential for readability)
7. Preview changes and click Save

Spacing

Control the dimensions and internal spacing of your announcement bar for perfect layout.

Bar Height

• Range: 40px - 200px
• Default: 60px
• Considerations:
  • Minimum 40px ensures button clickability on mobile
  • 40-60px for compact bars
  • 60-80px for standard announcements
  • 80-120px for feature-rich or image-heavy bars
  • 120px+ for spacious, prominent announcements

Padding

Control space between the bar edges and content on all four sides.

CTA Button Styling

Customize the appearance and behavior of your call-to-action button.

Button Colors

Button Typography

• Font Size: Customize button text size (typically 12-16px)
• Font Weight: Make button text bold (600) or regular (400)
• Letter Spacing: Add space between letters for emphasis

Button Styling Options

• Border Radius: Round the button corners (0-50px)
• Border Width: Add a border around the button (0-3px)
• Padding: Adjust internal button spacing
• Min-Width: Set minimum button width for consistency

Configuring CTA Button Styling

1. Navigate to Design & Styling and find the CTA Button Styling section
2. Set colors:
   • Choose background color (contrast with bar background)
   • Choose text color (contrast with button background)
   • Set hover colors for interactive feedback
3. Configure typography:
   • Set font size (14-16px recommended)
   • Choose font weight (bold recommended)
4. Set shape:
   • Border radius for rounded corners
   • Border width and color if desired
5. Adjust padding for comfortable button spacing
6. Preview and save changes

Close Button Styling

Customize the appearance of the close button (if enabled in your bar).

Close Button Colors

• Color: Default color of the close button
• Hover Color: Color when user hovers over the close button
• Background: Optional background for the button icon (transparent by default)

Close Button Sizing

• Icon Size: Size of the X or close icon
• Button Size: Overall clickable area of the close button

Close Button Appearance

• Font Weight: Thickness of the close icon
• Border Radius: Round the button for a softer appearance
• Opacity: Make the close button subtle with reduced opacity

Box Shadow

Pro Feature: Add depth and dimension to your announcement bar with custom box shadows.

Box shadow creates a shadow effect beneath or around your announcement bar for a elevated, modern look.

Box Shadow Examples

• Subtle Shadow: Offset-Y: 2px, Blur: 4px, Spread: 0px, Color: rgba(0,0,0,0.1)
• Prominent Shadow: Offset-Y: 4px, Blur: 8px, Spread: 0px, Color: rgba(0,0,0,0.15)
• Directional Shadow: Offset-X: 4px, Offset-Y: 4px, Blur: 8px, Spread: 0px, Color: rgba(0,0,0,0.1)
• No Shadow: Set blur radius to 0 or disable shadow entirely

Custom CSS (Pro Only)

Pro Feature: Advanced users can write custom CSS to achieve any design possible.

The custom CSS editor allows you to add advanced styling beyond the built-in options. You have full access to style your announcement bar with CSS.

CSS Selectors Available

Custom CSS Example

Add animation to your bar:

.hashbar-bar {
  animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

Using Custom CSS

1. Navigate to Design & Styling section
2. Scroll to the Custom CSS area (Pro only)
3. Click in the code editor
4. Write your CSS using the available selectors
5. Use syntax highlighting for readable code
6. Preview changes in real-time
7. Click Save to apply custom CSS

Custom CSS Best Practices

• Specificity: Use specific selectors to avoid conflicts
• Performance: Avoid expensive animations (use transforms instead of left/top)
• Readability: Format code with proper indentation
• Vendor Prefixes: Include prefixes for browser compatibility (-webkit-, -moz-, etc.)
• Testing: Test on different browsers and devices
• Validation: Ensure CSS is valid; invalid rules will be ignored

Design Best Practices

• Contrast: Ensure text color has sufficient contrast with background for readability
• Consistency: Use colors that match your brand identity
• Responsive: Test your design on mobile devices
• Focus CTA: Make the button stand out with contrasting colors
• Minimal Clutter: Avoid too many colors or effects; keep design clean
• Button Usability: Ensure buttons are large enough to click on mobile (min 40x40px)
• Loading Performance: Keep background images under 2MB

Related Documentation

• Templates - Browse pre-designed styles
• Content & Messaging - Customize message text
• Position & Display - Control bar placement