margin between thmbnail and text

Resolved TK Valentino
(@tk-valentino)

9 years 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} {title} {stats} </li>
```
thanks
TK Valentino

https://wordpress.org/plugins/wordpress-popular-posts/

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

Plugin Author Hector Cabrera
(@hcabrera)

9 years ago
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)

9 years ago

Thank you for your answer.

Our site URL is
http://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.

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

regards
TK Valentino
Plugin Author Hector Cabrera
(@hcabrera)

9 years ago
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)

9 years ago

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)

9 years ago

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

Thread Starter TK Valentino
(@tk-valentino)

9 years ago

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.

Tags