Support » Plugin: WordPress Popular Posts » I need this customize, help?

  • Resolved popuplarwphelp

    (@popuplarwphelp)


    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 Héctor 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.

    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 Héctor 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.
    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 Héctor 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;
            }
    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.