How Style Works

How Style Works

Overview

    Customize the look and feel of your mobile app — no update request needed. Your app is an extension of your brand, and now you can style it like one. With the App Studio  Style tool, you can update your logo, background, brand colors, and layout — and see the changes live in your app immediately. No wait, no request — just instant updates.

    When & Why to Use Style

    1. Rebranding or logo updates
    2. Seasonal refreshes (spring/summer/fall/winter)
    3. Testing new colors or imagery

    Tutorial Video

    This short walkthrough will show you exactly how to customize your app style from start to finish.

    [COMING SOON]

    What to Expect

    You'll be able to update: 
    1. Your logo
    2. Background (color or image)
    3. Primary, secondary, and action colors
    4. Variables like card radius and title and swiper dot colors

    Step-by-Step: Styling Your App

    🔔 Before You Start

    The Gallus Customer Service team usually takes care of the initial setup, but you’re welcome to make adjustments anytime you want! It's important to note that any changes made here — including your logo, background image or color, and more — go live immediately in your app. Once you hit SAVE, your updates will be visible to all users right away. Make sure everything looks just right before saving! 

    🌐 Step 1: Log in to Gallus Manager

    1. Log in to the Gallus Manager Dashboard 

    1. From the Quick Start page, click App Studio (starts on Home Screen)
      OR
       under Customize App, click Style
    This will open the App Studio in a new tab window. 

    1. Drag and drop or click to upload your logo
    2. Recommended Size: 560 width x 230 height (must build in padding) 
      1. Click here for a Canva template 
    3. Logo must be transparent and a png
    4. Choose whether to hide or show a white gradient behind your logo 
    IdeaPro Tip: If you’re setting up Style for the first time, we recommend walking through all customization options — logo, background, colors, and variables — before hitting Save. This ensures your app has a completed look before your updates go live. 

    🎨 Step 3: Set Your Background Image or Color



    1. Use a solid background color by skipping the image upload
    2. Upload your own background image — this overrides any selected color 
    3. Browse and select from our stock photo library

    🎨 Step 4: Define Your Colors


    1. Load in your branding colors: 
      1. Primary Color: your apps 'main' color, title bar, footer menu, titles
      2. Secondary Color: used for accents, buttons, titles
      3. Action Color: used for buttons and some navigation menus
    Alert
    Heads Up: You have to type in your hex colors into the color picker in order to change them from the defaults. 
    We’ll automatically alert you if any color doesn’t meet accessibility contrast guidelines.
    IdeaPro Tip: Walk through all customization options before saving to ensure your app looks its best the moment updates go live.

    ✏️ Step 5: Fine-Tune Variables


    1. Adjust the Card Corner Radius on your content cards
      1. 0 = square, 6px = default light radius, 12px = rounded corners, 30px = extra rounded
      2. We recommend staying under 40px to provide a great user experience
    2. Optional Overrides
      1. Block Title Color and Swiper Dot Color (used for sliders)
      2. These auto-adjust based on your selected background color, but you can override them if needed. 
    IdeaPro Tip: If you've gone through all customization options — logo, background, colors, and variables — and you are happy with the look and feel of your App now is the time to SAVE and let your customers view the changes! 

    ⚠️ Advanced: Custom CSS

    1. If you’re comfortable with advanced styling, you can input Custom CSS to override colors and more.
    2. Learn more about how Custom CSS in Style works. 
    Custom CSS is powerful, but use it with caution — incorrect code may cause your app to display incorrectly.
      • Related Articles

      • How Home Screen Works

        Overview The Home Screen is where users land when they open your app. Use the App Studio– Home Screen tool to create a layout that matches your brand, highlights key content and features, shows seasonal information, and helps guide your users where ...
      • How Styles Custom CSS Works

        Overview Take full control over the look and feel of your Home Screen with Custom CSS, available in Style. Whether you want to make some minor tweaks or apply additional design touches, Custom CSS gives you the flexibility to go beyond the standard ...
      • How The Gallus Monthly Tournament Series Works

        Before You Begin Make sure you have an adequate understanding of the Scorecard & GPS by reading our How The Virtual Caddie Works article. What's The Point? Users of your app are constantly looking for ways to interact with each other. One of the most ...
      • How The Scorecard And GPS Works

        What's The Point? The Scorecard & GPS section of a Gallus Golf custom-branded mobile app allows users to keep score in their app, view interactive hole renderings with GPS yardage, and post their score when they're finished. If you're interested in ...
      • How Canva Works

        What's The Point? Designing content within a Gallus Golf mobile app often requires visuals in the form of images that are uploaded directly to the dashboard. Canva is a free online tool (with a paid tier if you'd like access to more features) that ...