[Plugin: Contextual Related Posts] Custom CSS Image Wrap

  • Resolved deez

    (@devonscalisi)


    12 years, 5 months ago

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

    https://www.ads-software.com/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?

    Thread Starter deez

    (@devonscalisi)

    Here’s my homepage. You’ll see the wrap execute on load. (Also, excuse my grammer errors from the previous post.)

    https://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 https://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.