This topic contains 1 reply, has 2 voices, and was last updated by  Sakin 3 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #66599

    Justin
    Participant

    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

    #66614

    Sakin
    Keymaster

    @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.

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Featured-grid-Content rounded corners’ is closed to new replies.