Tagged: percentage, Progress Bar
-
AuthorPosts
-
February 8, 2018 at 2:35 pm #909780
Hi Team,
Can we put tick instead of percentage?
Please see link attached (private content)
Regards
QFebruary 8, 2018 at 10:06 pm #909981Hey DigitalBerg,
Can you send us your web site and lets see if we can replace it with a content:””?
We are not sure if it cna be done, but we can give it a testBest regards,
BasilisFebruary 9, 2018 at 2:20 pm #910265Sure thanks Basilis.
please see the link and other details.
February 10, 2018 at 5:57 pm #910586Hi Q,
Before doing this changes, I would suggest using a child theme first: https://kriesi.at/documentation/enfold/using-a-child-theme/
After using a child theme and following the instructions in the link, go to (via ftp) enfold > config-templatebuilder > avia-shortcodes, then copy progressbar.php and paste it in the shortcodes folder of the child theme, next edit progressbar.php that you just pasted and modify line 348:$output .="<div class='progressbar-percent' data-timer='2200'><span class='av-bar-counter __av-single-number' data-number='".$bar['attr']['progress']."'>0</span>%</div>";
replace % with an image of a tick. And that should be it. Hope it helps.
Best regards,
NikkoFebruary 20, 2018 at 11:50 am #914795Thanks Nikko,
Can not find short-codes folder in the child theme. Any advice on this?
Also how to remove 1 to 100 number from the progress bar?Thanks,
Regards
QFebruary 20, 2018 at 1:17 pm #914821Hi Q,
I see, can you try to add a folder and name it shortcodes in your child theme, you can follow the instructions here: https://kriesi.at/documentation/enfold/add-new-or-replace-advanced-layout-builder-elements-from-child-theme/
As for removing the 1-100 in progressbar you can add this css code in Quick CSS (located in Enfold > General Styling):span.av-bar-counter.__av-single-number { display: none !important; }
Hope this helps :)
Best regards,
NikkoFebruary 20, 2018 at 5:32 pm #914909Hi Nikko,
Thanks again.
trying to add the tick image in the code however image code does not work, Can you please have a look into the code and inform me the error?
$output .=”<div class=’progressbar-percent’ data-timer=’2200′><span class=’av-bar-counter __av-single-number’ data-number='”.$bar[‘attr’][‘progress’].”‘>0</span>%</div>”;
Removing % and adding this code:
- This reply was modified 6 years, 9 months ago by DigitalBerg. Reason: Wrong code
February 20, 2018 at 5:55 pm #914929Hi,
Sorry can you try to replace this code:
$output .="<div class='progressbar-percent' data-timer='2200'><span class='av-bar-counter __av-single-number' data-number='".$bar['attr']['progress']."'>0</span>%</div>";
to:
$output .="<div class='progressbar-percent' data-timer='2200'><img src="image_url" class="progressbar-image" /></div>";
just replace image_url with the url of your tick image.
Best regards,
NikkoFebruary 21, 2018 at 1:50 pm #915434Thanks.
After changing the code site is not loading :(.
Please advice.
Regards
February 21, 2018 at 3:16 pm #915492Hi DigitalBerg,
You can remove the code via FTP. Did you get the website back up?
Best regards,
VictoriaFebruary 21, 2018 at 3:57 pm #915532Yes after removing the code site is back up but how to solve the code to work?
Regards
QFebruary 21, 2018 at 5:07 pm #915558Hi,
Can you try to remove this css code that I gave:
span.av-bar-counter.__av-single-number { display: none !important; }
then use this php code:
$output .=”“;
Let us know if this helps.Best regards,
NikkoFebruary 22, 2018 at 11:31 am #915972Hi Nikko,
Still the same issue after removing the code.
However, the code you sent, its not showing.
Regards
Q- This reply was modified 6 years, 9 months ago by DigitalBerg.
February 24, 2018 at 4:08 am #916951Hi,
This is the modification.
$output = "<div class="progressbar-percent" data-timer="2200"><span class="av-bar-counter __av-single-number" data-number="'.$bar[" attr']['progress'].'"><img src="image_url" class="progressbar-image"></span></div>";
Just adjust the “image_url” value.
Best regards,
IsmaelFebruary 27, 2018 at 11:31 am #918369HI Ismael,
Still the same issue, after adding the code with tick URL website stop responding (white blank page).
Please check and let me know. Highly appreciate on this matter.
Regards
Q- This reply was modified 6 years, 8 months ago by DigitalBerg.
March 1, 2018 at 9:37 am #919492Hi,
I’m sorry but I can’t connect via SFTP. Please check the login credentials above. The actual site is not loading either.
Best regards,
IsmaelMarch 1, 2018 at 11:13 am #919538Hi Ismael,
Can you please connect with port 21 or leave blank the port option?
Please let me know.
Regards
QMarch 1, 2018 at 11:58 am #919571Hi,
I already tried that but it’s not working. I tried 21 and 22.
Best regards,
IsmaelMarch 6, 2018 at 1:34 pm #922263Hi Ismael,
Not sure however please check the screenshot below (private content box).
Please let me know.
Regards
QMarch 7, 2018 at 7:01 am #922759Hi,
Thank you for the info. I have the same exact configuration but it’s not working. Is there any security option in your server? Maybe, some of the countries or ips are blocked. You can find our locations in the following page.
I’ll ask the rest of the support team to check the thread.
Best regards,
IsmaelMarch 7, 2018 at 7:18 am #922767Hi,
We have added the below code to the Quick CSS section.
Please change the URL of the logo to a tick image.
.progressbar-percent { color:transparent; background: url('http://stageholdings.co.uk/wp-content/uploads/2017/08/SC-logo-497x454_hight-1-257x300.png'); background-size: 30px 40px, cover; background-position: top right; background-repeat: no-repeat; width:60px; } .progressbar-percent span { color: #000!important; }
As an optional choice, you can also use any Icon that comes with enfold by adding the below CSS. To use the icon I have commented the background rule in Quick CSS.
.progressbar-percent span:after { content:"\e812"; color:#000; font-family: 'entypo-fontello'; position: absolute; right: 5px; }
Let us know if you have any questions :)
Best regards,
Vinay- This reply was modified 6 years, 8 months ago by Vinay.
March 7, 2018 at 5:51 pm #923159Excellent work guys! thanks alot
Now, im using the code to remove 1-100 numbers but below code removing numbers including tick icon too. is there any way or code to remove numbers only not a tick icon?
Code:
span.av-bar-counter.__av-single-number {
display: none !important;
}March 7, 2018 at 7:41 pm #923249Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
.progressbar-percent span { color:transparent; } .progressbar-percent span:after { color:#000!important; }
Best regards,
VinayMarch 8, 2018 at 11:27 am #923762Hi Vinay,
I have added the code but still numbers are showing! please check and let me know .
Thanks alot.
Regards
QMarch 9, 2018 at 9:44 am #924354Hi,
I didn’t see the code in Quick CSS I have updated the previous code which was provided for the background image to add an icon.
Please feel free to play with the color value in the below code to show hide the numbers :).progressbar-percent { color:transparent; } .progressbar-percent span { color: transparent!important; } .progressbar-percent span:after { content:"\e812"; color:#000!important; font-family: 'entypo-fontello'; position: absolute; right: 5px; }
Best regards,
Vinay -
AuthorPosts
- You must be logged in to reply to this topic.