Customize "load more" button in essential grid?

Support
#1

I have the Essential Grid installed for this page https://lunchwithleah.com/healthy-eating/
with the “load more” button at the bottom. However, unless you hover over this button you will never see it.

Can you tell me how I can customize it so that everyone can see the “load more” button at all times?

Thanks!

#2

Hello There,

Thanks for writing in! To make your load more button a more visible to the users, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-section .esg-navigationbutton.esg-loadmore {
    color: black;
    border: solid 1px rgba(0,0,0,0.65);
}

We would loved to know if this has work for you. Thank you.

#3

That seems to have worked! Thank you!!!

Is there a way to change that code a little and also apply it to the home page where the icons for pages 1, 2, 3, etc and the arrows at the bottom of the grid are not visible unless you hover over them? (https://lunchwithleah.com/)

#4

Hi There,

Please also add this custom CSS:

.esg-pagination-button:not(.selected),
.esg-navigationbutton.esg-right, .esg-navigationbutton.esg-left {
    background-color: #000;
}

Hope it helps :slight_smile:

#5

I cant seem to get that code to work…

#6

Hi @leahvachani

That’s the CSS code you will need to get it working:

.simple-dark .esg-filterbutton, .simple-dark .esg-navigationbutton, .simple-dark .esg-sortbutton, .simple-dark .esg-cartbutton {
    border-color: #fff;
    color: #000;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.13);
    background: #fff;
}

.simple-dark .esg-navigationbutton * {
    color: #000;
}

Please replace the previously mentioned snippet with this one.

Thanks.

#7

Thanks for the reply @Alaa, so now I can see the outline of the “boxes” for the page numbers and arrows to go forward and backwards, but only page 1 is seen in black text. The other page (page 2) you only see the outlined box until you hover over the box and then can see the text for the number 2. How can I maker the number 2 and the arrows to go forward/backward be visible in black all the time?

THanks!!!

#8

Hello There,

Well in that case, please have the code updated and use this instead:

.simple-dark .esg-filterbutton, .simple-dark .esg-navigationbutton, .simple-dark .esg-sortbutton, .simple-dark .esg-cartbutton {
    border-color: #fff;
    color: #000;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.13);
    background: #fff;
}

.simple-dark .esg-navigationbutton * {
    color: #000 !important;
}

We would loved to know if this has work for you. Thank you.

#9

It’s all visible now except that the page 2 (or whatever page you are not on) is not visible. You can see it here: https://lunchwithleah.com/

#10

Hi There,

I could see that you’ve put the custom CSS under Customizer > Additional CSS, that place is lower priority than Theme Options > CSS.

This is the order of the styles being applied to the page.

  • Theme’s stack style.css
  • Child Theme’s style.css
  • WP Customizer’s Additional CSS
  • Theme Options Custom CSS
  • Cornerstone/Pro editor’s custom css

I would highly recommend that you should place that css code in Theme Options > CSS.

Regards!

#11

Thank you for that explanation, very helpful!
I have put the recommended code into Theme Options css but all the numbers are still not showing up.

#12

Hi there,

Please change this block of CSS,

.simple-dark .esg-navigationbutton * {
    color: #000 !important;
}

to this

.simple-dark .esg-pagination * {
    color: #000 !important;
}

Hope this helps :slight_smile:

#13

still not working :frowning:

#14

Hey There,

Please update the code given by Rad into this code instead:

.page .simple-dark .esg-filterbutton, 
.page .simple-dark .esg-navigationbutton, 
.page .simple-dark .esg-sortbutton, 
.page .simple-dark .esg-cartbutton {
    color: #000 !important;
}

After adding this code, please clear your cache first before testing since you have installed WP fastest cache plugin.

Please let us know how it goes.

#15

Yikes, now I don’t even know what code should be there and what I need to delete! I am not knowledgable about coding and there is so much code now in my css for Theme Options!

Is there any way to tell me what lines to delete?

#16

Hi There,

Please re-send us with your admin account so we can take a closer look.

Thank you.

#17

sorry, what admin account? for my wordpress?

#18

Hello There,

Yes, please. We will just log in and help you figure out or even changed/edit/delete the css in your theme options so that this issue will be finally resolved.

Thanks.

#19

sorry, how do I send my info privately?

#20

Hi,

Upon checking, I can see a lot of syntx erros in your css code in Theme Options > CSS

 .woocommerce h2.woocommerce-loop-category__title mark {.simple-dark .esg-filterbutton, .simple-dark .esg-navigationbutton, .simple-dark .esg-sortbutton, .simple-dark .esg-cartbutton {.simple-dark .esg-filterbutton, .simple-dark .esg-pagination, .simple-dark .esg-sortbutton, .simple-dark .esg-cartbutton 
    border-color: #fff;
    color: #000;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.13);
    background: #fff;
}

.simple-dark .esg-pagination * {
    color: #000 !important;
}
    border-color: #fff;
    color: #000;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.13);
    background: #fff;
}

.simple-dark .esg-pagination * {
    color: #000 !important;
}
    background: transparent;
}

@media(max-width: 979px){
    .x-navbar {
        text-align: center;
      padding: 15px 0px;
    }

    .masthead-inline .x-btn-navbar {
        float: none !important;
        display: inline-block;
    }

 <script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us17.list-manage.com","uuid":"e838bbb6a8c0638fb048a14e9","lid":"fcf578d05a"}) })</script>

First please remove the js script, if you need to add it you can install this third party plugin and add it in Scripts in Footer

Then change the code css code to this.

.woocommerce h2.woocommerce-loop-category__title mark {.simple-dark .esg-filterbutton, .simple-dark .esg-navigationbutton, .simple-dark .esg-sortbutton, .simple-dark .esg-cartbutton {.simple-dark .esg-filterbutton, .simple-dark .esg-pagination, .simple-dark .esg-sortbutton, .simple-dark .esg-cartbutton 
    border-color: #fff;
    color: #000;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.13);
    background: #fff;
}

.simple-dark .esg-pagination * {
    color: #000 !important;
    border-color: #fff;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.13);
    background: #fff;
}

.simple-dark .esg-pagination * {
    color: #000 !important;
    background: transparent;
}

@media(max-width: 979px){
    .x-navbar {
        text-align: center;
      padding: 15px 0px;
    }

    .masthead-inline .x-btn-navbar {
        float: none !important;
        display: inline-block;
    }
}

Hope this helps