Home › Forums › Pro Support › Icon before title and date
- This topic has 8 replies, 2 voices, and was last updated 2 years ago by
elvin.
-
AuthorPosts
-
September 1, 2021 at 7:47 am #33383
Stefan
ParticipantIs it possible to add a svg icon before the title and date?
September 1, 2021 at 8:31 pm #33401elvin
ModeratorHi 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.
September 2, 2021 at 8:21 am #33410Stefan
Participantthat’s not exactly what I want. Here is an example what I mean:
September 2, 2021 at 9:29 am #33412Stefan
ParticipantSeptember 2, 2021 at 7:51 pm #33442elvin
ModeratorTo clarify:
Do you want to replicate the exact layout or perhaps, just add the right chevron icon to the post title?
September 3, 2021 at 11:37 pm #33466Stefan
ParticipantThe exact layout. Chevron right to the title and date right under the title.
September 5, 2021 at 9:58 pm #33501elvin
ModeratorTry 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.September 6, 2021 at 11:01 am #33515Stefan
ParticipantNow the chevron is not aligned with the title (green lines) and outside of the page width (red line).
The standard date format is fine.
September 6, 2021 at 10:56 pm #33534elvin
ModeratorAh 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; }
-
AuthorPosts
- You must be logged in to reply to this topic.