[Justin]

Hi Sakin,

One more question for you and I’ll be good to go. I’m trying to add an border-radius to the featured-grid-content as follows:

1) 25px border-radius to the left top and left bottom corners of the grid-box.first (larger image in the grid) image
2) 25px border-radius to the right top of the 2nd image
3) 25px border-radius to the right bottom of the 3rd image.

This would also need to be applied to the box-shadow as well when you hover over those images. Any easy way to change that styling?

Thanks,
Justin

[Sakin]

@Justin: For border radius, you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

#featured-grid-content .wrapper {
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
}
#featured-grid-content .grid-box.first {
    border-radius: 25px 0 0 25px;
    -moz-border-radius: 25px 0 0 25px;
    -webkit-border-radius: 25px 0 0 25px;
}
#featured-grid-content .grid-box + .grid-box {
     border-radius: 0 25px 0 0;
    -moz-border-radius: 0 25px 0 0;
    -webkit-border-radius: 0 25px 0 0;
}
#featured-grid-content .grid-box + .grid-box + .grid-box  {
     border-radius: 0 0 25px;
    -moz-border-radius: 0 0 25px;
    -webkit-border-radius: 0 0 25px;
}

I don’t think box shadow will be visible in grid content, as it has hover effect.

[Author]

Posts