Have text float around shortcode

I want to use the [counter] shortcode

[counter num_start=“0” num_end=“24” num_suffix="." num_speed=“1000” num_color="#272727" text_above=“DAY” text_below=“MONTH”]

in standard blog posts (without cornerstone) so that my client can use it himself to highlight the date of seminar posts he will be creating.

Problem is: at the moment the shortcode stays above the blogpost text.
Is there any way to have text float around your shortcodes (with a margin)?

Hi there,

Try adding the class left to the shortcode like this:

[counter class="left" num_start="0" num_end="24" num_suffix="." num_speed="1000" num_color="#272727" text_above="DAY" text_below="MONTH"]

left is a ready class available with X that floats and element to the left. You may also use right if you need it.

Then to add some margin to the counter element, please add this code in the Global CSS:

.single-post .x-counter {
    margin: 5px 5px;
}

The code above will add a margin around the counter element that is in a post.


You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

Taht helped a lot, thanks!

You’re most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.