Post title does not wrap around thumbnail

  • Resolved Julius E

    (@julius-e)


    10 years, 9 months ago

    Hi Hector,

    I recently switched themes to Smartmag and the titles of my posts in the WPP widget on the sidebar appear under the thumbnail as opposed to wrapping around it. Do you know how I can resolve this so that they wrap properly?

    This is what I have in wpp.css:

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

    /* Styles the “Sorry, no data so far” message */
    .wpp-no-data {
    }

    /* UL – Popular Posts container styles */
    .wpp-list {
    }

    /* LI – Post container styles */
    .wpp-list li {
    /*overflow:hidden;*/
    float:none;
    clear:both;
    list-style-position:outside;
    margin-left:15px;
    }

    /* Thumbnail styles */
    .wpp-thumbnail {
    display:inline-block;
    float:left;
    margin:0 5px 0 0;
    border:none;
    }

    Thanks in advance

    https://ww.wp.xz.cn/plugins/wordpress-popular-posts/

Viewing 15 replies - 1 through 15 (of 21 total)
1 2
  • Thread Starter Julius E

    (@julius-e)

    10 years, 9 months ago

    Hi again Hector,

    As a follow up, I should mention I have three instances of the widget inside a tabbed widget called “Bunyad – Tabber Advanced”. In another instance where WPP is on the sidebar as a single widget, text seems to wrap properly, although the separators between posts are all over the place.

    Hope this helps

    Plugin Author Hector Cabrera

    (@hcabrera)

    10 years, 9 months ago

    Hi Julius!

    Can’t tell what might be going on without taking a look at your site 😛

    Thread Starter Julius E

    (@julius-e)

    10 years, 9 months ago

    Hi Hector thanks for your reply. Unfortunately it’s in maintenance mode so it’s not publicly available. Is there any other way I can help identify the problem?

    As I say, the text wrapping issue seems to appear only when WPP is inserted in the 3 tab widget. As a standalone widget in the sidebar the text appears to wrap normally. The previous theme didn’t have this issue, but obviously it used a different 3-tab widget.

    Also, do you by any chance have any css recommendations on how to make the plugin produce a numbered widget? Something like the “most popular” sections of The Guardian or BBC News?

    Thanks again!

    Plugin Author Hector Cabrera

    (@hcabrera)

    10 years, 9 months ago

    It must be something with the tab widget causing the issue. Then again, it’s hard to identify what exactly is the problem without taking a look at it.

    Also, do you by any chance have any css recommendations on how to make the plugin produce a numbered widget? Something like the “most popular” sections of The Guardian or BBC News?

    As a matter of fact, yes I do 🙂 https://github.com/cabrerahector/wordpress-popular-posts/wiki/6.-Styling-the-list. It’s not the most extensive tutorial, but it should help get you started.

    Thread Starter Julius E

    (@julius-e)

    10 years, 9 months ago

    Thanks a lot Hector, I’ll look into that. I’ll see if I can also create an instance of the problem with the tabbed widget in a hidden page so that you can have a look at it.

    Thanks again for all your help.

    Thread Starter Julius E

    (@julius-e)

    10 years, 6 months ago

    Hi Hector,

    I’d like to revisit this issue with you if I could. Briefly, so you don’t have to reread the thread, putting WPP in a tabbed widget creates problems with text wrapping around the thumbnails.

    I’ve created a tab here: http://urlgone.com/44043b/ for you to see the tab and perhaps what the problem might be. Your plugin is by far the most feature rich and I’d really really like to be able to use 3 instances of it in a tab.

    FYI I have not activated HTML in any of the widgets or changed WPP.css in any way or disabled it in the settings.

    Many thanks in advance for your help

    Thread Starter Julius E

    (@julius-e)

    10 years, 6 months ago

    Hi Hector, any chance you’ve had a look at this issue?

    Many thanks

    Plugin Author Hector Cabrera

    (@hcabrera)

    10 years, 6 months ago

    Hi there!

    Nope, I haven’t had the time to take a look. I’ve been only helping out here with minor things and questions -stuff that won’t take too much time to solve/answer- due to the large amount of work I currently have.

    I’ll stop by once the workload eases up a bit.

    Thread Starter Julius E

    (@julius-e)

    10 years, 6 months ago

    Hi Hector, thanks for letting me know. I’ll wait to hear from you.

    Plugin Author Hector Cabrera

    (@hcabrera)

    10 years, 6 months ago

    Hi Julius!

    Just checked your site. The problem is related to a float property being applied to the post title (see screenshot). Removing it fixes the issue.

    If you need to keep the float property for some reason, you can make WPP’s post title ignore it:

    .wpp-post-title {
    float: none!important;
}
    Thread Starter Julius E

    (@julius-e)

    10 years, 6 months ago

    Hi Hector, that’s great, thank you very much. Have you noticed that the thumbnails are blurry? Do you know what I can do to fix that?

    Plugin Author Hector Cabrera

    (@hcabrera)

    10 years, 6 months ago

    That’s because the images are 50px x 50px and they’re being resized via CSS to 85px x 85px, causing the blurred effect.

    You need to either increase WPP’s thumbnail size to 85×85 or adjust your theme’s stylesheet to set images’ size to 50×50.

    Thread Starter Julius E

    (@julius-e)

    10 years, 6 months ago

    Hi Hector, sorry for so many follow up questions. Do you mean the tab plugin stylesheet? The reason I’m asking is because I have a single instance of WPP on every sidebar/page of the site (not inside a tab widget) with thumbnails set at 50×50 and it displays them correctly.

    Again, apologies and thank you for your patience and help 🙂

    Plugin Author Hector Cabrera

    (@hcabrera)

    10 years, 6 months ago

    Nope, it’s from your theme’s stylesheet actually (screenshot):

    .posts-list img {
    float: left;
    width: 85px;
    height: auto;
}
    Thread Starter Julius E

    (@julius-e)

    10 years, 6 months ago

    Hi Hector, finally got this to work. Thank you very much for your help and patience.

    One (hopefully) final question: I want to create a section on my home page about 700px across, with two horizontal rows of three WPP posts. If possible I’d like the thumbnails to be approx 230x width and the title to appear below in H4 (with optional excerpt). If you could help, I’d appreciate it.

    Many thanks again.

Viewing 15 replies - 1 through 15 (of 21 total)
1 2

The topic ‘Post title does not wrap around thumbnail’ is closed to new replies.