Title: [Plugin: Contextual Related Posts] Custom CSS Image Wrap Last modified: August 20, 2016 --- # [Plugin: Contextual Related Posts] Custom CSS Image Wrap * Resolved [deez](https://wordpress.org/support/users/devonscalisi/) * (@devonscalisi) * [13 years, 12 months ago](https://wordpress.org/support/topic/plugin-contextual-related-posts-custom-css-image-wrap/) * My theme used an image wrap on images that rounds out the corners of the image and creates a slight 3D effect. Do you have any advice how I would embed the image wrap into the plugin’s custom CSS field? I’m not entirely sure what I’m doing regarding thing. Below is the image wrap code taken from the style.css file in my theme. * Thanks! * ``` .image-wrap { position: relative; display: inline-block; zoom:1; *display:inline; max-width: 100%; vertical-align: bottom; } .image-wrap:after { content: ' '; width: 100%; height: 100%; position: absolute; top: -1px; left: -1px; border: solid 1px #222; -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } .image-wrap img { vertical-align: bottom; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 1px 2px rgba(0,0,0,.4); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } ``` * [http://wordpress.org/extend/plugins/contextual-related-posts/](http://wordpress.org/extend/plugins/contextual-related-posts/) Viewing 6 replies - 1 through 6 (of 6 total) * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [13 years, 12 months ago](https://wordpress.org/support/topic/plugin-contextual-related-posts-custom-css-image-wrap/#post-2791951) * Can I see a page which has this image effects? * Thread Starter [deez](https://wordpress.org/support/users/devonscalisi/) * (@devonscalisi) * [13 years, 12 months ago](https://wordpress.org/support/topic/plugin-contextual-related-posts-custom-css-image-wrap/#post-2791953) * Here’s my homepage. You’ll see the wrap execute on load. (Also, excuse my grammer errors from the previous post.) * [http://bit.ly/L4XHAG](http://bit.ly/L4XHAG) * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [13 years, 12 months ago](https://wordpress.org/support/topic/plugin-contextual-related-posts-custom-css-image-wrap/#post-2792057) * Not sure if it gets you the perfect effect but this code gave me some rounded boxes. You might need to combine some of the classes to avoid repetition. * ``` img.crp_thumb { position: relative; display: inline-block; zoom:1; *display:inline; max-width: 100%; vertical-align: bottom; } img.crp_thumb:after { content: ' '; width: 100%; height: 100%; position: absolute; top: -1px; left: -1px; border: solid 1px #222; -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } img.crp_thumb { vertical-align: bottom; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 1px 2px rgba(0,0,0,.4); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } ``` * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [13 years, 12 months ago](https://wordpress.org/support/topic/plugin-contextual-related-posts-custom-css-image-wrap/#post-2792058) * Update: You might not need the first part * ``` img.crp_thumb:after { content: ' '; width: 100%; height: 100%; position: absolute; top: -1px; left: -1px; border: solid 1px #222; -wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); -moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } img.crp_thumb { vertical-align: bottom; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4); box-shadow: 0 1px 2px rgba(0,0,0,.4); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; } ``` * [007me](https://wordpress.org/support/users/007me/) * (@007me) * [13 years, 10 months ago](https://wordpress.org/support/topic/plugin-contextual-related-posts-custom-css-image-wrap/#post-2792260) * Looks much nicer, but want to make it even better. Who can help me and provide a CSS code that will put all related posts in a table with 2 columns on each row? * Plugin Author [Ajay](https://wordpress.org/support/users/ajay/) * (@ajay) * [13 years, 10 months ago](https://wordpress.org/support/topic/plugin-contextual-related-posts-custom-css-image-wrap/#post-2792262) * You’ll need a modified version of [http://kevin.deldycke.com/2012/04/beautify-contextual-related-posts-wordpress-plugin/](http://kevin.deldycke.com/2012/04/beautify-contextual-related-posts-wordpress-plugin/) However, doing exact 2 columns requires you to choose the width of each `li` so that it is half the width of your content area Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘[Plugin: Contextual Related Posts] Custom CSS Image Wrap’ is closed to new replies. * ![](https://ps.w.org/contextual-related-posts/assets/icon-256x256.png?rev=2985705) * [Contextual Related Posts](https://wordpress.org/plugins/contextual-related-posts/) * [Frequently Asked Questions](https://wordpress.org/plugins/contextual-related-posts/#faq) * [Support Threads](https://wordpress.org/support/plugin/contextual-related-posts/) * [Active Topics](https://wordpress.org/support/plugin/contextual-related-posts/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/contextual-related-posts/unresolved/) * [Reviews](https://wordpress.org/support/plugin/contextual-related-posts/reviews/) * 6 replies * 3 participants * Last reply from: [Ajay](https://wordpress.org/support/users/ajay/) * Last activity: [13 years, 10 months ago](https://wordpress.org/support/topic/plugin-contextual-related-posts-custom-css-image-wrap/#post-2792262) * Status: resolved