I need this customize, help?

  • Resolved popuplarwphelp

    (@popuplarwphelp)


    5 years, 10 months ago

    Hello,
    I was using another plugin to show my visitors popular posts.
    But i changed my plugin to wordpress popular posts.
    Therefore, i cannot customize this plugin to what i want.
    This is what this plugin looks like as widget: https://pasteboard.co/Ifk0aJfq.jpg

    That is the plugin that i used before, i want to make wp popular post plugin appearence same like this screenshot: https://pasteboard.co/IfjZpIy.jpg
    My old plugin css settings was: 

    .widget_post_views_counter_list_widget li {overflow:hidden;} .popular-title {clear:none;}
.popular-post-wrapper {display:block; overflow:hidden;}
.popular-post-wrapper + .popular-post-wrapper {margin-top:20px;}
.popular-thumbnail-container {float:left; width: 100px; margin: 0 20px 0 0;}
.popular-title {font-size:18px;}
.popular-content, .popular-counter {display:none;}

    which codes should i use to make widget looks like the second screenshot? Thanks.

    The page I need help with: [log in to see the link]

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

    (@hcabrera)

    Hi @popuplarwphelp,

    I can help out but for that you also need to share the HTML markup of your previous popular list if you want WPP to look just like/close enough to your design.

    Thread Starter popuplarwphelp

    (@popuplarwphelp)

    Thanks for replying,
    Actually there is no settings for html markup and i dont know what it is.
    Someone did css settings for me before but my old plugin has not a settings for html markup like popularpost plugin.

    Plugin Author Hector Cabrera

    (@hcabrera)

    Alright, let’s try something else:

    1. Go to Settings > WordPress Popular Posts > Tools.
    2. Under Miscellaneous, set Use plugin’s stylesheet to Disabled and click on Apply to save changes.
    3. Go to Appearance > Customize.
    4. Click on Additional CSS to add this: 
      .wpp-list {
    margin: 0;
    padding: 0;
}

    .wpp-list li {
        display: flex;
        justify-content: space-between;
        padding: 0;
        list-style: none;
    }

        .wpp-list li a:first-of-type {
            flex: 0 0 75px; /* 75px is the width of the thumbnail */
        }

            .wpp-list li a:first-of-type .wpp-thumbnail {
                display: block;
                width: 100%;
                height: auto;
            }

        .wpp-list li .wpp-post-title {
            font-weight: bold;
        }
    5. Finally, clear WP Rocket’s cache.
    Thread Starter popuplarwphelp

    (@popuplarwphelp)

    The new looking is: https://pasteboard.co/IfsWPSr.jpg
    I think i need blank between thumbnails and, i need blank between heading and thumbnail like my old widget.
    Could you help for these?
    The other things are really good, thanks.

    Plugin Author Hector Cabrera

    (@hcabrera)

    Ah, my bad. I forgot to include some CSS rules. Follow the same instructions as before from steps 3 to 5, only this time use these updated rules instead:

    .wpp-list {
    margin: 0;
    padding: 0;
}

    .wpp-list li {
        display: flex;
        justify-content: space-between;
        margin: 0 0 1rem;
        padding: 0;
        list-style: none;
    }

        .wpp-list li a:first-of-type {
            flex: 0 0 75px; /* 75px is the width of the thumbnail */
            margin-right: 1rem;
        }

            .wpp-list li a:first-of-type .wpp-thumbnail {
                display: block;
                width: 100%;
                height: auto;
            }

        .wpp-list li .wpp-post-title {
            font-weight: bold;
        }
    Thread Starter popuplarwphelp

    (@popuplarwphelp)

    Oh thanks so much.
    I gave 5 star cuz of your additional support.
    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘I need this customize, help?’ is closed to new replies.