WordPress.org

Ready to get started?Download WordPress

Forums

Contextual Related Posts
[resolved] Custom CSS Image Wrap (7 posts)

  1. deez
    Member
    Posted 1 year 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;
    }

    http://wordpress.org/extend/plugins/contextual-related-posts/

  2. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    Can I see a page which has this image effects?

  3. deez
    Member
    Posted 1 year ago #

    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

  4. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    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;
    }
  5. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    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;
    }
  6. Udi
    Member
    Posted 1 year ago #

    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?

  7. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.