Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Admin / CSS_Universal – BuddyBoss + LifterLMS + Gravity Forms + GravityView stack
Duplicate Snippet

Embed Snippet on Your Site

CSS_Universal – BuddyBoss + LifterLMS + Gravity Forms + GravityView stack

- Global Gravity Forms style fixes
- Red error messages (shared brand red)
- Black/white confirmation messages
- GravityView table/list styling
- LifterLMS: remove FREE text, hide See Plans, BIG enroll button

ismail daugherty PRO
<10
Code Preview
Comments
css
/* ============================================================
   UNIVERSAL PORTAL CSS (GLOBAL)
   Applies to: BuddyBoss + LifterLMS + Gravity Forms + GravityView stack
   - Global Gravity Forms style fixes
   - Red error messages (shared brand red)
   - Black/white confirmation messages
   - GravityView table/list styling
   - LifterLMS: remove FREE text, hide See Plans, BIG enroll button
   ============================================================ */
/* ------------------------------
   1. Gravity Forms Base Layout
   ------------------------------ */
/* Normalize box-sizing inside Gravity Forms to prevent text cut-off */
.gform_wrapper * {
  box-sizing: border-box !important;
}
/* Core input/select/textarea styling for all Gravity Forms */
.gform_wrapper select,
.gform_wrapper .gfield select,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea {
  height: auto !important;
  min-height: 45px !important;
  padding: 10px 15px !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
}
/* Textareas: give them vertical room */
.gform_wrapper textarea {
  min-height: 100px !important;
}
/* Labels: clear, readable, consistent */
.gform_wrapper .gfield_label {
  margin-bottom: 8px !important;
  line-height: 1.4 !important;
  display: block !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
/* Option styling inside selects */
.gform_wrapper select option {
  padding: 8px !important;
  line-height: 1.5 !important;
  font-size: 15px !important;
}
/* Radio & checkbox labels */
.gform_wrapper .gfield_radio li label,
.gform_wrapper .gfield_checkbox li label {
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin-bottom: 5px !important;
}
/* File upload input */
.gform_wrapper .ginput_container_fileupload input[type="file"] {
  padding: 10px !important;
  line-height: 1.5 !important;
}
/* Responsive columns for Gravity Forms on small screens */
@media (max-width: 768px) {
  .gform_wrapper .gf_left_half,
  .gform_wrapper .gf_right_half,
  .gform_wrapper .gf_left_third,
  .gform_wrapper .gf_middle_third,
  .gform_wrapper .gf_right_third {
    width: 100% !important;
    float: none !important;
  }
  .gform_wrapper .gform_page .gform_page_fields {
    display: block !important;
  }
}
/* ------------------------------
   2. Validation Error Styles (Red)
   ------------------------------ */
/* Main validation error container (top of form) */
.gform_validation_errors {
  background: #E21833 !important;   /* Red background */
  border: 3px solid #9B1B30 !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin: 20px 0 !important;
  box-shadow: 0 5px 20px rgba(226, 24, 51, 0.3) !important;
}
/* Error title inside container */
.gform_validation_errors h2 {
  font-size: 28px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.3 !important;
}
/* Error summary text */
.gform_validation_errors .gform_submission_error {
  font-size: 20px !important;
  color: #ffffff !important;
  line-height: 1.5 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* Per-field error messages */
.gfield_error .validation_message,
.gfield .validation_message {
  font-size: 18px !important;
  color: #E21833 !important;
  font-weight: 600 !important;
  background: rgba(226, 24, 51, 0.1) !important;
  padding: 10px 15px !important;
  border-radius: 8px !important;
  margin-top: 8px !important;
  display: block !important;
  border: 2px solid #E21833 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  line-height: 1.4 !important;
}
/* Error field wrapper */
.gfield_error {
  background: rgba(226, 24, 51, 0.05) !important;
  border-radius: 10px !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
}
/* Error labels */
.gfield_error .gfield_label {
  color: #E21833 !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}
/* Error inputs */
.gfield_error input,
.gfield_error select,
.gfield_error textarea {
  border: 2px solid #E21833 !important;
  background: rgba(226, 24, 51, 0.05) !important;
  box-shadow: 0 0 5px rgba(226, 24, 51, 0.2) !important;
}
/* ------------------------------
   3. Confirmation Messages (Black / White)
   ------------------------------ */
/* Neutral confirmation styling */
.gform_confirmation_message {
  font-size: 18px !important;
  line-height: 1.5 !important;
  padding: 20px !important;
  background: #ffffff !important;   /* White background */
  color: #000000 !important;        /* Black text */
  border-radius: 10px !important;
  border: 1px solid #dddddd !important;
  margin: 20px 0 !important;
}
/* ------------------------------
   4. Accessibility & Focus States
   ------------------------------ */
/* Strong focus indication on form fields */
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  outline: 3px solid #000000 !important;           /* Black focus outline */
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08) !important;
}
/* Required field asterisk */
.gform_wrapper .gfield_required {
  color: #E21833 !important;
  font-weight: bold !important;
  font-size: 18px !important;
  margin-left: 3px !important;
}
/* Placeholder visibility */
.gform_wrapper ::-webkit-input-placeholder,
.gform_wrapper ::-moz-placeholder,
.gform_wrapper :-ms-input-placeholder,
.gform_wrapper ::placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}
/* High-contrast support */
@media (prefers-contrast: high) {
  .gfield_error .validation_message {
    border-width: 3px !important;
  }
  .gform_validation_errors {
    border-width: 4px !important;
  }
}
/* ------------------------------
   5. Mobile Responsiveness
   ------------------------------ */
