Support » Plugin: Lazy Load for Comments » Custom Lazy loan button color and size

  • Resolved yoshimitsu1234

    (@yoshimitsu1234)


    Hi,
    How do I make the Lazy load comments button customized with CSS?
    I want to make the font bigger and add color to the surrounding area.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Dhananjay

    (@dhananjaygbhardwaj)

    It’s quite easy actually.

    By default the load comments button could be targeted with the default llc_comments_button ID selector.

    So, the CSS would look something like the following:

    #llc_comments_button {
      background-color: #5f00d2; /* Add a background color to the button */
      color: #fff; /* Add a color to the text */
      padding: 10px 20px; /* Add some padding accordingly */
    }

    Of course, you can tweak the background color and color properties as per your will, and accessibility.

    I personally use the filter provided by the plugin’s developer to add an additional CSS class to target, so that I do not have to target the ID selector.

    Below is what you could use to add an additional class to the button (add it to your theme’s functions.php file:

    add_filter( 'llc_button_class', function () {
        return 'my-button-class';
    });

    After adding the custom class, the CSS should look something like:

    .my-button-class {
      background-color: #5f00d2; /* Add a background color to the button */
      color: #fff; /* Add a color to the text */
      padding: 10px 20px; /* Add some padding accordingly */
    }

    Hope this helps.

    • This reply was modified 7 months, 3 weeks ago by Dhananjay.
    Thread Starter yoshimitsu1234

    (@yoshimitsu1234)

    Thank you. That was very helpful.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom Lazy loan button color and size’ is closed to new replies.