openBuild
  • Introduction
    • Introduction
    • The Framework
    • The Library
    • Release Notes
  • Core Concepts
    • Bubble vs openBuild
    • Responsive Design
      • Repeating groups
      • Advanced Responsiveness
    • Styles
      • Typography
      • Colors
      • Groups & Box Shadow
      • Inputs
      • Buttons
      • Style Variations
      • Changing styles
      • Custom CSS
    • Pages
      • index
      • base-menu
      • base-top
      • base-ribbon
      • base-mobile
      • admin
      • verify
      • styleguide
      • terms
      • login
      • reset_pw
      • privacy
      • 404
      • Menu
      • Base Layouts
  • WORKING WITH the framework
    • Getting Started
    • Navigation
      • Go to page
      • Navigation through custom states
      • Navigation through URL parameters
      • Navigation through URL parameters with Option sets
    • Data & Workflows
      • Custom States
      • Custom Events
      • Working with Reusables
      • CRUD
      • Source Popup
      • Backend Workflows
    • Users and Roles
    • Signup, Login, Password reset
    • Security & Privacy
      • Authenticating endpoints
    • Transactional Email
      • Setup Sendgrid
      • Setup Postmark
    • Alerts and Confirmations
    • Customization
    • Best Practices
      • Syntax
      • Color Coding
  • openBuild Library
    • Chrome Extension
  • Framework Elements
    • Menus
    • Option sets
    • Plugins
    • API Connector
    • User Access Management
    • CRUD Floating Group
    • CRUD Popup
    • Data Table
    • Security Redirect
    • Mail management
    • User Settings
    • Header & Footer
Powered by GitBook
On this page
  1. Core Concepts
  2. Styles

Custom CSS

PreviousChanging stylesNextPages

Last updated 2 years ago

This CSS is added via openBuild Toolkit plugin which links to CDN containing the file. You can download the plugin for free or adding it via plugin marketplace.

<style>

/* padding for dropdowns */
    
.dropdown {
    padding-left: 6px;
    }    
    

/* overflow for RGs */

#overflow {
overflow: visible !important;
}
    
    
/* removing inset shadow */
    
.iziToast:after {
box-shadow: rgba(0, 0, 0, 0.00) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -2px;!important;
}
    
 
/*  wrapping RG width to enable tag-like look */
    
#rg-wrapped{
        height: auto !important;
        min-height: auto !important;
        display: flex;
        flex-wrap: wrap;
    }

/* Scroll */
    
    
#scrollHorizontal {
    overflow-x: auto !important;
    }
    
#scrollVertical {
    overflow-y: auto !important;
    }

    
/* Full page height */
    
#fullHeight {
    height: 100vh !important;
    }
#demiHeight {
    height: 80vh !important;
    }

#rowreverse {
    flex-direction: row-reverse !important;
    }
    
#colreverse {
    flex-direction: column-reverse !important;
    }


/* openBuild Style Generator */

iframe#openpanel {
    height: 100vh;
    width: 400px;
    position: fixed;
    top: 0px;
    right: -400px;
    z-index: 2147483647;
    transition: all 0.8s ease 0;
    border: 1px solid #f0f0f0;
}

img#toggle {
    height: 35px;
    width: 35px;
    position: fixed;
    top: 20px;
    bottom: 20px;
    z-index: 2147483647;
    z-index: 2147483646;
    cursor: pointer;
}


#obBtn {
    height: 50px;
    width: 172px;
    position: absolute;
    /* align-self: center; */
    right: 192px;
    top: 32px;
    border-radius: 5px;
}

#sticky {
    position: sticky !important;
    }

</style>
here