-
Posts
-
Hi there,
Ive worked out in the shortcodes.css file how to stop the hatched strobe effect within the included shortcode (Teal, Blue, Black etc.) by deleting the background image code but how do I stop the strobe effect for my own custom hex color?
Cheers
Andy
Hi Team,
We would also like to know if we can make a progress bar any solid color of choice # and also if possible to make it smaller. Similar to this link http://lovelstzymedia.com/grv
Thanks,
Nicolas
Hi,
If the color of the progress bar is blue, go to shortcodes.css, find this code
.blue-bar .bar{
background: #7bb0e7;
background-image: -webkit-linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
background-image: -moz-linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
background-image: -o-linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
background-image: -ms-linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
background-image: linear-gradient(-45deg, #96C8FB 25%, #74a6d9 25%, #74a6d9 50%, #96C8FB 50%, #96C8FB 75%, #74a6d9 75%, #74a6d9);
}Replace it with this code to remove the slanted lines effect or the strobe effect.
.blue-bar .bar{
background: #7bb0e7;
}This will create a solid colored progress bar. You can change the width and height using this code
.avia-progress-bar .progress {
width: 50%;
height: 20px;
}Regards,
Ismael
Ah but what if I want to use my own hex color and not one of the default colors (like the blue you suggest in your example). When I use the template builder for custom it uses my color but has the strobe effect but I cant see that in the shortcode.css section you are referring to.
Cheers
Andy
Thanks Ismael,
That works for us.
Sorry Andy, we didn’t mean to hack your post. We probably should have posted on a different topic. Hope you can get everything resolved.
Cheers
-Nicolas
Hmmm. I dont mind others joining so long as my questions arent then forgotten about on the forum and I dont get put to the back of the queue!
Guys…. My question still remains unanswered.
My aim is to use my own hex colour for the foreground (fill) color and not have the strobe effect. Currently the method outlined above only allows for removing the strobe effect over a set of pre-defined colors and the custom setup doesnt work
Cheers
Andy
Hey!
Can you post a link to the progress bar please? I’ll investigate the css code and provide a (custom) solution.
Regards,
Peter
Hi there,
Here is a dummy page I set up. I want to change the system ‘black’ to a color of my own. As you can see, ive removed the strobe effect but how do I use my own color. This ‘black’ is part of the builder menu. I couldn’t get the skills slider to work using a custom color without including the strobe effect.
http://www.andypeck.co.uk/1739-2/
Cheers
Andy
Thanks for sharing.
unfortunately it seems, this won`t work on mobile devices, at least not on my Galaxy S3.
Somehow my Skill Bars ( http://roberthunecke.com/redesign/about ) are showing up blank on it.
Hi there,
It’s odd but Robert is correct. I’m also still not sure my question is being understood.
The skills background bar needs to be grey and the fill-up foreground bar in orange (my own hex color). I don’t want the strobe, stripe effect in the foreground but instead want a flat color of my own.
I don’t mind which method I use to achieve the end goal so feel free to suggest a route.
It also needs to work on the iPad. Is it possible?
Cheers
I tried to create my own progress bars by customizing this tutorial: http://www.red-team-design.com/stylish-css3-progress-bars
using this in my custom.css:
.progress-bar {
background-color: #fcfcfc;
height: 25px;
padding: 1px;
width: 100%;
margin: 5px 0;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0 1px 5px #e1e1e1 inset, 0 1px 0 #f4f4f4;
-webkit-box-shadow: 0 1px 5px #e1e1e1 inset, 0 1px 0 #f4f4f4;
box-shadow: 0 1px 5px #e1e1e1 inset, 0 1px 0 #f4f4f4;
}
.progress-bar span {
display: inline-block;
height: 100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
.blue span {
background-color: #00b6f1;
background-image: -webkit-gradient(linear, left top, left bottom, from(#00b6f1), to(#058ff2));
background-image: -webkit-linear-gradient(top, #00b6f1, #058ff2);
background-image: -moz-linear-gradient(top, #00b6f1, #058ff2);
background-image: -ms-linear-gradient(top, #00b6f1, #058ff2);
background-image: -o-linear-gradient(top, #00b6f1, #058ff2);
background-image: linear-gradient(top, #00b6f1, #058ff2);
}
.orange span {
background-color: #fecf23;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
background-image: -o-linear-gradient(top, #fecf23, #fd9215);
background-image: linear-gradient(top, #fecf23, #fd9215);
}
.green span {
background-color: #a5df41;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
background-image: -o-linear-gradient(top, #a5df41, #4ca916);
background-image: linear-gradient(top, #a5df41, #4ca916);
}
and this, to call a bar inside e.g. a text-element:
<div class="progress-bar blue">
<span style="width: 40%"></span>
</div>
<div class="progress-bar green">
<span style="width: 60%"></span>
</div>
<div class="progress-bar orange">
<span style="width: 80%"></span>
</div>
Works great on any device tested so far. Also I would suggest to create a Shotcode for the skill-bars, since the code got changed everytime I tried to re-adjust it inside my textbox, so I had to type it in again to work.
Hi,
@rhuneke: Thanks for the tip.
@andypeck: I’m not sure but when I visit the link: http://www.andypeck.co.uk/1739-2/
I can see that you’re using the code that I gave you. It looks fine.
.black-bar .bar {
background: #222;
}Regards,
Ismael
aw man this is seriously frustrating!
Ismael, you are indeed seeing the black-bar in my test page which is what you suggested, yes! but the point is I ‘DONT’ want a black bar – i dont want to use any of the shortcode colors…………….. I want to use my own hex color.
That’s what ive been trying to say from the start. I want my own hex solid color bar to replace the black one (the foreground color not the background one) but I don’t want the stripes. I tried using the shortcode setting that lets you use the system color but the stripe/strobe effect appears which is not what I want, hence me posting the help request.
Im really sorry if Im not communicating myself well but I really thought it was obvious what I was requesting. Clearly not!
If you can help then great
Cheers
Andy
hey, its me again. I think I may have misunderstood what you were saying and I may know what to do now. I apologize for my frustration. Ill test it tonight and hopefully will have sorted it.
Thanks again
Hey,
I hope you figured it out. I think the code I gave you will handle the strobe effect and change the progress bar to solid colors.
Let me tag the rest of the support team, maybe they have a better idea.
Regards,
Ismael
Hi,
Use this,
.black-bar .bar {
background: #244E4E;
}Not used anywhere in the theme. http://www.clipular.com/c?8943061=QgFv5MiKXBOZxm8FKWqeViWvZI0&f=.png
You are aware that your site looks wacky on small screen sizes? http://www.clipular.com/c?9215050=Y2KNfVI6aNgC-dfINnbbvxcX6k8&f=.png (shrink your browser window)
Thanks,
Nick
Hi Nick….
Firstly an apology to the team, Ive been looking into this bar strobe thing way too hard and you’ve all been correct through out. It was the use of the word ‘background’ that made me think you were all talking about the background behind the bar and not the bar itself. Bonkers!
Anyway, it was sorted a few days ago in a matter of seconds. Thank you.
********
In regard to my site ‘IOS wackyness’… you’re still looking at my test site. Its not live yet but I did know that ‘WACKY’ screen issue was happening. I was going to wait until the site was live to request your help. However, as you’ve brought it up… Any idea how to fix it?
cheers as always
Andy
Hi Andy,
If the issue continues when the site is live we can take a look. Or if you have it on a stable test and want to make a new topic for it we can check there as well.
Just make sure to include a link to the relevant site when you make a new post describing the issue.
I’m going to close this topic for now so that it doesn’t get further off topic and a big long extended thread.
Regards,
Devin
- The topic ‘Progress Bars – Custom color (no strobe effect)’ is closed to new replies.