CSS to put titles below thumbnails?

Hi there!

Let’s make a couple of changes. Try the following:

1. Go to Plugins > Editor and select WordPress Popular Posts from the dropdown.
2. Click on wordpress-popular-posts/style/wpp.css to edit the stylesheet.
3. Find:

   .wpp-list li {
     float: none;
     clear: left;
   }

   and change it to:

   .wpp-list li {
     overflow: hidden;
     float: none;
     clear: both;
   }

4. Find:

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

   and change it to:

   .wpp-thumbnail {
     display: block;
     margin: 0 auto 5px auto;
     border: none;
   }

5. Click on Update file to save changes.

You should also move the wpp.css stylesheet into your theme’s directory. This will help you keep your custom CSS styles across plugin updates since WordPress overwrites all plugin files during upgrades.

Hi Hector!
Thanks so much for the quick response. I did what you suggested and it helped a little (now only one or two words appear on the right with the rest underneath.)

I have a large screen. When you reduce the screen size, it works, but when full size it doesn’t.

Any other suggestions?

I really appreciate it.

https://www.ifitshipitshere.com

laura

Hey Laura,

Did you hit the Update file button after making the changes? I still see the old CSS styles ??

I did, check it again. You probably looked when I was playing with something. I took them out and put them back in again, lol.

Please check now.

Out of curiosity, why does the plug in say inactive when I pull it up in the plug ins editor?

the header says this:
Editing wordpress-popular-posts/style/wpp.css (inactive)

something to do with the theme maybe?

I did, check it again. You probably looked when I was playing with something.

I tell that often to my boss ??

There are a few odd characters in front of the CSS properties in .wpp-list li and .wpp-thumbnail causing the styles to break (see the ? characters?). Please remove them and reload the page.

Out of curiosity, why does the plug in say inactive when I pull it up in the plug ins editor?

I’ve seen it, too. It’s an old WordPress bug that will be fixed someday. Basically, the WordPress editor marks all files as inactive except for the main plugin files (wordpress-popular-posts.php in this case), even if the plugin is active.

I don’t see the odd characters ? here’s what I see:

/*
Wordpress Popular Posts plugin stylesheet
Developed by Hector Cabrera

Use the following classes to style your popular posts list as you like.
*/

.wpp-list { /* UL element */

}

.wpp-list li {
overflow: hidden;
float: none;
clear: both;
}

/* title styles */
.wpp-post-title {
}

/* thumbnail styles */
.wpp-thumbnail {
display: block;
margin: 0 auto 5px auto;
border: none;
}

/* excerpt styles */
.wpp-excerpt {
}

/* Stats tag styles */
.post-stats {
display:block;
font-size:9px;
font-weight:bold;
}

.wpp-comments {
}

.wpp-views {
}

.wpp-author {
}

.wpp-date {
}

/* WP-PostRatings styles */
.wpp-rating {
}

I just uploaded a screenshot so you can see what I mean.

That did it! You’re the best!
Thanks so much Hector.

Don’t mention it ??