Counter prefix in line text

Hi I found this post

I’m trying to the same but with the prefix

I used $el.x-counter >div { display: inline-block; } $el.x-counter >div.x-counter-after { margin-left: 20px; /*Adjust this value accordingly*/ } $el .x-counter-number-prefix { margin-right: 25px; }
it got it inline but the spacing isn’t working

Have I written the css wrong?

Thanks

Ben
https://wordpressmu-110049-1087249.cloudwaysapps.com/fight-scoring-system/

Also how do I get the fonts and colours to match? I’m currently wrapping my headings in <small> and text fields in <p> to get the text to use the styling the demo site uses, is this best practice?

Hello Ben,

Thank you for the very detailed post information.

To resolved your issue, please update the css code into this one:

$el.x-counter >div {
  display: inline-block;
}

$el.x-counter >div.x-counter-after {
  margin-left: 20px; /*Adjust this value accordingly*/
}

$el.x-counter > div.x-counter-before {
    margin-right: 20px; 
}

We would love to know if this has worked for you. Thank you.

Excellent thank you!

It has worked, I now would like to give the elements a class and apply the setting globally in the theme customiser global css please.

I was going to give it the class points-counter

I tried editing the script to

el.points-counter >div {
  display: inline-block;
}

$el.points-counter >div.x-counter-after {
  margin-left: 20px; /*Adjust this value accordingly*/
}

$el.points-counter > div.x-counter-before {
margin-right: 20px; 
}

But it did’t work, I’ve looked in the docs but can only find how to add css per ellement

thanks for your help

Ben

Hi Ben,

These two blocks of code should be fine:

$el.points-counter >div.x-counter-after {
  margin-left: 20px; /*Adjust this value accordingly*/
}

$el.points-counter > div.x-counter-before {
margin-right: 20px; 
}

But this code has missing $ is missing before el:

el.points-counter >div {
  display: inline-block;
}

If the codes still do not work, try adding the !important keyword to the CSS values like:

$el.points-counter >div {
  display: inline-block !important;
}

Hope this helps.

Hay

So my script now reads

$el.points-counter >div.x-counter-after {
  margin-left: 20px !important; /*Adjust this value accordingly*/
}

$el.points-counter >div.x-counter-before {
margin-right: 20px !important; 
}

$el.points-counter >div {
  display: inline-block !important;
}

But it takes no effect

I tried adding

points counter

and

points-counter

to the class field and left the ID empty but neither of the class names took effect, is what I am doing correct?

Hi Ben,

The code should work. Perhaps it was not added correctly in your setup. To verify that, please provide us with the admin access to your site in a Secure Note:

Hi, thanks

I added it but it would only let me add it above
Thanks

Ben

Hi Ben,

Thanks for the details.

I have checked and if you are trying to have the code take effect in the Fight Win counter, it will not work because you did not add the code below to the Element CSS of that element.

Also, if you want to specify a class to the element, you not need to add $el to the code. You can just add the class to the elements then add this to X > Theme Options > CSS:

.x-counter.points-counter >div.x-counter-after {
  margin-left: 20px !important; /*Adjust this value accordingly*/
}

.x-counter.points-counter >div.x-counter-before {
margin-right: 20px !important; 
}

.x-counter.points-counter >div {
  display: inline-block !important;
}

Hope this helps.

Thank you,

So I can understand this for further elements. first I must write the default name of the element(in this case) “.x-counter” then I give it my custom class “.points-counter”
Then “>div” is "I want to change…
Then the select the default part of the element I want to change “.x-counter-after” then what I’m canging gets wrapped in “{}”

So if I want to change the size of the numbers, how woult I do that please?
I can see that I can select it by using “.x-counter-number” but how do I change the size of the font so that it is larger than the “base font size” but still remains responsive and is still relative to the base font size please?

Thanks for all your help

Hi Ben,

x-counter is the default class assigned to the counter element. When you assign a specific class to the counter element’s class field, it get added with the element’s default class.

You can actually just write:

.points-counter >div.x-counter-after {
  margin-left: 20px !important; /*Adjust this value accordingly*/
}

But adding .x-counter to points-counter in the selector increases the CSS block’s level of specificity.

It would be best to read about the CSS Selector for you to understand this better:

You actually do not need to write a custom code to change the font size of the texts in the counter element since those options are already available in the settings:

Also, try setting the value of the font sizes to an em value so that it will be relative to the base font size.

Hope this helps.

Hi thank you so much for the detailed answer, that is really helpful!

But what I was thinking is to keep the pre and sub text the same size as set in the editor but set the actual number size to a larger font size than the text. is that possible?

Thanks

Ben

Hi Ben,

It seems you already understand how CSS selector works, what you need now is to use relative unit like em or % or the relative keywords like larger or smaller to your font-size.

More details here.

Hope it helps,
Cheers!

Hi Friech

Thanks for the reply, I don’t think I explained my self very well.

I now know how to do a little CSS (mainly down to what the support team have tough me, so thank you for that).
But what I am trying to do is enlarge the number didgets only and leave the text size as it is set to in the pro page builder.

I tried this:

But it took no effect.

What I am trying to do is this:

so from all the same size, to just changing the size of the number.

Thanks for all your help.

Ben

Hi Ben,

Please add this to your Counter Element CSS area

$el .x-counter-number {
	font-size: 200%;
}

What I did there is to target only the number with the class .x-counter-number, we only opt to add $el because we want to apply this to that specific element only, right.

Now, the font-size: 200%; means 200% of the value you set on the font-size field.
So if you set the font-size to 15px, that is 15px * 200% = 30px, so the counter-number will be 30px and the prefix and suffix will remian 15px, make sense?

Thanks,

Friech

Thank you it does make sense, so this goes in the ccs field for the element in the pro builder because it contains $el? so if I’m putting this in the global css in the theme customizer I remove $el?

Also is there a list somewhere of all the X components and the names of the bits I can target please?

Thanks

Ben

Hello Ben,

Use “$el” in the css to target element. It will become the generated dynamic class.
For example;

$el {
  // some style
}

will become this code on the front end or live view:

.e1234 {
  // some style
}

Please check this documentation:

Guys, thank you so much! Something has just clicked! I now understand how to implement css!

Hopefully, I’m gunna be fine with most of it from now on.

Thanks for all your help!

Ben

We are delighted to assist you with this.

Cheers!

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