WordPress.org

Support

Support » Plugins and Hacks » Contextual Related Posts » [Resolved] [Plugin: Contextual Related Posts] Custom CSS Image Wrap

[Resolved] [Plugin: Contextual Related Posts] Custom CSS Image Wrap

  • deez

    @devonscalisi

    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/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Ajay

    @ajay

    Can I see a page which has this image effects?

    deez

    @devonscalisi

    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

    Plugin Author Ajay

    @ajay

    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

    @ajay

    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;
    }

    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

    @ajay

    You’ll need a modified version of 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 ‘[Resolved] [Plugin: Contextual Related Posts] Custom CSS Image Wrap’ is closed to new replies.
Skip to toolbar