@media (max-width: 768px) {
  .gform_validation_errors h2 {
    font-size: 24px !important;
  }
  .gform_validation_errors .gform_submission_error {
    font-size: 18px !important;
  }
  .gfield_error .validation_message,
  .gfield .validation_message {
    font-size: 16px !important;
  }
  .gform_wrapper select,
  .gform_wrapper input,
  .gform_wrapper textarea {
    font-size: 16px !important;     /* Prevent iOS zoom */
    min-height: 40px !important;
  }
}
@media (max-width: 480px) {
  .gform_validation_errors {
    padding: 15px !important;
    margin: 15px 0 !important;
  }
  .gfield_error {
    padding: 10px !important;
  }
  .gfield_error .validation_message,
  .gfield .validation_message {
    padding: 8px 12px !important;
    font-size: 15px !important;
  }
}
/* ------------------------------
   6. GravityView – Tables & Lists
   ------------------------------ */
.gv-table-view table {
  width: 100%;
  border-collapse: collapse;
}
.gv-table-view th,
.gv-table-view td {
  padding: 8px 12px;
  border: 1px solid #dddddd;
}
.gv-table-view th {
  background: #f7f7f7;
  font-weight: bold;
  text-align: left;
}
.gv-list-view .gv-list-view-item {
  border-bottom: 1px solid #dddddd;
  padding: 10px 0;
}
/* ------------------------------
   7. LifterLMS + Gravity Forms in Lessons
   ------------------------------ */
/* Ensure Gravity Forms inside Lifter lessons are not clipped */
.llms-lesson .gform_wrapper,
.llms-lesson-preview .gform_wrapper,
.single-lesson .gform_wrapper,
.lesson-content .gform_wrapper {
  overflow: visible !important;
  position: relative !important;
}
/* Prevent dropdowns from being clipped in lesson sidebars */
.llms-lesson-preview .gform_wrapper select {
  position: relative !important;
}
/* Lesson form buttons – consistent sizing */
.llms-lesson .gform_wrapper .gform_footer input[type="submit"],
.llms-lesson .gform_wrapper .gform_footer button,
.llms-lesson-preview .gform_wrapper .gform_footer input[type="submit"],
.llms-lesson-preview .gform_wrapper .gform_footer button {
  padding: 12px 30px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  height: auto !important;
  min-height: 45px !important;
}
/* ------------------------------
   8. BuddyBoss Modals – Form Protection
   ------------------------------ */
/* Limit form fields to modal width */
.bb-modal .gform_wrapper select,
.bb-modal .gform_wrapper input,
.bb-modal .gform_wrapper textarea {
  max-width: 100% !important;
}
/* Gravity Forms progress bar spacing */
.gform_wrapper .gf_progressbar {
  margin-bottom: 20px !important;
}
.gform_wrapper .gf_progressbar_percentage {
  font-size: 16px !important;
  line-height: 1.5 !important;
}
/* ============================================================
   9. LifterLMS – Universal Tweaks
   - Remove "FREE"
   - Hide "See Plans"
   - Big ENROLL button on course pages
   ============================================================ */
