Essential grid css styling

Support
#1

Hey guys, i was wondering if you could help me with this:

I created a grid with essential grid and styled it a bit. now the thing is that i want to add separate border radius to 1) the container 2)the image of the grid.

This is what i want to achieve: http://prntscr.com/jbjkdg
please notice the border radius on both the container (only on both top and bottom corners) and on the image ( if necessary, usually handled by the container itself, but it only has to be on the top borders).

And this is what i have: http://prntscr.com/jbjji7

.eg-hayes-wrapper div{
  border-top-left-radius:0.5em;
  border-top-right-radius:0.5em;
 	 border-bottom-right-radius:0.5em;
}

and i also know the .esg-entry-media class handles the image.

now, i added a "border-bottom-right-radius to the container and you can see it’s also affecting the image, which i don’t want. i would like to know if you could help me find the class that only handles this: http://prntscr.com/jbjjy8

Thanks!

#2

Hey @elpanda13,

Please give us the URL of the page so we could inspect what is causing the issue.

Thanks.

#3

you can check now, sorry i thought i had saved the credentials.

By the way, there’s another issue with the grid, it doesn’t link to anything, even though it should link to the post by default.

#4

Hey @elpanda13,

For the border radius, I first set the border radius for the Full Item as that is the correct way to add a border radius.

In order for the border radius to work, Overflow Hidden must also be enabled. This will conflict with the box-shadow though so it won’t show up anymore.

If the shadow is important, disable the Overflow Hidden and add this CSS instead.

.esg-grid .mainul li.eg-hayes-wrapper {
    overflow: hidden;
    box-shadow: 0.4em 0.4em 1.2em 0.1em rgba(0,0,0, 0.25);
}

If you take a closer look at the screenshot below, the option adds the mask image property which hides the box shadow so the trick would be to apply overflow hidden through custom CSS. The box shadow must also be applied to the Hayes wrapper instead of the media wrapper.

Regarding the link, you will need to enable that also in the skin editor.

Link for individual layers are also available.

Hope that helps.

#5

Ok, i’m really stupid, i read there “OVERFLOW” and i thought off meant hidden, i had tried adding the border-radius through the skin editor, as it was obvious and it didn’t work before!

about the “add link to” part, for some reason, when i do that i get a weird link which is not the post, so it sends me to the 404 error page, why would that be? (i had done that before, right after i asked you why it didn’t have a link)

#6

The link leads you to 404 because of your custom permalink structure. You will need to use standard permalinks or consult with a third party developer why your custom permalink does not work.

I’ve also edited my response above to include why the Overflow option does not work.

Thanks.

#7

Huh, weird issue with the permalink, but well, i’ll go figure that out. however, thanks for the assistance with the grid!

#8

You’re welcome :slight_smile:

#9

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