Add CSS to Change Buttons for Other Plugins

  • Author
    Posts
  • #160603

    gwmarta
    Member

    I’d like all of my plugins to have the same Load More button that is setup with the theme, here is an example from the News page https://rockdemo.wpcomstaging.com/news/

    As you can see the schedule plugin has a different default button and I’d like to override this https://rockdemo.wpcomstaging.com/rock_schedule/ so that it looks like the one in the news section

    Thanks

    The blog I need help with is rockdemo.wpcomstaging.com.

    #160633

    tarasdashkevych
    Theme Author

    Hello,

    It looks like your schedule plugin comes with its own structure (I would say a really bad structure because they do not use a button element which is bad for accessibility) and styles for the Load More button.

    Please use this custom CSS to change appearance of that button:

    
    .mec-load-more-wrap .mec-load-more-button {
        background-color: var(--color-accent-base);
        border-radius: 2px;
        color: #ffffff;
        font-size: 11px;
        font-weight: bold;
        line-height: 1.3;
        padding: 1.2em 1.5em;
        text-transform: uppercase;
        border: none;
    }
    
    .mec-load-more-wrap .mec-load-more-button:hover {
        background-color: var(--color-primary-base);
    }
    

    Let me know if you have any additional questions.

    Kind regards,
    Taras

    #160674

    gwmarta
    Member

    That worked great, thank you so much. 2 more items.
    1) can we do the same for the Twitter plugin (please scroll to the bottom), that still has a funky load more that doesn’t match.
    2) is there a way to get them all to align center, I may just need the default button for news (first Load More button on the home page which currently aligns left), to align center?

    Thank you again, I really appreciate your help!

    #160702

    tarasdashkevych
    Theme Author

    “can we do the same for the Twitter plugin (please scroll to the bottom), that still has a funky load more that doesn’t match.”
    – This plugin also comes with its own styles for the button. So, please replace the previous CSS with this one:

    
    .mec-load-more-wrap .mec-load-more-button,
    #ctf #ctf-more {
     background-color: var(--color-accent-base);
     border-radius: 2px;
     color: #ffffff;
     font-size: 11px;
     font-weight: bold;
     line-height: 1.3;
     padding: 1.2em 1.5em;
     text-transform: uppercase;
     border: none;
    }
    
    .mec-load-more-wrap .mec-load-more-button:hover,
    #ctf #ctf-more:hover {
      background-color: var(--color-primary-base);
    }
    

    “… is there a way to get them all to align center …”
    – Please add this custom CSS to your site:

    
    .mec-load-more-wrap .mec-load-more-button,
    #ctf #ctf-more,
    .wp-block-newspack-blocks-homepage-articles > button {
     max-width: 150px;
     margin-left: auto;
     margin-right: auto;
    }
    

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

    #160721

    gwmarta
    Member

    That did the trick, the site looks great! Thank you so much for your help!

    #160764

    tarasdashkevych
    Theme Author

    You are very welcome!

    Kind regards,
    Taras

The topic ‘Add CSS to Change Buttons for Other Plugins’ is closed to new replies.