Essential grid styling nav buttons and pagination

[whitelobster11]

Hello

I have an instance of essential grid on the page http://www.motherculture.love/welcome-test called masonryblog_welcome

how can I customize the skin for this to make the following changes:

1. navigation arrows = red background with white arrows

2. Make pagination bullets perfect circles, not rounded squares

3. pagination bullets = white inactive, red active

Login info attached below

Thank you so much!

[Prasant]

Hello Jared,

Thanks for asking.

I suggest you to please take a look at following tutorial that will help you to make the styling changes:

https://www.themepunch.com/faq/modify-styling-of-navigation-elements/

Thanks.

[whitelobster11]

Hi Prasant

Thank you for this!

I saw this tutorial but could not get any of it to work properly, I think I am targeting the wrong parameters in the CSS

Could you please walk me through the specific css required to make the changes outlined in my original post?

Thank you so much!

[paul.r]

Hi,

To achieve those, you can try adding this in Theme Options > CSS

body .esg-navigationbutton {
    border-radius: 20px;
    color: #fff;
    background: red;
}

body .esg-pagination .esg-pagination-button.selected,
body.simple-light .esg-pagination .esg-pagination-button:hover {
    background:red;
    color: #fff!important;
}

body .esg-filterbutton {
    background: #fff;
    color: #000!important;
}

You can use google chrome inspect element to be able to target the correct class.

Hope this helps