Docs

[bedingfield]

Hi there,

I have activated the grid plugin and would like to style the CSS of the ‘load more’ link as I would like it centered and ideally, look like one of the X theme buttons.

Could you let me have the CSS that controls ‘load more’ in the grid please?

Thank you,
Karl

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[bedingfield]

Hi there,

Here is my URL: http://elyrunners.club/er-video/

Its the load more link that I want to centre and, ideally, create a button like X

[Christian]

Hey there,

Please add the code below in your Appearance > Customize > Custom > CSS.

.tg-grid-area-bottom2 {
    text-align:center;
}

.tg-ajax-button {
    display: inline-block;
    position: relative;
    border: 1px solid #ac1100;
    padding: 0.563em 1.125em 0.813em;
    cursor: pointer;
    font-size: 16px;
    font-weight: inherit;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    color: #fff;
    background-color: #ff2a13;
    -webkit-transition: all 0.15s linear;
    transition: all 0.15s linear;
    margin-top: 10px;
}

Hope that helps. 🙂

[bedingfield]

Thanks, but this does not appear to work. http:elyrunners.club

Any suggestions?

Thank you.

[Rupok]

Hi there,

I can’t see the load more button on your given site anymore. Would you provide the exact URL and point us that?

Cheers!

[bedingfield]

Hi there,

http://elyrunners.club/er-video/

Thank you

[Rue Nel]

Hello There,

Please update the given css code and use this instead:

.site .tg-ajax-button {
    margin-top: 30px;
    color: #ffffff;
    border-color: #ac1100;
    background-color: rgb(40,50,63);
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    border-radius: 0.25em;
}

.site .tg-ajax-button:hover {
    color: #ffffff;
    border-color: #600900;
    background-color: #ef2201;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.65);
    box-shadow: none;
}

.site .tg-ajax-button .tg-nav-color {
    color: #ffffff !important;
}

Active state:

Hover state:

Hope this helps.

[bedingfield]

Thank you.

How strange. I have added that CSS, and still I get no change to the ‘load more’ link.

Could you check my page and see if you see the CSS changes?

Thank you

[Christopher]

Hi there,

The code is correct and it should work.

Please check your CSS file and make sure there is no missing semicolon or curly brackets.

I found missing semicolon in following code :

h4,.h4{color:gray;margin-top:0;margin-bottom:0.5em;line-height:1.4}

Hope it helps.

[bedingfield]

thanks for finding that typo.

its working now, thank you. Is there a way I can centre the button as it is currently left aligned.

Thank you again.

[Rahul]

You are welcome!

I see the button is already centered. Am I missing something here?

Thanks

[bedingfield]

hmmmm, it shows on my browsers as left aligned. Maybe its my CDN delayed.

Thank you

[Rahul]

Sure, let us know if you have any further questions.

Thanks

[Author]

Posts