Shortcode Layout

  • Resolved Swan1305

    (@swan1305)


    1 year, 8 months ago

    Hi, my current shortcode layout has a small image on the left with the title on the right and the date underneath the title.

    This works fine if I only have a shorter 2 line title..but if it goes to 3 lines the date gets pushed left under the image (not sure how to post an pic on here). Can I keep the date aligned under the title however short or long it is?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hi there!

    Yes, it can be done. Please share again your shortcode (make sure to use the Code block to insert it here) and I’ll show you how.

    Thread Starter Swan1305

    (@swan1305)

    [wpp range='last24hours stats_views=0 cat='-9227' thumbnail_width=105 thumbnail_height=75 limit=6 stats_date=1 stats_date=1 stats_date_format='j F Y' post_html='<li>{thumb} {title} <br><span class="date-span">{date}</span></li>']
    Plugin Author Hector Cabrera

    (@hcabrera)

    Alright, try changing your shortcode to this:

    [wpp range='last24hours' stats_views=0 cat='-9227' thumbnail_width=105 thumbnail_height=75 limit=6 stats_date=1 stats_date_format='j F Y' post_html='<li><div class="thumbnail-container">{thumb}</div> <div class="popular-post-details">{title} <br><span class="date-span">{date}</span></div></li>']

    … and then add these CSS rules to your site:

    .wpp-list p:empty {
	display: none;
}

.wpp-list li {
	display: flex;
	justify-content: flex-start;
}

.wpp-list li .thumbnail-container {
	width: 105px; /* img width */
	margin-right: 10px;
}

.wpp-list li .thumbnail-container img {
	float: none;
	width: 100%;
	height: auto;
}

.wpp-list li .popular-post-details {
	width: calc(100% - 105px - 10px); /* img width - margin */
}
    Thread Starter Swan1305

    (@swan1305)

    Perfect, thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Shortcode Layout’ is closed to new replies.