WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Related Posts
[resolved] How to edit the CSS? (7 posts)

  1. boolan3
    Member
    Posted 1 year ago #

    I can't for the life of me figure out where the CSS file for the plugin is. I would like to edit the CSS to put better margin spacing between each thumbnail item, reduce the giant left margin to make it align on the left edge and put more spacing above the Related Posts heading. How do I do this?

    http://wordpress.org/extend/plugins/wordpress-23-related-posts-plugin/

  2. xdaseinx
    Member
    Plugin Author

    Posted 1 year ago #

    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

  3. jureham
    Member
    Plugin Author

    Posted 1 year ago #

    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

  4. akedv
    Member
    Posted 1 year ago #

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

  5. boolan3
    Member
    Posted 1 year ago #

    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?

  6. jureham
    Member
    Plugin Author

    Posted 1 year ago #

    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

  7. boolan3
    Member
    Posted 1 year ago #

    Jure,

    I appreciate this. Keep up the great work.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.