Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

[Support request] CSS for Cards

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support CSS for Cards

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #20207
    Alejandro
    Participant

    Hi,
    I am trying to achieve something like this (https://imgur.com/a/vSaGXik). I am trying to see if any card design fits in, but I have not found any, so I presume that I’ll have to Css any of them.
    Could you tell me how to proceed?

    Thank you

    #20226
    David Beckwith
    Participant

    Hi there,

    how does that differ from the standard layout or the Base Card as seen here:

    https://demos.wpshowposts.com/cards/

    #20235
    Alejandro
    Participant

    Hi!
    There’s two differences. Everything is in spanish but:
    1) Instead the simple date (i.e. November 26, 2018) y do have set up in my blog: Actualizado: November 26, 2018
    2) I want to add the comments link but shaped like the image in my first message. Now, I got this (again in spanish, which is ok) in plain text, no bubbles: “Deja un comentario”.

    View post on imgur.com

    any thoughts?

    Thanks you!

    Alex

    #20283
    elvin
    Participant

    Hi Alex,

    1) To clarify, you want the date to be displayed with “Actualizado:” prefix?

    If so, you can easily do that by adding this CSS code:

    time.wp-show-posts-entry-date.published:before {
        display: inline-block;
        content: "Actualizado:";
        margin-right: 5px;
    }

    2) I’m not sure I understand. Can you explain a bit more? What did you mean by “shaped like the image in my first message”?

    I’ve checked the image on your first message and it’s just plain layout wireframe.

    Did you mean spacing? or perhaps, text alignment?

    #20298
    Alejandro
    Participant

    hi,
    Just to clarify, what I am trying to achieve is the same look that have my blog roll in Generate Press: https://imgur.com/a/lN5AWwf
    To have the “actualizado” I had to modify the php code, it is not a css thing.

    Regards

    #20341
    elvin
    Participant

    Just to clarify, what I am trying to achieve is the same look that have my blog roll in Generate Press: https://imgur.com/a/lN5AWwf

    Can you link us to the site in question? Perhaps we can borrow GP’s icons for WPSP list’s use by adding a CSS :before pseudo element using GP’s icon as reference.

    To have the “actualizado” I had to modify the php code

    Nice one. Yeah that’ll work. It’s a matter of preference. CSS will work too. 🙂

    #20435
    Alejandro
    Participant

    Here you go: https://proyectoviajero.com/blog/

    best, Alex

    #20528
    Tom
    Keymaster

    The CSS that Elvin provided should work for the date – no need to use PHP there.

    As for the comments, are you trying to copy the style you’re using with GP? Where can we see your WPSP list?

    Let us know 🙂

    #20537
    Alejandro
    Participant

    Thanks Tom,
    What do you mean with ” WPSP list ”

    Thanks,

    Alex

    #20569
    Alejandro
    Participant

    Hi, have you found any solution for this? Regards

    #20573
    Tom
    Keymaster

    Hi there,

    I mean where can we see the list of posts being output by WPSP that you’re targeting? All I’m seeing at your URL is the GP posts.

    Let me know 🙂

    #20577
    Alejandro
    Participant
    #20583
    Tom
    Keymaster

    Cool, and to confirm, you’re wanting to add the SVG icon before the comment text?

    #20585
    Alejandro
    Participant

    That’s correct!
    And also, I implemented this in Generatedpress and I would like to show the latest date that a post was updated.

    Thank you!

    /* Filter post date to display latest date */
    add_filter( ‘generate_post_date_output’, function( $output, $time_string ) {
    $time_string = ‘<span class=”label”>Actualizado: </span><time class=”entry-date published” datetime=”%1$s” itemprop=”datePublished”>%2$s</time>’;

    if ( get_the_time( ‘U’ ) !== get_the_modified_time( ‘U’ ) ) {
    $time_string = ‘<span class=”label”>Actualizado: </span><time class=”entry-date updated-date” datetime=”%3$s” itemprop=”dateModified”>%4$s</time>’;
    }

    $time_string = sprintf( $time_string,
    esc_attr( get_the_date( ‘c’ ) ),
    esc_html( get_the_date() ),
    esc_attr( get_the_modified_date( ‘c’ ) ),
    esc_html( get_the_modified_date() )
    );

    return sprintf( ‘<span class=”posted-on”>%s</span> ‘,
    $time_string
    );
    }, 10, 2 );

    #20607
    Tom
    Keymaster

    For this you’ll need 1.2.0-alpha.3: https://wpshowposts.com/wp-show-posts-1-2-0/

    To add an icon before the comments link, you can do this:

    add_action( 'wpsp_before_comments_link', function( $settings ) {
        if ( 123 === (int) $settings['list_id'] ) {
            echo 'Your icon here';
        }
    } );

    And for the date, you can do this:

    add_filter( 'wpsp_post_date_show_updated_only', '__return_true' );
    
    add_filter( 'wpsp_date_output', function( $output, $settings, $time_string ) {
        $updated_time = get_the_modified_time( 'U' );
        $published_time = get_the_time( 'U' ) + 1800;
    
        if ( $updated_time > $published_time ) {
            return sprintf(
                'Actualizado: <span class="wp-show-posts-posted-on wp-show-posts-meta">
                    <a href="%1$s" title="%2$s" rel="bookmark">%3$s</a>
                </span>',
                esc_url( get_permalink() ),
                esc_attr( get_the_time() ),
                $time_string
            );
        }
    
        return $output;
    }, 10, 3 );
Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.