Lifter doesn’t work with Dark Backgrounds

  • Resolved petermerel1

    (@petermerel1)


    1 year, 4 months ago

    Like many thousands of sites, we use an Astra Pro theme with a dark background and white text and titles. But the CSS Lifter uses generates light backgrounds and, from time to time, dark text. So Lifter pages have a lot of divs that turn up either garish or invisible on our site.

    We’d expect that such a mature plugin would just integrate the usual Astra Pro styling when using that theme since it’s the most popular WP theme in the world atm. Failing that we’d expected a simple “dark background for lifter” styling switch to appear somewhere in the Lifter configuration settings or in the Astra Pro Lifter settings. And, failing that, we’d expect the Simple Branding function in Lifter’s Labs plugin to give some simple way to generate dark backgrounds.

    We haven’t found any of those things. Googling, we only found this thread from someone who experienced the same problem we have only about a year prior. Unfortunately the CSS tweaks it gives only work on some of the Lifter CSS, leaving the rest of it still looking dodgy. It appears the OP gave up in frustration before getting a complete solution. Can you suggest a simple way forward please?

    https://www.ads-software.com/support/topic/cant-change-colors-to-match-theme/

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Support Nick Mariano

    (@reddotinmotion)

    Hi @petermerel1,

    Thank you so much for your patience. We handled this forum topic in a support request you submitted. As a recap of what we did, we added the CSS code below to WordPress Dashboard > Appearance > Customize > Additional CSS.

    .single-course .llms-access-plans {
   margin-left: auto !important;
   margin-right: auto !important;
}

.llms-access-plan .llms-access-plan-footer,
.llms-access-plan .llms-access-plan-content {
   background: #160e0e;
}

.llms-access-plan-footer {
   border-bottom: 3px solid #160e0e;
}

.llms-lesson-preview .llms-lesson-link {
   color: #fefefe !important;
} 

body .llms-syllabus-wrapper .llms-lesson-preview .llms-lesson-link {
   background-color: #160e0e;
}

.llms-lesson-preview .llms-lesson-link {
   color: #fefefe;
}

.llms-course-nav.llms-back-to-course {
   background: #aaaaaa;
}

.llms-course-nav.llms-prev-lesson {
  background: #aaaaaa;
}

.llms-course-nav.llms-next-lesson {
  background: #aaaaaa;
}

.llms-sl-card-footer {
    background-color: #000000;
}

.llms-syllabus-wrapper:hover: {
   background-color: red !important;
}

.llms-main:hover: {
   background-color: red !important;
}

.llms-sl-card {
   background: #000;
}

    Kindly let us know if you need further assistance with the CSS codes.

Viewing 1 replies (of 1 total)
  • The topic ‘Lifter doesn’t work with Dark Backgrounds’ is closed to new replies.