/* Remove all FREE pricing labels / stamps / titles */
.llms-access-plan-pricing,
.llms-access-plan .stamp,
.llms-access-plan-price .stamp,
.llms-access-plan-pricing ins,
.llms-access-plan-pricing del,
.llms-access-plan-price-wrapper,
.llms-access-plan-price,
.llms-access-plan .llms-access-plan-pricing,
.llms-access-plan-title {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* Hide all "See Plans" buttons globally */
.llms-button-secondary,
a.llms-button-secondary,
button.llms-button-secondary,
.llms-access-plan .llms-button-secondary,
.llms-access-plans .llms-button-secondary,
.llms-pricing-table .llms-button-secondary,
.single-course .llms-button-secondary,
.course .llms-button-secondary,
.llms-course-navigation .llms-button-secondary,
aside .llms-button-secondary,
.sidebar .llms-button-secondary,
#secondary .llms-button-secondary {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
}
/* Big ENROLL button on single-course pages */
.single-course .llms-access-plan-footer .llms-button-primary,
.single-course .llms-access-plan-footer a.llms-button-primary,
.single-course .llms-access-plan-footer button.llms-button-primary,
.single-course .llms-access-plan-footer .llms-button-action,
body.single-course .llms-access-plan .llms-button-primary,
body.post-type-archive-course .llms-access-plan-footer .llms-button-primary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 50px 100px !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  min-width: 600px !important;
  width: auto !important;
  max-width: 90% !important;
  min-height: 180px !important;
  height: auto !important;
  background: linear-gradient(135deg, #FFD200 0%, #E21833 100%) !important;
  background-color: #E21833 !important;
  border: 5px solid #ffffff !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  box-shadow: 0 15px 50px rgba(226, 24, 51, 0.75) !important;
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1000 !important;
  margin: 30px auto !important;
  white-space: normal !important;
  overflow: visible !important;
}
/* Subtitle under the big ENROLL button */
.single-course .llms-access-plan-footer .llms-button-primary:after,
.single-course .llms-access-plan-footer a.llms-button-primary:after,
.single-course .llms-access-plan-footer button.llms-button-primary:after,
.single-course .llms-access-plan-footer .llms-button-action:after,
body.single-course .llms-access-plan .llms-button-primary:after {
  content: "MUST ENROLL TO START MODULES" !important;
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  opacity: 0.95 !important;
  margin-top: 10px !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}
/* Pre-button instruction text */
.single-course .llms-access-plan-footer:before,
body.single-course .llms-access-plan-footer:before {
  content: "👇 START YOUR MODULES BELOW 👇" !important;
  display: block !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #E21833 !important;
  margin-bottom: 30px !important;
  text-align: center !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  animation: av-bounce 2s ease-in-out infinite !important;
  width: 100% !important;
}
/* Button pulse + bounce animations */
@keyframes av-buttonPulse {
  0%   { box-shadow: 0 15px 50px rgba(226, 24, 51, 0.75); }
  50%  { box-shadow: 0 20px 70px rgba(226, 24, 51, 0.95); }
  100% { box-shadow: 0 15px 50px rgba(226, 24, 51, 0.75); }
}
@keyframes av-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.single-course .llms-access-plan-footer .llms-button-primary,
body.single-course .llms-access-plan .llms-button-primary {
  animation: av-buttonPulse 2.5s ease-in-out infinite !important;
}
/* Mobile adjustments for the big enroll button */
@media (max-width: 768px) {
  .single-course .llms-access-plan-footer .llms-button-primary,
  body.single-course .llms-access-plan .llms-button-primary {
    padding: 40px 40px !important;
    font-size: 30px !important;
    min-width: 90% !important;
    min-height: 160px !important;
    letter-spacing: 3px !important;
  }
  .single-course .llms-access-plan-footer .llms-button-primary:after,
  body.single-course .llms-access-plan .llms-button-primary:after {
    font-size: 16px !important;
  }
  .single-course .llms-access-plan-footer:before,
  body.single-course .llms-access-plan-footer:before {
    font-size: 22px !important;
    margin-bottom: 25px !important;
  }
}
@media (max-width: 480px) {
  .single-course .llms-access-plan-footer .llms-button-primary,
  body.single-course .llms-access-plan .llms-button-primary {
    padding: 30px 30px !important;
    font-size: 26px !important;
    min-width: 95% !important;
    min-height: 140px !important;
    letter-spacing: 2px !important;
  }
  .single-course .llms-access-plan-footer .llms-button-primary:after,
  body.single-course .llms-access-plan .llms-button-primary:after {
    font-size: 14px !important;
  }
  .single-course .llms-access-plan-footer:before,
  body.single-course .llms-access-plan-footer:before {
    font-size: 20px !important;
  }
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

Comments

Add a Comment

Login to Deploy Snippet