Support » Plugin: WordPress Related Posts » [Plugin: WordPress Related Posts] How to edit the CSS?

Viewing 6 replies - 1 through 6 (of 6 total)
  • xdaseinx

    (@xdaseinx)

    Hey!
    Yes true, the plugin right now is made so you can’t change the css. However in the new version there’s an option to do that! The update should come in the next few days.

    However, could you show me your website where this is happening, we can maybe fix it from here.

    Best,
    Rok

    Plugin Author jureham

    (@jureham)

    Hi,
    the new version of the plugin supports custom css. Go to plugin’s settings page and select custom under themes.

    If you’re using thumbnails, you’ll probably want to start with something like this:

    .related_post_title {
    	clear: both;
    	padding: 0 !important;
    	margin: 0 !important;
    }
    
    ul.related_post {
    	display: block;
    	position: relative;
    	margin: 0;
    	padding: 0;
    }
    ul.related_post li {
    	display: inline-block;
    	vertical-align: top;
    	zoom: 1;
    	*display: inline;
    	width: 100px;
    	margin: 10px 10px 10px 0px;
    	padding: 0;
    	background: none;
    }
    ul.related_post li a {
    	display: block;
    	font-size: 12px;
    	line-height: 1.5em;
    	text-decoration: none;
    	padding-bottom: 5px;
    }
    ul.related_post li img {
    	display: block;
    	width: 100px !important;
    	height: 100px !important;
    }
    ul.related_post li small {
    	font-size: 80%;
    }

    Best, Jure

    akedv

    (@ak71)

    i was just looking for exactly this information, thx jureham!

    boolan3

    (@boolan3)

    Hi Jureham,

    I tried adding the css you pasted above, but it didn’t turn out the way I wanted it to look. Here’s a screenshot of what I want my related posts to look: http://i.imgur.com/SmM6D.png
    Could you paste the CSS that will make it look just like this?

    Plugin Author jureham

    (@jureham)

    Hi boolan,
    sorry for the late response.
    I think this is what you’re looking for:

    .related_post_title {
    	clear: both;
    	padding: 0 !important;
    	margin: 0 !important;
    }
    
    ul.related_post {
    	display: block;
    	position: relative;
    	margin: 0 !important;
    	padding: 0 !important;
    }
    ul.related_post li {
    	display: inline-block;
    	vertical-align: top;
    	zoom: 1;
    	*display: inline;
    	width: 160px;
    	margin: 10px 20px 10px 0px  !important;
    	padding: 0 !important;
    	background: none;
    }
    ul.related_post li a:nth-child(1) {
    	height: 100px;
    	overflow: hidden;
    	border: 1px solid #ddd;
    }
    ul.related_post li a {
    	display: block;
    	font-size: 12px;
    	line-height: 1.5em;
    	padding: 3px 0 5px 0;
    	text-decoration: none;
    }
    ul.related_post li a:hover {
    	text-decoration: underline;
    }
    ul.related_post li img {
    	display: block;
    	width: 160px !important;
    	height: 160px !important;
    	margin-top: -30px;
    	max-width: 100%;
    }
    ul.related_post li small {
    	font-size: 80%;
    }

    Best, Jure

    boolan3

    (@boolan3)

    Jure,

    I appreciate this. Keep up the great work.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Plugin: WordPress Related Posts] How to edit the CSS?’ is closed to new replies.