Okay
  Public Ticket #4278868
Progress bars and pie charts
Open

Comments

  •  1
    cgirwin started the conversation

    Hi, I have a few questions:

    1. How can I change the font sizes and thickness of the bars on the progress bars element?

    2. How can I change font sizes and animations action speed for pie charts element?

    Thank you.

  •  3,264
    Austin replied

    Hi Cari,

    Thank you for getting in touch.

    1. I can see that you have some custom CSS adjusting the font size of the progress bar. Try adjusting the CSS to change the font size.2735557717.png

    Alternatively, you can add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box, as any syntax error would cause all CSS under that line of code to not show up on the Frontend). You can adjust the font sizes to get the size you want to have:

    .nectar-progress-bar p {
      font-size: 24px; /*change font size of the text with the %s*/
    }
    
    body .nectar-progress-bar span strong, body .nectar-progress-bar .bar-wrap span strong i, body .nectar-progress-bar .bar-wrap span strong {
      font-size: 18px !important;/*change font size of progress bar titles*/
    }

    As for the thickness, add this into the Custom CSS box in your Salient Theme Options panel:

    .nectar-progress-bar span {
      height: 8px !important; /*progress bar height*/
    }

    2. To change the font size, add this into the Custom CSS box in your Salient Theme Options panel :

    body .vc_pie_chart .vc_pie_chart_value {
      font-size: 30px !important;
    }

    As for the animations, unfortunately, this is currently not possible with the theme settings.

    I hope that info helps.

    Cheers,