Site logo

Archived topic

Text over image sidabar

7 replies · Started by Roger on April 30, 2022

Viewing posts 1–8 of 8

Hi!

How do I make the post carousel with text over image as in the top of the sidebar of the Dispatch site? Can´t seem to find the right info (even though Im pretty sure it's there).

//Roger

Yes, C, exactly. Sorry about my sometimes lousy english, didnt mean a carousel. Would like to replicate C :)

Hi Roger,

1. Go to appearance > wp show posts, create a new list. (make sure you you have WP show posts plugin installed)

2. Checkimagebox, Image location: above title.
Content type: None.
check the Includetitle box.
Check Include termsbox, terms location: below title.

3. Add the list shortcode (eg. [wp_show_posts id="1207"])to your sidebar using a shortcode block

4. Add this CSS:

 .wpsp-card .wpsp-content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5% 8%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.35);
    background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}
   :not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image {
    margin-bottom: 0 !important;
}
.widget .wp-show-posts article {
    margin-bottom: 0.5em !important;
}

Let me know if this helps :)

Didnt work I'm afraid. The CSS didn't change the look of the posts...

Did you originally install the Dispatch Site ? Or are you just trying to copy that style ?

Yes, I have the dispatch site. Didn't import demo content though...

Aah ok.
So you will need to add this PHP Snippet to your site first:

add_action( 'wpsp_before_header' , function() {
    ?>
    <div class="wpsp-content-wrap">
    <!-- Openeing wrapper -->
    <?php
}, 15 );

add_action( 'wpsp_after_content' , function() {
    ?>
    <!-- Close WPSP Wrapper -->
    </div>
    <?php
}, 15);

This will add the adding a <div> wrapper to the WPSP content.

How to add PHP:
https://docs.generatepress.com/article/adding-php/

This archived topic is closed to new replies.