Okay
  Public Ticket #1463657
borders and box shadows of images in portfolio item templates
Closed

Comments

  • rvnewell started the conversation
    February 9, 2018 at 12:43pm

    I want to be able to control borders and box shadows of images inside the portfolio item templates (side, zig zag, etc.)as well as inside the image galleries I manually place on the pages so all images have the same styling.  In a previous ticket, I was told to add this CSS and adjust accordingly: 

    .wpb_single_image .vc_single_image-wrapper.vc_box_shadow, 
    .wpb_single_image .vc_single_image-wrapper.vc_box_shadow img, 
    .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border, 
    .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border img, 
    .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border_circle, 
    .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border_circle img, 
    .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_circle, 
    .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_circle img {
        box-shadow: none;
        -webkit-box-shadow: none;
    }

    I then adjusted the box-shadow and webkit box shadow specs.  However, there's been no difference in the images inside the portfolio templates. 

    How can I control those images the same way I can the ones inside the image galleries I manually place on the page?

  • [deleted] replied
    February 11, 2018 at 12:16am

    Hi there,

    I have view your old ticket  #1453722, the portfolio item from here, I couldn't find the Custom CSS you should added in your site, please read the following article we wrote about How to Add Custom CSS to your site, then paste the code below in Custom CSS Section.

    .wpb_single_image .vc_single_image-wrapper.vc_box_shadow, 
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow img, 
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border, 
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border img, 
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border_circle, 
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border_circle img, 
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_circle, 
.wpb_single_image .vc_single_image-wrapper.vc_box_shadow_circle img {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

    Thank you.

  • rvnewell replied
    February 12, 2018 at 12:37pm

    I have applied the css in three separate places:  under the CSS gear icon at the top of the page when editing in the WP Page Builder, in the CSS tab below Page Options and in the CSS tab under Theme Options.  The only thing that worked was putting it in Theme Options. However, it only applied to image galleries (which I don't need), not the portfolio item template galleries (side, zig zag, etc.), which I do need.  

  • [deleted] replied
    February 13, 2018 at 6:04am

    Hi there,

    I have tried to make one for all not sure how this will look in different cases, for global aspect of usage add the code below only in Custom CSS.

    .single-portfolio .wpb_single_image .vc_single_image-wrapper.vc_box_shadow, 
.single-portfolio .wpb_single_image .vc_single_image-wrapper.vc_box_shadow img, 
.single-portfolio .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border, 
.single-portfolio .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border img, 
.single-portfolio .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border_circle, 
.single-portfolio .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_border_circle img, 
.single-portfolio .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_circle, 
.single-portfolio .wpb_single_image .vc_single_image-wrapper.vc_box_shadow_circle img,
.single-portfolio-holder .gallery .photo{
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

    Thank you.