[Support request] Formatting of Cards

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Formatting of Cards

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #27253
    Dave
    Participant

    Is there a way to make my posts show like this with WPSP?
    https://www.tripsavvy.com/budget-travel-4138662
    Basically, I am looking for a category overlay and title.

    Cheers,

    Dave

    #27265
    elvin
    Moderator

    Hi there,

    It should be possible with a bit of PHP snippet and CSS.

    Try adding this CSS:

    .wpsp-terms-wrapper {
        position: absolute;
        bottom: 0;
        left: 5%;
        transform: translateY(50%);
        z-index: 9999;
        background-color: yellow;
    }
    
    .wp-show-posts-image.wpsp-image-center {
        overflow: visible;
        position: relative;
    }

    And this PHP code snippet to make it overlay on the image:

    add_action('wpsp_inside_image_container',function(){
    	echo '<div class="wpsp-terms-wrapper">'.get_the_term_list( get_the_ID(), 'category', '', apply_filters( 'wpsp_term_separator', ', ' ) ).'</div>';
    });
    #27312
    Dave
    Participant

    Is there a way to apply it to certain lists?

    Cheers,

    Dave

    #27344
    elvin
    Moderator

    All list will have what we added on the add_action() snippet as we don’t have access to the list data when using add_action() and remove_action().

    But we can control what list displays the added code on wpsp-terms-wrapper with CSS.

    We start with this CSS:

    .wpsp-terms-wrapper {
        display:none;
    }

    This ensures wpsp-terms-wrapper doesn’t just display by default.

    we then do this CSS:

    #wpsp-1234 .wpsp-terms-wrapper {
        display: block !important
        position: absolute;
        bottom: 0;
        left: 5%;
        transform: translateY(50%);
        z-index: 9999;
        background-color: yellow;
    }
    
    #wpsp-1234 .wp-show-posts-image.wpsp-image-center {
        overflow: visible;
        position: relative;
    }

    Where 1234 is your WPSP id. This will display the wpsp-terms-wrapper only of a specific WPSP list with the specified ID. 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.