Remove widget border, change arrow background & color on essential grid pagination, underline of essential grid not working

[dstro003]

Hello support team,

I have a couple of minor things that need fixing.

1. I would like to remove the border on the sidebar called “social icons”
   You can view a page that has this here: http://www.soundshockaudio.com/interviews/

2. I would like to change the background of the arrows and the arrow itself like the one in all my essential grids. Would I do this in the essential grid or through CSS on the page? Here is what my essential grid pagination and arrows looks like

Here is an example of what I would like it to look like

3. I would like to add a underline to the Title of all my essential grids when the mouse is hovered over the title, but it does not seem to work. I have set all of my essential grids to do this, but the underline never shows up.

Thanks for all the help!

[christopher]

Hi there,

Thank you for writing in. I am sure you will understand that all your requests are considered as a custom development and outside of support scope. We will do our best to suggest CSS snippets to make it happen somehow but you will need to get familiar with CSS to be able to perform such tweaks yourself or hire a developer to do so. To get started with CSS finding the correct Selector is a key part. You can start using the Google Chrome browser developer toolbar for that. For more information:

For more information regarding the CSS coding standards kindly start here:
https://www.w3schools.com/css/

Please kindly add the CSS code below to X > Launch > Options > CSS:

.widget ul.zoom-social-icons-list {
    border: none;
}

.esg-grid a:not([href*="cloud"]):hover {
	text-decoration: underline;
}

.minimal-light .esg-navigationbutton.esg-left,
.minimal-light .esg-navigationbutton.esg-right {
	background: #333;
}

.minimal-light .esg-navigationbutton.esg-left i,
.minimal-light .esg-navigationbutton.esg-right i {
	color: white;
}

.minimal-light .esg-navigationbutton.esg-filterbutton.selected {
	background-color: #ddd;
	border: none;
	box-shadow: none
}

The first part of the code removes the border from the sidebar. The second part selects all link items inside the essential grid items except the ones that are linked to SoundCloud and adds the underline while hovering. The last part of the code selects different sections of the pagination and sets proper colors for background and text color to somehow change the look as you like.

Feel free to start your customization based on the code above. Unfortunately, we will not be able to continue giving such tweaks as mentioned in the first section of the post.

Also, I suggest that you check the documentation below from the Essential Grid developers which will help you more regarding your customization:
https://www.themepunch.com/faq/modify-styling-of-navigation-elements/

Thank you for your understanding.

[dstro003]

Thank you for the code Christopher!

All of it is working well!

One last question.

How would I change the arrow background and arrow color when the mouse is hovered over the arrows and how would I remove the shadow on hover?

Thanks!

[ruenel]

Hello There,

To change the background of the arrow and its color, please make use of this css code:

.minimal-light .esg-navigationbutton.esg-left, 
.minimal-light .esg-navigationbutton.esg-right {
    box-shadow: none !important;
}

.minimal-light .esg-navigationbutton.esg-left, 
.minimal-light .esg-navigationbutton.esg-right {
    background-color: green;
    border-color: green;
}

.minimal-light .esg-navigationbutton.esg-left i, 
.minimal-light .esg-navigationbutton.esg-right i{
    color: white;
}

.minimal-light .esg-navigationbutton.esg-left:hover, 
.minimal-light .esg-navigationbutton.esg-right:hover {
    background-color: red;
    border-color: red;
}

.minimal-light .esg-navigationbutton.esg-left:hover i, 
.minimal-light .esg-navigationbutton.esg-right:hover i{
    color: black;
}

I’ve used solid colors so that you can easily identify the changes. Please change it to the desired color to match with your site design.

Hope this helps. Kindly let us know.

[dstro003]

Thanks for the code RueNel.

Everything is working well!

Appreciate all the help once again

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.