Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 14, 2022 at 8:21 pm #1348457
    klokehead

    Dear Team Enfold,

    Thank you for creating Enfold and providing this support forum.

    I also use plugins. In doing so, I want to change a plugin’s appearance. And if I make changes to the Child Teme’s style.css, it doesn’t affect the website.

    Of course, writing the code snippets into Theme Options > General Styling > Quick CSS would work for a while. But, this is not useful if you have to change more in the long run.

    What did I try for now?
    No use of caching plugins.
    Disabling CSS file merging and compression. / Disabling Javascript file merging and compression.
    Checked “Delete old CSS and JS files?”.
    Writing “! important” into any styling attribution.

    How can I use style.css to change a plugin’s appearance in Enfold?

    I appreciate any help you can provide.
    Lutz

    April 15, 2022 at 4:52 am #1348474
    Ismael

    Hey Lutz,

    Thank you for the inquiry.

    Which plugin or which element are you trying to override? Please provide a link to the actual page containing the element so that we can check it.

    You can also register a new stylesheet using the wp_enqueue_style function and make sure that one of its dependencies is the default stylesheet from the plugin. This ensures that the new css file loads after the default stylesheet from the plugin.

    // https://developer.wordpress.org/reference/functions/wp_enqueue_style/

    Best regards,
    Ismael

    April 15, 2022 at 12:10 pm #1348501
    klokehead

    Hello Ismael,

    Thank you for your answer.

    The plugin is Woocommerce Sticky Add To Cart Bar (by addonsplus).

    The element, for example, is the image size (of the product I want to sell). For this, I used the following CSS snippet:

    .wsc-left-section-img > img {
    height: 50px !important;
    max-height: 50px !important;
    max-width: 75px !important;
    }

    The link to my actual page (currently for testing purposes):

    https://euc.klokain.org/produkt/map-flyer/

    I want to use the template on this page as a starting place for my later products.

    As an amateur, I’m not into PHP that much and do not fully understand how this wp_enqueue_style function could work. So I admit that I have little idea.

    I appreciate your patience.

    Lutz

    April 16, 2022 at 10:44 pm #1348586
    Mike

    Hi,
    Thank you for the link to your site, I was note able to login but looking at your source code it looks like the plugin’s css is already using !important which is why you are having trouble overriding it.

    .wsc-left-section-img>img{
	vertical-align:middle;
	height:48px!important;
	max-height:48px!important;
	max-width:48px!important;
	object-fit:contain!important;
}

    Try this css in your child theme style.css:

    #top>.wsc-main>.wsc-wrapper>.wsc-left-div>.wsc-left-section-img>img {
height: 50px !important;
max-height: 50px !important;
max-width: 75px !important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    April 17, 2022 at 10:34 am #1348602
    klokehead

    Hi,
    Thank you, Mike. I tried your CSS suggestion, but it doesn’t work either. Any CSS works fine in the Quick CSS field (Theme Options > General Styling), even without making it specific to its full extent. Yet, more specific is better anyway. You’re right with that, but I would appreciate any further help.

    Thanks again, and Happy Easter! (And take your time.)

    PS: I updated my login credentials and tested it. So the login should work now.

    April 17, 2022 at 1:02 pm #1348608
    Mike

    Hi,
    Thanks for the feedback and the login, I added the css to the top of your child theme stylesheet and clear my browser cache and the change is displaying.
    Please clear your browser cache and check.
    Please note that testing with Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

    Best regards,
    Mike

    April 17, 2022 at 3:46 pm #1348615
    klokehead

    Hi Mike,

    Thank you for your excellent advice.
    Adding CSS at the top of the child theme’s stylesheet works perfectly. I didn’t know it made a difference because I always placed new CSS anywhere else or at the end of a child theme’s stylesheet. Plus, your pro tip for Safari is worth gold.

    Thank you for your solution, your expertise and your exceptional support.

    Yours sincerely,
    Lutz

    April 17, 2022 at 4:00 pm #1348616
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Using style.css for plugin customisation does not work’ is closed to new replies.