Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #909780

    Hi Team,

    Can we put tick instead of percentage?

    Please see link attached (private content)

    Regards
    Q

    #909981

    Hey 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 test

    Best regards,
    Basilis

    #910265

    Sure thanks Basilis.

    please see the link and other details.

    #910586

    Hi 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,
    Nikko

    #914795

    Thanks 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
    Q

    #914821

    Hi 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,
    Nikko

    #914909

    Hi 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, 10 months ago by DigitalBerg. Reason: Wrong code
    #914929

    Hi,

    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,
    Nikko

    #915434

    Thanks.

    After changing the code site is not loading :(.

    Please advice.

    Regards

    #915492

    Hi DigitalBerg,

    You can remove the code via FTP. Did you get the website back up?

    Best regards,
    Victoria

    #915532

    Yes after removing the code site is back up but how to solve the code to work?

    Regards
    Q

    #915558

    Hi,

    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,
    Nikko

    #915972

    Hi 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, 10 months ago by DigitalBerg.
    #916951

    Hi,

    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,
    Ismael

    #918369

    HI 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, 10 months ago by DigitalBerg.
    #919492

    Hi,

    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,
    Ismael

    #919538

    Hi Ismael,

    Can you please connect with port 21 or leave blank the port option?

    Please let me know.

    Regards
    Q

    #919571

    Hi,

    I already tried that but it’s not working. I tried 21 and 22.

    Best regards,
    Ismael

    #922263

    Hi Ismael,

    Not sure however please check the screenshot below (private content box).

    Please let me know.

    Regards
    Q

    #922759

    Hi,

    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.

    // https://kriesi.at/about

    I’ll ask the rest of the support team to check the thread.

    Best regards,
    Ismael

    #922767

    Hi,

    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, 9 months ago by Vinay.
    #923159

    Excellent 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;
    }

    #923249

    Hi,

    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,
    Vinay

    #923762

    Hi Vinay,

    I have added the code but still numbers are showing! please check and let me know .

    Thanks alot.

    Regards
    Q

    #924354

    Hi,

    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

Viewing 25 posts - 1 through 25 (of 25 total)
  • You must be logged in to reply to this topic.