Essential Grid customisation

Support
#1

Hello I’m trying to accomplish a similar grid to the one in this link, where the text/logo position is static and only the cover overlay moves on mouse over.

This is what I’ve managed to get so far any help would be greatly appreciated thanks
ddwc.church

#2

I figured it out…sort of

#3

Glad you’ve sorted it out :slight_smile:

#4

What did you do? I’m unable to get images to show up like the example.

#5

I used the George Bush skin, it’s no the exact thing but it accomplished what I wanted…I’ll replay to the support guy to see if he can tel us exactly how they did that

#6

Hi I used the George Bush skin to do what I wanted but I still cant figure out how to replicate the demo grid. How do I edit the content that is displayed by default before the mouse over action. Thanks

#7

Hello There,

We are just glad that you have figured it out a way to correct the said issue.
Thanks for letting us know!

Best Regards.

#8

Hi you didnt read my replay in it’s entirety it said “t I still cant figure out how to replicate the demo grid. How do I edit the content that is displayed by default before the mouse over action.” could you help me with that please

#9

Hi there,

Do you have a sample of your grid you’re working on? And please provide your login credentials in a secure note so I could check what’s missing.

The image should automatically appear there as part of the background and it will be picked from the featured image or media image that you assigned to it.

Thanks!

#10

There are two grids on my home page the default text color is white and on mouse over it remains white. How do I set the default font color to some thing else and then have it change to another color on mouse over of the Grid item. I’m aware that they is a styles tab in the skin editor with a hover check box. But that does not affect the text style on mouse over of the grid item but only takes effect when I mouse over the text itself .

#11

Hi There,

In that case, we can use this custom CSS because it is a combination of selector:

  .esg-hovered a.eg-home-watch-online-2-element-0 {
      color: red !important; /*Change red to your preferred color.*/
   }

Something like this: https://screencast-o-matic.com/watch/cbi6jPlFQI
Hope this helps.

#12

Thanks for your replay but what that did was was it made the default font color red then it stayed red on the first mouse over event then the default text became white. are there no skin options to accomplish this

#13

Hi again,

You can use skin editor to modify the style of your Grid please see https://www.themepunch.com/essgrid-doc/item-skin-editor/#styling or you can use the following CSS code in your Customizer to change the colors:

.esg-grid a {
	color: #0087ff !important;
}
.esg-hovered a {
    color: #fff !important;
}

Hope this helps!

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.