We're merging with GenerateBlocks! Learn more here.

[Support request] Icon before title and date

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Icon before title and date

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #33383
    Stefan
    Participant

    Is it possible to add a svg icon before the title and date?

    #33401
    elvin
    Moderator

    Hi Stefan,

    It’s definitely possible.

    There are multiple ways to do it but the easiest way is by adding it through CSS (pseudo element)

    Example:

    time.wp-show-posts-entry-date.published:before {
    content: url('url-path/to/your/icon.svg');
    left: 0;
    margin-right: 5px;
    }
    
    time.wp-show-posts-entry-date.published {
        position: relative;
    }

    Replace the value on the url() to the file path to your SVG file.

    #33410
    Stefan
    Participant

    that’s not exactly what I want. Here is an example what I mean:
    example

    #33412
    Stefan
    Participant

    example

    #33442
    elvin
    Moderator

    To clarify:

    Do you want to replicate the exact layout or perhaps, just add the right chevron icon to the post title?

    #33466
    Stefan
    Participant

    The exact layout. Chevron right to the title and date right under the title.

    #33501
    elvin
    Moderator

    Try adding this CSS instead.

    .wp-show-posts-entry-title:before {
        content: "> ";
        position: absolute;
        left: 0;
        padding-right: 10px;
        transform: translateX(-100%);
    }
    
    .wp-show-posts-entry-title {
        position: relative;
    }

    The date should be automatically below the title if you set the date dropdown to display “Below title” on WPSP Edit page > Meta tab.

    If you’re trying to change its date format, you’ll have to filter it with PHP.

    Example:

    add_filter( 'wpsp_date_output', function($output, $settings, $time_string){
        if ( 123 === (int) $settings['list_id'] ) {
            $time_string = '<time class="wp-show-posts-entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
    
            if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
                $time_string .= '<time class="wp-show-posts-updated" datetime="%3$s" itemprop="dateModified">%4$s</time>';
            }
    
            $time_string = sprintf( $time_string,
                esc_attr( get_the_date( 'c' ) ),
                esc_html( get_the_date( 'm.d.y' ) ),
                esc_attr( get_the_modified_date( 'c' ) ),
                esc_html( get_the_modified_date( 'm.d.y' ) )
                );
    
            $output = sprintf(
                        '<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 );

    replace 123 on if ( 123 === (int) $settings['list_id'] ) line to the WPSP list ID you want to apply this date format change on.

    #33515
    Stefan
    Participant

    Now the chevron is not aligned with the title (green lines) and outside of the page width (red line).
    bildschirmfoto

    The standard date format is fine.

    #33534
    elvin
    Moderator

    Ah you mean you want it to be indented.

    Try this:

    .wp-show-posts-entry-title {
        display: flex;
    }
    
    .wp-show-posts-entry-title:before {
        content: "> ";
        padding-right: 10px;
    }
    
    .wp-show-posts-entry-meta:before {
        content: "> ";
        padding-right: 10px;
        visibility: hidden;
    }
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.