[Support request] Customizing CSS with LearnPress plug-in

Home Forums Support Customizing CSS with LearnPress plug-in

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #460840
    NBC

    Under localhost, I’m working on a site that uses the LearnPress learning management system plug-in.

    LP includes its own CSS within the plug-in folder. Specifically, the location is
    /wp-content/plugins/learnpress/assets/css/learnpress.css

    If I add CSS code directly to my child theme’s style.css, the plug-in ignores it, even if I flag it the code as !important.

    If I replicate the relevant part of the plug-ins file and folder structure within my child theme, the plug-in ignores it, even if I flag the code it as !important. Specifically, I placed a duplicate of the CSS file here:
    wp-content/themes/GPchild/learnpress/assets/css/learnpress.css

    Any suggestions for how to alter the appearance of this plug-in? Obviously, I don’t want to edit the plug-in’s CSS directly.

    GeneratePress 2.0.1
    GP Premium 1.5.6
    #461060
    Tom
    Lead Developer
    Lead Developer

    Hmm, using !important should always work unless their CSS shows up below yours and also uses !important.

    If you’d like to link me to your site and tell me which element you’re targeting, I might be able to see why your CSS isn’t working.

    #461079
    NBC

    This is on my dev server, not online anywhere.

    Their CSS does not use !important, but it’s in a separate folder within the plug-in installation. The only help doc they provide about customization is this, which doesn’t concern CSS per se.

    There’s a link to a customization doc, but the page is blank (really helpful, right?).

    I’m just trying to figure out whether I need to duplicate their learnpress.css file somewhere (and if so, where), or whether there’s some way to address their styles in my child theme’s style.css file.

    #461109
    Lyle

    NBC,

    I just installed LearnPress on a local test site and I am able to easily change any LP CSS buy using Tom’s Simple CSS plugin … no !important required 🙂

    e.g:

    .learn-press-courses li.course {
    	width: 33%;
    	padding: 20px;
    	border: 4px solid orange;
    	background: lightblue;
    }
    
    .learn-press-courses li.course .course-thumbnail {
        text-align: center;
    }

    https://docs.generatepress.com/article/adding-css/

    Cheers!
    Lyle

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #461130
    NBC

    Hi, Lyle:

    That’s really interesting. I would have thought that adding CSS to the child theme would be preferable, but I have to use !important to get the code recognized in style.css.

    One of the styles I’m trying to alter is .learn-press-message.error, specifically the border-left-color property. I can set it to #f1c40f using !important, but without !important, the code is not recognized.

    #461158
    Lyle

    Hi NBC,

    What do you have to do/not do to get that error so I can check?

    Have you tried using Simple CSS and not use !important ?

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #461159
    NBC

    Hi, Lyle:

    I don’t actually get an error message. The code simply has no effect without the !important added. The item in question reads

    .learn-press-message.error {
      border-left-color: #f1c40f!important;
    }

    The only easy way to see the message to which this code applies is to view the checkout page (“LP Checkout”) with nothing in the cart. The code applies to the message that tells you your cart is empty. Without this code, the bar alongside the message is red. With this code, the bar is yellow.

    I haven’t installed Simple CSS yet on this project. I’ve been trying to keep this customization entirely in the child theme.

    #461161
    Lyle

    Tried it with Simple CSS and no !important and it worked 🙂

    `.learn-press-message.error {
    border-left-color: green;
    }’

    I can understand wanting to keep things in the child theme but Simple CSS is the very first plugin I install on a new site 🙂 Not only does it give you a nice, full page editor with syntax highlighting in the WP admin, but it also provides a place in the WP page/post editor where you can apply custom CSS to just that page/post.

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

    #461164
    NBC

    Hi, Lyle:

    Do you add all your CSS customization using the plug-in, or do you place some things in your child theme? If you use both, what are your criteria for which types of customizations go where?

    #461169
    Lyle

    I never use a child theme as I never need to “adjust” the core theme files for what I do.

    All of my custom code is that which would go in a child theme’s functions.php and for that I use the Code Snippets plugin. Not only does it give me a handy place to add and document it in the WP admin, but it also parses the code before activation preventing that nasty WSOD 🙂

    And of course, for any custom CSS I use Simple CSS because at the very most I wouldn’t have more than 100 or so lines of CSS.

    http://snifflevalve.com
    Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.