[Support request] Customizing CSS with LearnPress plug-in

[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.

[Tom]

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.

[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.

[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

[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.

[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 ?

[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.

[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.

[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?

[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.

[Author]

Posts