margin between thmbnail and text

  • Resolved TK Valentino

    (@tk-valentino)


    9 years, 11 months ago

    Hello,
    I’m testing WordPress Popular Post now.
    I hace 3 questions.

    I want to make margin between thumbnail and text.
    How can I do?

    I have another question.
    When I use this widget, sometimes it becomes in two rows.
    I want display only one row.
    How can I save this?

    3rd question is how control the font size of comments, views, and category like original version?

    I read forum and I added these 2codes.

    .wpp-list li {
	/* display: inline-block; */
	float: none;
	clear: left;
	margin-bottom: 5px!important; /*NEW*/
}

.wpp-list li {
    display: inline-block;
    float: none;
    clear: left;
    margin: 0 0 0 -30px;

    background-image: none!important; /* NEW */
}

And Post HTML Markup:

<li>{thumb} <b> {title} </b> <p> <font size="7"  color="#db9e8b"> {stats} </font></p></li>

    thanks
    TK Valentino

    https://www.ads-software.com/plugins/wordpress-popular-posts/

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

    (@hcabrera)

    Hi TK!

    I want to make margin between thumbnail and text.
    How can I do?

    Uncomment the display: inline-block; property from .wpp-list li, like this:

    .wpp-list li {
	display: inline-block;
	float: none;
	clear: left;
	margin-bottom: 5px!important; /*NEW*/
}

    When I use this widget, sometimes it becomes in two rows.
    I want display only one row.

    That must be your theme’s CSS affecting the layout. Post your site’s URL so I can take a look.

    3rd question is how control the font size of comments, views, and category like original version?

    You can use the .post-stats CSS class to change their font size.

    Thread Starter TK Valentino

    (@tk-valentino)

    Thank you for your answer.

    Our site URL is
    https://luv2luvbaby.wp-x.jp/

    I left code only

    .wpp-list li {
    display: inline-block;
    float: none;
    clear: left;
    margin: 0 0 0 -30px;
    margin-bottom: 5px!important; /*NEW*/
    background-image: none!important; /* NEW */
    }

    But space Between Thumbnail and text is still nothing to change.
    I want change to like this.

    https://luv2luvbaby.wp-x.jp/wp-content/uploads/2015/04/screen_shot_04_24_15.jpg

    regards
    TK Valentino

    Plugin Author Hector Cabrera

    (@hcabrera)

    That’s because you’re making changes in the wrong place ?? Try this:

    // This affects the LI element
.wpp-list li {
    display: inline-block;
    float: none;
    clear: left;
    margin: 0 0 5px -30px;
    background-image: none!important; /* NEW */
}

// This affects the thumbnail
.wpp-thumbnail {
    display:inline;
    float:left;
    margin:0 5px 0 0;
    border:none;
}

    After reading your domain name, I’m not sure if your site is Safe For Work (NSFW) or Not, so I can’t browse it right now ??

    Thread Starter TK Valentino

    (@tk-valentino)

    Hi Héctor,
    I try

    .wpp-list li {
    display: inline-block;
    float: none;
    clear: left;
    margin: 0 0 5px -30px;
    background-image: none!important; /* NEW */
    }

    .wpp-thumbnail {
    display:inline;
    float:left;
    padding:0 10px 0 0;
    border:none;
    }

    and looks good.
    Is that wrong?

    Our server is not dedicated.
    Locate in japan,and specializes for WordPress, named wpx of XSERVER.
    And our site isn’t open yet.
    We open after several days.

    Thank you.
    TK Valentino

    Plugin Author Hector Cabrera

    (@hcabrera)

    Looks good to me. Is there anything else I can help you with?

    Thread Starter TK Valentino

    (@tk-valentino)

    Hi Héctor,

    I am grateful to your early response and the correct advice.

    Thank you
    TK Valentino

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘margin between thmbnail and text’ is closed to new replies.