gettickr
Home
Features
PricingHelp
Getting Started
What is gettickr.app?
Free vs. Premium
Create Account
Timer Configuration
Create Countdown (Duration)
Create CountTo (Date)
Customize Design
Preview vs. Renderer
Save & Manage Timers
Remote Control
Streaming Integration
Streaming Platforms Overview
OBS Studio Integration
Streamlabs Integration
XSplit Integration
Website Integration
Website Integration Overview
iFrame Integration
WordPress Integration
Shopify Integration
Wix / Squarespace
Custom HTML Websites
Advanced Features
Timer State & Persistence
Free vs. Premium Timers
FAQ & Troubleshooting
Common Questions
Known Issues
Contact Support
Help Center
/
Timer Configuration
/
Customize Timer Design

Table of Contents

Accessing Design OptionsUnderstanding Timer ElementsShow or Hide the TitleColor CustomizationFont SelectionLayoutSize and DimensionsDesign Best PracticesNext Steps

Customize Design

One of the most powerful features of gettickr.app is the ability to fully customize how your timer looks. Adjust colors, fonts, sizes, and layouts to create a countdown that perfectly matches your brand or aesthetic.

Free Feature
Full design customization is available in both Free and Premium accounts. Create professional-looking timers without any restrictions!

Accessing Design Options

Navigate to the Styles tab in the editor to customize your timer's appearance. The live preview updates in real-time as you make changes, so you can see exactly how your timer will look before embedding it.

Tip
The Styles tab is organized by timer elements. Each element (background, title, countdown numbers) can be styled independently for sophisticated designs.

Understanding Timer Elements

Your timer consists of several elements that can be customized:

ElementPurposeCustomizable Properties
BackgroundOverall appearance and colorColor only
TitleText above countdownVisibility, Font Size, Color, Font Family, Weight, Style
Timer NumbersThe actual countdown displayFont Size, Color, Font Family, Weight, Style

Show or Hide the Title

In the General tab, you'll find the "Show title" toggle, which lets you show or hide the timer's title. When the title is hidden, only the countdown numbers are displayed — without any text above them.

This is especially useful when:

  • You want to use the timer as a numbers-only overlay in your stream
  • The title is already displayed elsewhere in your OBS scene or on your website
  • You prefer a minimalist design without additional text
Tip
The "Show title" toggle is located in the General tab below the title input field. Changes are instantly visible in the live preview.

Color Customization

Background Colors:

  • Dark backgrounds work well for stream overlays
  • Light backgrounds suit promotional website banners
  • Black backgrounds appear transparent in OBS and other programs

Timer Number Colors:

  • Use high contrast for readability (light on dark, dark on light)
  • Match your brand colors for consistency
  • Consider color psychology (red = urgency, blue = calm, green = positive)

Title and Label Colors:

  • Create visual hierarchy with different colors
  • Use brand primary colors for titles
  • Use complementary colors for countdown numbers
Tip
Always ensure sufficient contrast between text and background for readability. Test on both desktop and mobile screens!

Font Selection

Choose fonts that match your brand personality:

Font Styles:

  • Sans-serif (modern, clean): Best for professional countdowns
  • Display fonts (decorative): Great for creative or promotional timers
  • Monospace (technical): Perfect for gaming or tech-focused designs

Font Sizing:

  • Large, bold numbers for maximum visibility
  • Proportional title text for balanced composition
  • Consider viewing distance (stream overlay vs. website banner)
Warning
Custom fonts may take a moment to load on slow connections. System fonts load instantly but offer less design flexibility.

Layout

Element Arrangement:

You can change the order of title and countdown elements (title on top or countdown on top).

Size and Dimensions

Common Timer Sizes:

Use CaseRecommended SizeNotes
OBS Full Screen1920x1080 pxMatch stream resolution
OBS Overlay Corner300-500 px wideCompact, non-intrusive
Website Hero BannerFull widthResponsive design
Website Sidebar250-350 px wideFits standard sidebars
Tip
Use percentage-based widths for responsive designs on websites. Fixed pixel sizes work best for OBS overlays.

Design Best Practices

Readability First:

  • High contrast between text and background
  • Font sizes large enough for quick reading
  • Simple, uncluttered layouts

Brand Consistency:

  • Match your existing brand colors
  • Use fonts from your brand guidelines
  • Maintain consistent visual style across all timers

Purpose-Driven Design:

  • Urgent countdown (flash sale) = Red, bold, large
  • Calm countdown (event start) = Blue, elegant, moderate
  • Playful countdown (stream break) = Bright colors, fun fonts
Tip
Create multiple saved timer designs for different purposes: breaks, events, sales, etc. Premium accounts can save unlimited timer configurations!

Next Steps

  • Preview vs. Renderer - Understand the different viewing modes
  • Save & Manage Timers - Save your design for reuse
  • OBS Integration - Add your timer to streams
2026|Made by
ChangelogLegal NoticePrivacy PolicyCookie PolicyTerms