How Custom CSS in Style Works

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

πŸ”§ What Is Custom CSS?

Custom CSS (which stands for Cascading Style Sheets) is a way to override and change elements (blocks, cards, text) on your app's Home Screen looks (e.g., colors, sizes). It's ideal for advanced users or designers who want to fine-tune layout, typography, colors, spacing, and more.

πŸ•’ When & Why to Use Custom CSS in Style

When you want to tailor the visual identity of your app beyond standard settings. 

πŸ”” Before You Start

Warning
A Quick Warning Before You Dive In
Custom CSS gives you powerful control β€” but with great power comes great responsibility.
If you choose to edit or add your own CSS:
  1. It can override default styles in ways that may not be immediately obvious.
  2. Mistakes in CSS can cause layout issues, broken visuals, or even make parts of your app unreadable or unusable.

🎨 What You Can Customize

Using CSS, you can target and style:



CSS Target
Visual Example
#dsgn-header
(Modify the Header Background)

Code Example: 
  1. #dsgn-header { background-color: pink; }
For example, this means the header background will be pink. 

Note: Some of these changes are uncommon and not recommended.  


#dsgn-header .menu
(Modify the Hamburger Menu / Side Menu Icon)

Code Example:
  1. #dsgn-header .menu { color: black; }
For example, this means the side menu will be black. 

Note: If you're using a light color home screen image or color as your background you should consider change the side menu to a darker color so your customers will see it. 


#dsgn-header .menu
(Modify the Side Menu Icon Background Color)

Code Example:
  1. #dsgn-header .menu { background-color: orange; }
For example, this means the background of the side menu will be orange. 

Note: Some of these changes are uncommon and not recommended. 

#dsgn-header .user
(Modify the Profile Icon)

Code Example: 
  1. #dsgn-header .user { color: purple; }
For example, this means the profile icon will be purple. 

Note: Some of these changes are uncommon and not recommended. 

#dsgn-header .user
(Modify the Profile Background Color)
  1. #dsgn-header .user { background-color: blue; }
For example, this means the background of the profile (circle) will be blue. 

Note: Your profile color is your primary color. Should you wish to have a different color you can override it. 

#dsgn-layout
(Modify the entire layout of the app)

Code Example:
  1. #dsgn-layout { padding: 20px; }
For example, this means I have increased the existing padding by 20 pixels away from the edges of the screen for the entire home screen layout. 

Note: Some of these changes are uncommon and not recommended. 


#dsgn-container
(Modify the layout of the app less the Header) 

Code Example:
  1. #dsgn-container { padding: 20px; }
For example, this means I have increased the existing padding by 20 pixels away from the edges of the screen for the blocks containers. You can see this did not affect the profile icon.  

Note: Some of these changes are uncommon and not recommended. 

#dsgn-blocks
(Modify the blocks of the app less the Logo and Header)

Code Example:
  1. #dsgn-blocks { background-color: pink; }
For example, this means the background color for all the blocks will be pink.  

Note: Some of these changes are uncommon and not recommended. 

.dsgn-list-block
(Modify the entire list block Title included)

Code Example:
  1. .dsgn-list-block { background-color: pink; padding-bottom: 40px; }
For example, this means the background color of list blocks will be pink and the padding for the bottom has increased to 40 pixels. 

Note: Some of these changes are uncommon and not recommended. If you want more space between blocks you could consider adding additional padding. 

.dsgn-list-block-title
(Modify list block titles)

Code Example:
  1. .dsgn-list-block-title { font-size: 24px; color: pink; }
For example, this means that the title is now 24 pixels and the color is pink. 

Note: You could increase the font-size, color, text alignment for all List Block Titles. 


.dsgn-list 
(Modify the list blocks, does not include the title)

Code Example: 
  1. .dsgn-list { background-color: pink; }
For example, this means the 'list' part of a block's background is pink. 

Note: Some of these changes are uncommon and not recommended.  

.dsgn-card-block
(Modify cards) 

Code Example:
  1. .dsgn-card-block { background-color: pink; text-align: center; }
For example, this means that the background color for all cards is pink and all text is aligned center. 

Note: You can change all cards (e.g., have them all show the text aligned 'center') 

.dsgn-card-block-title
(Modify cards block title) 

Code Example: 
  1. .dsgn-card-block-title { font-size:24px; color: pink; }
For example, this means that the card block title's text size is 24 pixels and the color is pink. 

Note: You could increase the font-size, color, text alignment for all Card Block Titles. 


.dsgn-card
(Modify card, not block, pieces)

Code Example:
  1. .dsgn-card { background-color: red; text-align: center; }
For example, this means that the card's background color is red and the card's text is aligned center. 

Note: You could change the background color or make it transparent, text alignment for all Cards. Just remember this change affects all cards. 



.dsgn-card-title
(Modify card title)

Code Example:
  1. .dsgn-card-title { font-size: 22px; color: red;  }
For example, this means that the card's title text size is 22 pixels and the color is red. 

Note: You could increase the font-size, color, text-alignment for all Card Titles. Should you decide to make your card background color something other than 'white' you would want to consider updating your card font colors to ensure accessibility. 

.dsgn-card-description 
(Modify card description)

Code Example: 
  1. .dsgn-card-description { font-size: 18px; color: red; }
For example, this means that the card's description text size is 18 pixels and the color is red. 

Note: You could increase the font-size, color, text-alignment for all Card Descriptions. Should you decide to make your card background color something other than 'white' you would want to consider updating your card font colors to ensure accessibility. 


Example using the 'Wrapped List' with card description toggled off using CSS to override the card background color, text-alignment, and text color. 

Code Example:
  1. .dsgn-card { background-color: #037CAD; text-align: center; }
  2. .dsgn-card-title { color: white; }
For example, this means that the card's background color is 'blue' (using the primary color value) and the text is aligned center and the card's title is white to ensure it is visible to customers. 

The card's background color was originally 'white' with the text left justified and the card's title's color was originally the primary color value. 



🧱 How It Works

  1. Step 1: Go to Style β†’ Custom CSS Tab
  2. Step 2: Write or Paste Your CSS
  3. Step 3: Hit Preview Button to view changes
  4. Step 4: Save; Immediately goes to your Live App

πŸ’‘Tips & Best Practices

  1. Use the provided class names β€” Gallus provides a standard set of classes or inspect your preview layout.
  2. Test across devices β€” Once saved, confirm styling looks good on different screen sizes (especially small screens).
  3. Don’t go overboard β€” Keep it lightweight for performance and maintainability.
  4. Back up your CSS β€” Save your work outside the system in case you want to revert or reuse.

⚠️ Things to Know

  1. Applies only to the Home Screen - Custom CSS currently affects only the Home Screen layout and elements, not other pages at this time.
  2. May be affected by updates - Core app structure may change occasionally. If you rely heavily on specific class names, we recommend checking after major updates.

    • Related Articles

    • How Custom Folders Works

      Overview Organize your app content your way. With Custom Folders, you can create flexible, folders pages that link to app pages, external URLs, or even another custom folder — making your app easy to navigate and uniquely yours. Formerly called App ...

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

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

    • How Featured News Works

      What's The Point? Facilities often need to communicate vital information about upcoming events or changes to procedure. Featured News provides a location for Gallus app admins to craft custom messaging about whatever they deem appropriate, through a ...