The Grid Load More button

Hi,

I would like to wonder is that difficult to make “Load More” / “Loading” button in The Grid Add-On to inherit style of the standard button in X / PRO?

Hello There,

Thanks for writing in! Load more button has it’s own unique class which is being styled within the grid plugins css stylesheet. To make it like a standard X/Pro button, it may need a little css. Could you please provide the url of your page with the load more button in it? We may be able to help you.

Cheers.

Hi,

Here are my credentials.

Hi there,

Please add this CSS to your grid’s custom CSS



   .tg-ajax-button span {
   color: rgb(247,102,101) !important;
   }
    .tg-ajax-button {
     display: inline-block;
    position: relative;
    border: 1px solid #ac1100;
    cursor: pointer;
    font-weight: inherit;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    transition: all 0.15s linear;
    color: rgb(247,102,101) !important;
    border-color: rgb(247,102,101);
    background-color: rgb(76,185,68);
    border-width: 3px;
    text-transform: uppercase;
    background-color: transparent !important;
    padding: 0.579em 1.105em 0.842em;
    font-size: 19px;
    border-radius: 100em !important;
    outline: 0 !important;

    }

.tg-ajax-button:hover {
    text-decoration: none;
    color: #fff !important;
    border-color: #600900 !important;
    margin-bottom: 0;
    border-width: 3px;
    text-shadow: none;
    text-transform: uppercase;
    background-color: transparent;
    box-shadow: none;
}


Thanks!

1 Like

Great, thanks!

And could you also tell which selectors shall be used to style search box and filter box like I have here (https://projects.farm/sport-school/speed-skating/)?

Hello There,

These are the selectors for the search and filter box:

/* the filter box */
#grid-6393 .tg-dropdown-holder {
  // add your styles here
}

/* The search box */
#grid-6393 .tg-search-holder {
  // add your styles here
}

Please let us know how it goes.

Perfect, thanks a lot!

You’re welcome!
We’re glad we were able to help you out.