Archived topic
Text over image sidabar
7 replies · Started by Roger on April 30, 2022
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
Hi there,
the Dispatch site doesn't include a Carousel - this is a default install view:
https://www.screencast.com/t/9iOH76KWHb
Is the Area titled "C" your wanting to replicate ?
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/