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.



    Video Timestamp: 

    Intro -- 0:13
    Add Logo -- 0:37
    Background Image/Color -- 1:41
      - Color Picker -- 2:04
      - Stock Image Picker -- 2:15
    Colors -- 2:45
    Variables -- 3:19
    Custom CSS - 3:57

    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 App Onboarding Works

        Overview Make a great first impression — every time. With App Onboarding, you can customize what users see the very first time they open your app. Update your welcome image and logo, apply a white gradient (or not), and tailor the push permissions ...

      • How App Onboarding (with Subscriptions Enabled) Works

        What's The Point? Every brand has an identity, so it's vital that colors and logos remain consistent across all platforms. Gallus app admins have the ability to go into their Gallus Admin Dashboard to update the overall look and feel of their mobile ...

      • 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 ...