• Resolved Eric B.

    (@losteineu)


    Hi there, on my blog, I am currently using the WPP widget. Now I’m told that you are going to deprecate it and to use the block widget instead. But I do not find it among my widgets. If I try to use a block widget, it asks for HTML code! So I tried a text widget with shortcode. But I’ve no idea how to reproduce the beautiful widgets I currently have. Please help!

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

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

    (@hcabrera)

    Hi @losteineu,

    Now Iā€™m told that you are going to deprecate it and to use the block widget instead. But I do not find it among my widgets.

    I guess you’re using the Classic Widgets plugin on your site? If so then that’s why you can’t find the block and in that case -as you said yourself- it might make more sense to use the [wpp] shortcode instead.

    This is the shortcode version of the Sunset-themed popular post list:

    [wpp header='Trending' header_start='<h2 class="widgettitle">' header_end='</h2>' limit=3 range='last24hours' stats_views=0 wpp_start='<ul class="wpp-list wpp-sunset">' post_html='<li class="{current_class}" style="--item-position: {item_position}; --total-items: {total_items};"><div class="item-position"></div> <div class="item-data">{title}</div></li>' wpp_end='</ul>']

    You may need to copy these CSS rules to your site either via Appearance > Customize > Additional CSS or by adding them to your theme’s style.css file.

    And this is the Sunrise-themed popular posts shortcode:

    [wpp header='Meistgelesen' header_start='<h2 class="widgettitle">' header_end='</h2>' limit=3 range='all' stats_views=0 wpp_start='<ul class="wpp-list wpp-sunrise">' post_html='<li class="{current_class}" style="--item-position: {item_position}; --total-items: {total_items};"><div class="item-position"></div> <div class="item-data">{title}</div></li>' wpp_end='</ul>']

    And these are its CSS rules.

    If you have any comments / questions please let me know.

    Thread Starter Eric B.

    (@losteineu)

    Thanks a lot. I tried the shortcode without CSS rules, but this does not work out well. Do I really need to add CSS, isn’t there a simpler solution?

    Cheers

    Eric

    Plugin Author Hector Cabrera

    (@hcabrera)

    You need to add the CSS rules to your site for the list to be styled properly @losteineu, otherwise it won’t render on screen as expected (I guess this is what you mean by “does not work out well”, if it’s not that then please explain in more detail).

    Thread Starter Eric B.

    (@losteineu)

    Honestly, I’m not comfortable with adding CSS just to replace two widgets…

    Plugin Author Hector Cabrera

    (@hcabrera)

    The widget itself is loading the exact same CSS rules for your popular posts widgets though @losteineu šŸ˜› Feel free to check the HTML source code to see by yourself.

    Thread Starter Eric B.

    (@losteineu)

    Ok will check it out then

    Thread Starter Eric B.

    (@losteineu)

    Hello, I tried with the “Trending” widget, bit it does not work out well (see screenshot)

    Plugin Author Hector Cabrera

    (@hcabrera)

    Hi @losteineu,

    Looks like you forgot to share the screenshot. Can you please describe in detail what’s wrong?

    Plugin Author Hector Cabrera

    (@hcabrera)

    Marking as resolved due to inactivity.

    OP, if you still need a hand with this please feel free to leave a comment below.

    Thread Starter Eric B.

    (@losteineu)

    Hi Hector,

    sorry for the belated answer, I was on holidays šŸ™‚

    So here is the screenshot. The old widget (yellow) is above, the new (shortcode) on the bottom.

    As you can see, the width is not okay. The time range has changed, too… What changes shoud I make?

    Kind regards,

    Eric

    Plugin Author Hector Cabrera

    (@hcabrera)

    Hi @losteineu,

    I’m not home right now (and won’t be for a few hours) but from the screenshot I can tell it’s your theme’s CSS rules overriding the shortcode ones, hence why it looks like that. In case you’re wondering why it doesn’t happen to the widget version here’s a short explanation.

    I need to see the actual list (the “broken” one) on your site in order to determine which styles are being overriden by your theme to tell you how to sort it out so either leave the shortcode version on your sidebar so I can check it out later or if you’d rather not have the broken shortcode popular post list visible to your viewers for potentially hours then let me know when you’re available (I’m in the EST timezone) and we can coordinate a time when we’re both online to work on this.

    As for the time range question, the range parameter is what controls this for the shortcode. Valid values are ‘last24hours’, ‘last7days’, ‘last30days’, ‘all’ and ‘custom’ (see Parameters for more details). Use whatever value matches with the Time Range dropdown from the widget and you should be good to go.

    Thread Starter Eric B.

    (@losteineu)

    I’m using the Themify magazine theme – does this help?

    Plugin Author Hector Cabrera

    (@hcabrera)

    Unfortunately it’s a paid theme, so no, it doesn’t as I’m not really willing to buy it just to test something one time.

    If you can add the shortcode now to your sidebar I can look into it right away since I have time and I’m available.

    Thread Starter Eric B.

    (@losteineu)

    What shortcode? Is it this one?

    .wpp-sunset {
    counter-reset: wpp-counter;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border-right: 6px solid rgb(234, 51, 51);
    box-sizing: border-box;
    }

    .wpp-sunset li {
        position: relative;
        display: flex;
        align-items: center;
        counter-increment: wpp-counter;
        position: relative;
        list-style: none;
        margin: 0;
        padding: 15px 15px 15px 0;
        background: rgba(234, 51, 51, calc((((var(--total-items) - (var(--item-position) - 1)) * 100)/var(--total-items))/100));
        box-sizing: border-box;
    }
    
    .in-preview-mode .wpp-sunset li {
        margin: 0;
        padding: 15px 15px 15px 0;
    }
    
        .wpp-sunset li .item-position::before {
            display: inline-block;
            flex: 1 0 0;
            content: counter(wpp-counter);
            color: rgba(0, 0, 0, 0.15);
            width: 40px;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -1px;
            text-align: center;
        }
    
            .wpp-sunset li .item-data .wpp-post-title {
                display: block;
                font-size: 15px;
                font-weight: 700;
                line-height: 1.3;
            }
    
            .wpp-sunset li .item-data a {
                color: #222;
                text-decoration: none;
            }
    
            .wpp-sunset li .item-data  a:hover {
                text-decoration: underline;
            }

    Plugin Author Hector Cabrera

    (@hcabrera)

    Please follow these instructions, then leave a comment here when you’re done and I’ll have a look.

    Edit: oh, also remember to set the range parameter accordingly as mentioned here.

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘WPP Widget’ is closed to new replies.