Please provide the page url so that i can write up the custom css for whats possible. Also provide a reference url where we can view the sripes you wish to replicate?.
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):
Sure, 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):
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):
Try adding the revised CSS and clear your cache to view the changes:
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):
Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.
You should be able to. I tried to log in on another device and it worked perfectly. Try to log in on WordPress via an incognito tab and see if that helps.
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):
Hi,
Can someone please provide any type of code that would make the salient progress bars animated with stripes?
Hey patosnegis,
Please provide the page url so that i can write up the custom css for whats possible. Also provide a reference url where we can view the sripes you wish to replicate?.
Thanks
ThemeNectar Support Team
Here is my website:
https://xlntcake.wpcomstaging.com/
and here is the reference:
https://codepen.io/uimax/pen/KgdgGa
I want
the secondary progress bar.
Hey Again,
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):
span.extra-color-1 { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; background-image: -webkit-linear-gradient( 45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: linear-gradient( 45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } /* WebKit*/ @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } /* Spec and IE10+ */ @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } }Thanks
ThemeNectar Support Team
Thanks for the help. It worked, but is it possible to make the progress bar rounded?
Hi There,
Please try this css:
span.extra-color-1 {border-radius: 7px;
}
Thanks.
Sure, 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):
span.extra-color-1 { border-radius: 40px !important; }Thanks
ThemeNectar Support Team
Hi There,
Please deactivate the plugin that is prompting this page so that we are able to access the login page.
Thanks.
It should be deactivated
Hey Again,
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):
.nectar-progress-bar span { background: purple; } .nectar-progress-bar span { -webkit-animation: progress-bar-stripes 2s linear infinite; -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; background-image: -webkit-linear-gradient( 45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-image: linear-gradient( 45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); -webkit-background-size: 40px 40px; background-size: 40px 40px; } /* WebKit*/ @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } /* Spec and IE10+ */ @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } }Thanks
ThemeNectar Support Team
Nothing happens when I upload the css
Hey Again,
Try adding the revised CSS and clear your cache to view the changes:
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):
.nectar-progress-bar span { background: purple !important; } .nectar-progress-bar span { -webkit-animation: progress-bar-stripes 2s linear infinite !important; -o-animation: progress-bar-stripes 2s linear infinite !important; animation: progress-bar-stripes 2s linear infinite !important; background-image: -webkit-linear-gradient( 45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) !important; background-image: -o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) !important; background-image: linear-gradient( 45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent) !important; -webkit-background-size: 40px 40px !important; background-size: 40px 40px !important; } /* WebKit*/ @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0 !important; } to { background-position: 0 0 !important; } } /* Spec and IE10+ */ @keyframes progress-bar-stripes { from { background-position: 40px 0 !important; } to { background-position: 0 0 !important; } }Thanks
ThemeNectar Support Team
Okay, so the bar shows up in purple but isn't animated or rounded. Could you help me with this too?
Your help is super useful. Thanks again:)
Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.
Thanks
ThemeNectar Support Team
I can send you a link with admin rights. just give me your email
Hey Again,
You can use any Email Address as we just need a temporary user/pass to check.
Thanks
ThemeNectar Support Team
Hi There,
I am still not able to access your website:
Thanks.
You should be able to. I tried to log in on another device and it worked perfectly. Try to log in on WordPress via an incognito tab and see if that helps.
Thanks
ThemeNectar Support Team
Let me know again if it doesn’t work. Sorry for the late response by the way. Didn’t see that you replyed
Hey Again,
Wishing you the Best this Holiday Season.
Just adjusted the CSS for the animation to work.
Best
ThemeNectar Support Team
Could you make a custom css that makes the distance between the progress bar and title bigger?
Hey Again,
I hope you are enjoying your new year
Just adjusted the CSS for the distance between the progress bar and title.
Best
Could I write something else than percent over the bar? I want to write something like pending or complete.
Hey Again,
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):
.nectar-progress-bar span strong:before { position: absolute; content: 'pending'; width: 81px; height: 50px; left: -80px; }Thanks
ThemeNectar Support Team