Greetings,
We used Years of<br>Success to stack our text into two rows on our counters. It stacks properly in Cornerstone, but is showing the HTML instead of the stacked text in the preview and live. Seems to the same issue as This Post. You can see it not working here, but the exact same section working properly here. It is our recollection that the non-working pages were working fine until recently. Weird.
Any ideas?
Hello Ergo,
Thanks for writing in!
Please double check your text. Make sure that it is:
Years of<br>Success
and not this which is why it is displaying at the moment:
Years of<br>Success
Hope this helps.
Hi RueNel,
Perhaps that would help, but in the Classic Counter’s TEXT BELOW box I have typed the following (pasted directly from that box) : Years of<br>Success
When I inspect it I see this: <input class="" type="text" placeholder="" value="Years of<br>Success">
If it is being changed to the text you posted above, it is by X theme or WordPress, not by me.
Is it possible to edit that content other than through the Classic Counter’s TEXT BELOW box? If so, I will see if I can make the change as you have proposed. Or, is there a way to force the content in the TEXT BELOW box to be interpreted as HTML as it used to be?
Thanks!
Steve
Hello Steve,
The code should work with Counter element. I have tested in on my local testing server using this setup.
It will not work with Classic Counter because it will only accept plain text. Any html or invalid character will be transform and given the charcode to prevent any issues when displaying the classic counter.
I would highly recommend that you use v2 Counter element instead.
Hope this helps.
The trouble is that we designed and troubleshot the counter with the classic counter, before propagating it (with minor tweaks) throughout our site. We have a lot of time invested in it and it has worked fine for several months. It even worked fine on our previous save of the page HERE earlier in the month using the classic counter. That page works fine until we try to edit anything within the counter. As soon as we touch something, all the counters on the page fail. Unfortunately we will need to edit the counters to adapt them to the various pages, and to change quantities from time to time, so we can’t just freeze them forever.
I did confirm that the V2 counter does not have this problem, but that really isn’t a solution for us. It is going to be a real pain to rebuild all of our counters to behave like the classic counters if it is even possible. Here is the CSS controlling the font styles, sizes, spacing, and responsive behavior of the counter:
/* COUNTERS (STATISTICS) SECTIONS */
.x-counter .text-below {
margin-top: 0.2em;} /* This is gap between number and text below */
.number-wrap { /* Big numbers that change */
font-size: 2.5rem !important;
color: rgba(0, 0, 0, 0.9) !important;
font-weight: 400!important;
letter-spacing: 0.1rem !important;
line-height: 1.2 !important;}
.text-below { /* Text below numbers */
font-size: 0.9rem !important;
color: rgba(0, 0, 0, 0.4) !important;
font-weight: 700!important;}
@media (max-width: 767px){
.no-stack-x-1-3 {
width: 28% !important;
float: left !important;
margin-right: 1% !important;
margin-left: 3% !important;}}
@media (min-width: 481px) and (max-width: 767px) {
.x-column.x-1-4 {
width: 25% !important;
float: left;}
.number-wrap {
font-size: 2.5em !important;}
.text-below {
font-size: 0.9rem !important;}}
@media (max-width: 480px) {
.x-column.x-1-4 {
width: 50% !important;
float: left;}
.number-wrap {
font-size: 2.5em !important;}
.text-below {
font-size: .95em !important;}}
Of course none of that is going to work with the V2 counter and it may not even be possible to make it work due to the more complex V2 counter which we avoided just because they are much harder to style with CSS.
From a user perspective it would be much nicer if you worked with us to figure out how to fix the classic counter. Over time there will be lots of users like us that go to edit their counters only to realize (or not realize!) that all their HTML is suddenly showing. There was at least one post like this earlier in the week with exactly the same issue. There will be more. Someone must have done something to the classic counter code recently to cause this change in behavior! What was done can surely be undone on behalf of all your clients relying on their classic counters to continue to function.
I hope you will help sort this out.
Thanks!
Steve
Hi Steve,
I totally understand the problem that you are experiencing. Just to give a context, the reason that HTML is not allowed for that specific option in the Classic Counter element is because of security reasons. The code escapes HTML tags because of the way it was coded. Please consider that this was an old element and the new element has another method which can have HTML code meanwhile consider the security.
I hope I could explain why we will not be able to allow HTML code for the Text Below option of the Classic Element. But as we are here to serve you I want to provide you a solution which will not force you to use the new Counter element. The idea is that we will hide the text at the first load, then using the Javascript code we force the browser to recognize the text as HTML and then show the text.
Kindly follow the steps below:
.x-counter .text-below {
display: none;
}
.x-counter .text-below.show {
display: block;
}
jQuery(document).ready(function($) {
$('.text-below').each(function() {
$(this).html($(this).text());
$(this).addClass('show');
});
});
The method above will force the text to render as HTML and you will not have to redo all the styling for the new element.
Hope we could be of help.
Hi Christopher,
Thanks for the help! That would be a great solution!
I have added the code to the global CSS and JS files, and now the text is gone entirely. It seems as thought the display: none; is working but the display: block; is not being triggered by the JS?
It is entirely possible that I have pasted in the wrong place in the JS file. I tried pasting at the top of the file above the initial jQuery(function($) { line; at the bottom below the final (jQuery); and in the middle just above the last line. Nothing seemed to work. The text was gone in each case.
Am I doing the JS wrong?
Hello @ErgoArchitecture,
Please remove this code:
if ( ! function_exists( 'x_title_separator' ) ) :
function x_title_separator( $sep ) {
$sep = "|";
return $sep;
}
add_filter( 'document_title_separator', 'x_title_separator' );
endif;
This is a PHP code which should be added in your child theme’s functions.php file.
Kindly let us know how it goes.
Thank you! Thank you! Thank you!
That was it! You have no idea how much time that saved us.
Most appreciated!
Steve
You are most welcome Steve!
We’re glad we were able to help you out.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.