# \#custom-css **URL:** https://community.glideapps.com/tag/custom-css/6.md [Latest](https://community.glideapps.com/latest.md) · [Categories](https://community.glideapps.com/categories.md) · [Tags](https://community.glideapps.com/tags.md) --- ## [Alter Submit Button in a Form Container](https://community.glideapps.com/t/alter-submit-button-in-a-form-container/87024)
**Author:** [@mustangTC](https://community.glideapps.com/u/mustangTC)\ **Replies:** 8\ **Last updated:** [May 9, 2026, 6:13am UTC](https://community.glideapps.com/t/alter-submit-button-in-a-form-container/87024 "2026-05-09T06:13:34Z")
Good morning hivemind! Can one of you technical wizards tell me if it is possible to change the word “Submit” on the form container submit button to say something else like “Next Section”? Maybe some CSS trickery or som… --- ## [Container Backgrounds CSS](https://community.glideapps.com/t/container-backgrounds-css/86984)
**Author:** [@Etu-IT](https://community.glideapps.com/u/Etu-IT)\ **Replies:** 10\ **Last updated:** [May 6, 2026, 10:34pm UTC](https://community.glideapps.com/t/container-backgrounds-css/86984 "2026-05-06T22:34:35Z")
Hi Glide Community, I am using the following custom CSS to get a teal background around the items in a collection: .customcontainerborder div\[class\*=“pages-component-renderer\_\_\_StyledDiv7”\] { border-right: 2px solid #… --- ## [✨ Transforming Glide Inputs with CSS](https://community.glideapps.com/t/transforming-glide-inputs-with-css/87011)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 3\ **Last updated:** [May 5, 2026, 1:16pm UTC](https://community.glideapps.com/t/transforming-glide-inputs-with-css/87011 "2026-05-05T13:16:22Z")
You can transform native Glide inputs into a Compact Inline Underline Input System with Adaptive Labels, making your forms more space-efficient, structured, and visually cleaner. This system is fully compatible with all… --- ## [How Do I Hide This Button? CSS? Rich Text?](https://community.glideapps.com/t/how-do-i-hide-this-button-css-rich-text/86793)
**Author:** [@mustangTC](https://community.glideapps.com/u/mustangTC)\ **Replies:** 2\ **Last updated:** [April 2, 2026, 6:29pm UTC](https://community.glideapps.com/t/how-do-i-hide-this-button-css-rich-text/86793 "2026-04-02T18:29:41Z")
How do I hide this close button from the overlay screen? I don’t want users to use it, and instead they should use a different custom button to cancel the activity. If they use the Close button instead then it won’t “voi… --- ## [🌟 Custom Icons for Rating Component](https://community.glideapps.com/t/custom-icons-for-rating-component/86712)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 1\ **Last updated:** [March 25, 2026, 11:08am UTC](https://community.glideapps.com/t/custom-icons-for-rating-component/86712 "2026-03-25T11:08:31Z")
You can replace the default star shape with other icons using CSS and the d: path() property. This preserves the original rating behavior, including dynamic and partial fills. :bullseye: Icon Examples 1. :heart: Hear… --- ## [How to create a floating button](https://community.glideapps.com/t/how-to-create-a-floating-button/72457)
**Author:** [@abdo](https://community.glideapps.com/u/abdo)\ **Replies:** 35\ **Last updated:** [March 4, 2026, 5:06am UTC](https://community.glideapps.com/t/how-to-create-a-floating-button/72457 "2026-03-04T05:06:03Z")
if you need top floating buttons in your apps … it is very simple to create them using custom css .floating { position: -webkit-sticky; position: sticky; top: 10px; z-index: 9999; } you can … --- ## [🟦 🟩 🟪 How to Color Rows in a Table Collection](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 5\ **Last updated:** [March 2, 2026, 4:04am UTC](https://community.glideapps.com/t/how-to-color-rows-in-a-table-collection/86512 "2026-03-02T04:04:58Z")
There are multiple ways to color rows inside a Table Collection. To indicate row status (e.g., High, Medium, Low), you can use one of three approaches: Button column (aria-label) — reads the button’s aria-label to det… --- ## [CSS to improve List Collection → Card Style](https://community.glideapps.com/t/css-to-improve-list-collection-card-style/86498)
**Author:** [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Replies:** 1\ **Last updated:** [February 28, 2026, 11:39am UTC](https://community.glideapps.com/t/css-to-improve-list-collection-card-style/86498 "2026-02-28T11:39:11Z")
I always wished the “card” style of list collections had truly separated cards per list item. I discovered that if add a css class (eg. cardlist) and custom styling (below) to your list collection, you can achieve the l… --- ## [📊 CSS Hack: Dynamic Coloring Stacked Bar Chart](https://community.glideapps.com/t/css-hack-dynamic-coloring-stacked-bar-chart/85853)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 1\ **Last updated:** [January 2, 2026, 12:56pm UTC](https://community.glideapps.com/t/css-hack-dynamic-coloring-stacked-bar-chart/85853 "2026-01-02T12:56:52Z")
This demonstration shows how CSS can be pushed beyond static styling to create conditional visual behavior in stacked bar charts, where each bar consists of multiple stacked layers (bottom → very top). In this approach,… --- ## [💡 Using notranslate to Prevent Automatic Translation in Specific Components](https://community.glideapps.com/t/using-notranslate-to-prevent-automatic-translation-in-specific-components/85797)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 0\ **Last updated:** [December 26, 2025, 8:49am UTC](https://community.glideapps.com/t/using-notranslate-to-prevent-automatic-translation-in-specific-components/85797 "2025-12-26T08:49:07Z")
I recently remembered a simple but very useful trick: adding the notranslate class to a component’s custom class. This helps prevent automatic translators from modifying text inside that component, including text expose… --- ## [🖱️ Auto-Expand the Sidebar on Hover](https://community.glideapps.com/t/auto-expand-the-sidebar-on-hover/85787)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 2\ **Last updated:** [December 24, 2025, 4:43pm UTC](https://community.glideapps.com/t/auto-expand-the-sidebar-on-hover/85787 "2025-12-24T16:43:46Z")
:christmas\_tree: Season’s greetings, Glide community! Quick CSS tweak for Glide users who want more screen space without losing sidebar access. If you prefer a cleaner workspace but still want instant access to the full… --- ## [Allow “CSS Class Name” Field to Be Bound to Data](https://community.glideapps.com/t/allow-css-class-name-field-to-be-bound-to-data/84977)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 3\ **Last updated:** [December 24, 2025, 12:53am UTC](https://community.glideapps.com/t/allow-css-class-name-field-to-be-bound-to-data/84977 "2025-12-24T00:53:16Z")
I suggested this idea back when Glide.app switched to Glide.page, but I can’t seem to find that old thread anymore. It would be awesome if the “CSS Class” field could be bound to a column in the Glide Table — this would… --- ## [🛠️CSS Hack: Custom Icons](https://community.glideapps.com/t/css-hack-custom-icons/84586)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 15\ **Last updated:** [December 14, 2025, 10:54pm UTC](https://community.glideapps.com/t/css-hack-custom-icons/84586 "2025-12-14T22:54:30Z")
If you want to use your own SVG icons—on buttons, icons, or other elements—you can set your SVG as the element’s background and hide the original \ to avoid overlap. This lets you apply any custom icon with your pref… --- ## [🔥 Advanced CSS Hack: Dynamic CSS in Glide 3 - Badge Navigation via User Image URL Fragment](https://community.glideapps.com/t/advanced-css-hack-dynamic-css-in-glide-3-badge-navigation-via-user-image-url-fragment/85688)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 2\ **Last updated:** [December 14, 2025, 5:21am UTC](https://community.glideapps.com/t/advanced-css-hack-dynamic-css-in-glide-3-badge-navigation-via-user-image-url-fragment/85688 "2025-12-14T05:21:54Z")
No Richtext needed — everything runs on the avatar-URL fragment trick. CSS-only approach — UI reacts to hash fragments appended to the user avatar URL in the users table, displaying badge states accordingly. No extra HT… --- ## [🧠 CSS Hack: Dynamic CSS in Glide](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 13\ **Last updated:** [December 11, 2025, 12:30am UTC](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide/85080 "2025-12-11T00:30:22Z")
If you’ve been waiting for this feature request “CSS Class Name” Field bound to data, it’s still unclear when it will arrive. In the meantime, here’s a workaround that turns the Rich Text component into a CSS-controlled… --- ## [Change background color in Custom collections](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682)
**Author:** [@Federico\_Fleitas](https://community.glideapps.com/u/Federico_Fleitas)\ **Replies:** 8\ **Last updated:** [December 10, 2025, 5:07pm UTC](https://community.glideapps.com/t/change-background-color-in-custom-collections/85682 "2025-12-10T17:07:31Z")
Hello good, I am doing a social network type project and I need to make a change when a button in a custom collection is clicked, I saw some CSS resources that change the background of the cards collection according to … --- ## [Data Grid Column Alignment](https://community.glideapps.com/t/data-grid-column-alignment/85621)
**Author:** [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\ **Replies:** 4\ **Last updated:** [December 5, 2025, 4:50pm UTC](https://community.glideapps.com/t/data-grid-column-alignment/85621 "2025-12-05T16:50:55Z")
I saw some posts about the inability to style a Data Grid but thought I would ask if anyone had a suggestion to center columns, specifically Boolean columns. I do already have a custom css on the data grid as a whole to… --- ## [🎉 $60 Discount for Publishing Your Glide App to Google Play & App Store!](https://community.glideapps.com/t/60-discount-for-publishing-your-glide-app-to-google-play-app-store/81479)
**Author:** [@nokib03](https://community.glideapps.com/u/nokib03)\ **Replies:** 11\ **Last updated:** [December 4, 2025, 5:22pm UTC](https://community.glideapps.com/t/60-discount-for-publishing-your-glide-app-to-google-play-app-store/81479 "2025-12-04T17:22:27Z")
Hello Gliders! :waving\_hand: We’re excited to offer an exclusive $60 discount for uploading your Glide app to the Google Play Store and Apple App Store! :collision: Use the code: GLIDE60 :date: Valid until: May 22, 20… --- ## [🔗 CSS Hack: Dynamic CSS in Glide 2 via URL Fragment](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide-2-via-url-fragment/85613)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 2\ **Last updated:** [December 4, 2025, 12:43pm UTC](https://community.glideapps.com/t/css-hack-dynamic-css-in-glide-2-via-url-fragment/85613 "2025-12-04T12:43:09Z")
Use image URL fragments as lightweight, reliable selectors. I previously shared :brain: CSS Hack: Dynamic CSS in Glide — a method relying on Rich Text injection — and also using attributes already available in Glide: ht… --- ## [Column Alignment Options on Data Grid](https://community.glideapps.com/t/column-alignment-options-on-data-grid/85622)
**Author:** [@Sean\_Page](https://community.glideapps.com/u/Sean_Page)\ **Replies:** 1\ **Last updated:** [December 3, 2025, 10:37pm UTC](https://community.glideapps.com/t/column-alignment-options-on-data-grid/85622 "2025-12-03T22:37:19Z")
I would be nice to have the option to pick a Column alignment when using the Data Grid component. You could allow the alignment here in the DESIGN section or alternatively allow html styling within the ‘Display as’ b… --- ## [🔀 CSS Hack: Toggling Between Top Bar and Side Bar](https://community.glideapps.com/t/css-hack-toggling-between-top-bar-and-side-bar/84463)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 3\ **Last updated:** [November 14, 2025, 1:35pm UTC](https://community.glideapps.com/t/css-hack-toggling-between-top-bar-and-side-bar/84463 "2025-11-14T13:35:21Z")
Sharing a little CSS magic I’ve been working on! :sparkles: What if you could switch between a top navigation bar and side bar dynamically in Glide? --- ## [🧭 CSS Hack: Custom Navigation Icon](https://community.glideapps.com/t/css-hack-custom-navigation-icon/85296)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 0\ **Last updated:** [November 10, 2025, 3:46am UTC](https://community.glideapps.com/t/css-hack-custom-navigation-icon/85296 "2025-11-10T03:46:51Z")
This post expands on :hammer\_and\_wrench: CSS Hack: Custom Icons — showing how to apply custom SVG or image-based icons inside navigation buttons across different layouts (top-bar, sidebar, and mobile navigation). This g… --- ## [🎨 CSS Hack: Role-Based App Themes](https://community.glideapps.com/t/css-hack-role-based-app-themes/85185)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 2\ **Last updated:** [November 1, 2025, 6:45am UTC](https://community.glideapps.com/t/css-hack-role-based-app-themes/85185 "2025-11-01T06:45:43Z")
Here’s a simple dynamic CSS trick to make your Glide app’s theme automatically change based on user roles — like admin, member, vip or banned. By declaring global CSS variables and using the :is() selector to shorten ru… --- ## [🌘 CSS Hack: Switching Dark - Light Environment Mode](https://community.glideapps.com/t/css-hack-switching-dark-light-environment-mode/84978)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 0\ **Last updated:** [October 19, 2025, 10:17am UTC](https://community.glideapps.com/t/css-hack-switching-dark-light-environment-mode/84978 "2025-10-19T10:17:19Z")
This CSS trick successfully switches between Dark and Light environments inside Glide — tested directly in the DOM (not in the custom CSS field). I’m not sharing the full code here since it’s quite long, but the concept … --- ## [Vertical Action Row (Custom CSS)](https://community.glideapps.com/t/vertical-action-row-custom-css/84969)
**Author:** [@rayo](https://community.glideapps.com/u/rayo)\ **Replies:** 4\ **Last updated:** [October 19, 2025, 3:43am UTC](https://community.glideapps.com/t/vertical-action-row-custom-css/84969 "2025-10-19T03:43:11Z")
Vertical Action Row Reorients the Action Row layout vertically, placing buttons below the text and left-aligned for better clarity when text is long. /\* Vertical Layout for Action Row \*/ .lc-vertical-action-row div… --- ## [🖥️ CSS Hack: Custom Screen Size Control](https://community.glideapps.com/t/css-hack-custom-screen-size-control/84552)
**Author:** [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Replies:** 3\ **Last updated:** [September 23, 2025, 6:57am UTC](https://community.glideapps.com/t/css-hack-custom-screen-size-control/84552 "2025-09-23T06:57:18Z")
Sharing another small CSS tweak I’ve been experimenting with :sparkles: With this trick you can freely set different app widths on desktop or define a default width when the app first loads. #page-root:has(.unique-sc… --- ## [LessCode Design Library (Custom CSS)](https://community.glideapps.com/t/lesscode-design-library-custom-css/84186)
**Author:** [@rayo](https://community.glideapps.com/u/rayo)\ **Replies:** 3\ **Last updated:** [September 19, 2025, 12:29pm UTC](https://community.glideapps.com/t/lesscode-design-library-custom-css/84186 "2025-09-19T12:29:07Z")
Hey everyone! Excited to share a side project we recently started working on. LessCode Design Library A growing collection of custom CSS snippets to elevate your Glide apps with beautiful, functional UI. Free + Pro… --- ## [Custom Search Box using Custom CSS](https://community.glideapps.com/t/custom-search-box-using-custom-css/84339)
**Author:** [@rayo](https://community.glideapps.com/u/rayo)\ **Replies:** 2\ **Last updated:** [September 12, 2025, 5:30pm UTC](https://community.glideapps.com/t/custom-search-box-using-custom-css/84339 "2025-09-12T17:30:51Z")
Hey everyone :waving\_hand: Just built a custom search bar that looks and feels exactly like Glide’s built-in collection search but with a little bit more flexibility. Works with Tables and Glide Big Tables Lets yo… --- ## [Customise Card Component](https://community.glideapps.com/t/customise-card-component/84232)
**Author:** [@kyem](https://community.glideapps.com/u/kyem)\ **Replies:** 2\ **Last updated:** [September 7, 2025, 9:39pm UTC](https://community.glideapps.com/t/customise-card-component/84232 "2025-09-07T21:39:07Z")
Hello, im looking to customise the container card variation component under the layout tab and also card designs for different things like the card list or table list under the collections tab --- ## [Hide the mobile tab bar on specific screens only (not globally)](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984)
**Author:** [@JB2806](https://community.glideapps.com/u/JB2806)\ **Replies:** 8\ **Last updated:** [August 29, 2025, 9:52pm UTC](https://community.glideapps.com/t/hide-the-mobile-tab-bar-on-specific-screens-only-not-globally/83984 "2025-08-29T21:52:04Z")
Hi everyone, I’m using Glide Apps with bottom navigation (the mobile tab bar). I found the CSS below (thank you @thinhDinh), which successfully hides the tab bar — but it hides it on every screen: div\[class\*="mobile-ta… [Next page](https://community.glideapps.com/tag/custom-css/6.md?match_all_tags=true&page=1&tags%5B%5D=custom-css)