Counter Shortcode in slider

Hi Themeco,

I am trying to input a shortcode (the counter) in one of my layers in the slider but I’m not getting desired results

What could I be missing?

Worry not, it displays when I load the site.

Now I have another challenge

How do I change its font? It is smaller than the rest of the sentence

Hello There,

Thanks for writing in! ​To assist you with this issue, we’ll first need you to provide us with your URL where we could find the slider and the counter in it. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Best Regards.

Thanks, RueNel
There’s this one this is bigger
and This one this is smaller

Hi,

You can add an inline css to your counter shortcode.

eg.

[counter style="font-size:30px;" num_start="0" num_end="132" num_prefix="-" num_speed="1500" num_color="#3498db" text_above="It Is" text_below="Degrees"]

If you notice I added style="font-size:30px;"

You can change 30px to adjust.

For reference - http://demo.theme.co/integrity-1/shortcodes/counter/

Thanks

Hi Paul

I have tried it but it’s not working

Here is what I have in my slider

[counter style="font-size:20px !important; display:inline !important;"num_start="0" num_end="300" num_prefix="£" num_speed="5000" num_color="#fff" text_above="" "text_below="Shortcodes"]

Its this link here

https://demo.wmmajaliwa.com/why-we-exist/

Hi Wilfred,

Actually, you followed the case correctly, but the problem is that you are using the responsive functionality of the Revolution Slider and that is why the font gets overridden by Javascript depending on the screen size. If you shrink your browser window you will see that the font will go smaller.

To override that behavior you need to force the CSS code which you can not do within the shortcode itself. So you need to add the CSS code below to X > Theme Options > CSS:

.tp-revslider-mainul .x-counter .prefix,
.tp-revslider-mainul .x-counter .number {
    font-size: 20px !important;
}

Change 20px to whatever size you like.

Thank you.

1 Like

Thanks, Christopher

It works but why Is there too much space?

I want the counter to be inline with the other text

How would I achieve that?

Hi Wilfred,

That is caused by the container font size which is set by default in the shortcode. Please also add the CSS code below:

.tp-revslider-mainul .number-wrap.w-h {
    font-size: 35px !important;
    position: relative;
    top: -3px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

1 Like

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