Friday, December 31, 2010

How to Customize a Progress Bar

In my previous post, you learned How to Make a Progress Bar. Here you can learn how to customize it to fit your blog. Like before, in order for everything to be visible here, I've replaced all of these things:

< >

with these brackets:

[ ]

So when you are using the code, make sure you replace all of the brackets with the little triangle thingies.


What You Will Learn
  • How to change the color
  • How to change the length and width
  • How to change the borders (thickness, color)

Getting Started

Here is the code for the progress bar:

[center][div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]
[/div]
0/5 books[/center]

Copy and paste that into your post or sidebar. 


Change the Color

[center][div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 50%;"][/div]

[/div]

0/5 books[/center]

The part in red is the part you change to adjust the color of the progress bar.When testing out colors, make sure the part in blue is set to something other than zero (otherwise your bar won't be filled and you can't see the color).

To change the color you need to identity the RGB code for the new color. You can do a google search to find this code, or you can refer to the following site: 500+ Named Colors with RGB and Hex Values. That site is the one I will be referring to.

Now, refer back to the part in red. There are three numbers. The first number corresponds to the number in the "R" column on the above linked site. The second number corresponds to the number in the "G" column. The third number corresponds to the number in the "B" column.

To change the color, all you have to do is select which color you want from the list, identify the RGB numbers, and plug in those numbers into the code.

For example, if you want deep pink 2 just replace the 255, 0, 0 with 238, 18, 137

The code will look like this:

[center][div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(238, 18, 137); font-size: 8px; height: 15px; line-height: 8px; width: 50%;"][/div]

[/div]

5/10 books[/center]

And the progress bar will look like this: 





5/10 books



Change the Size

[center][div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]

[/div]

0/5 books[/center]

If you want to make the bar taller or shorter, then change the numbers in blue. Make sure you change them to the same number. The first number in blue adjusts the overall size of the bar. The second number adjusts the height of the color fill. 

Here is what the bar looks like with the numbers set at 15 as I have them in the code you copied:





5/10 books





Here is what the bar looks like with only the first number changed. I changed it to 35:




5/10 books


Here is what the bar looks like when both numbers are changed to 35:





5/10 books
 

If you want to make the bar wider or squatter, then change the number in red

 Here is what the bar looks like with the numbers set at 185 as I have it in the code you copied:





5/10 books


Here is what the bar looks like with the number increased to 285:




5/10 books


Change the Border

[center][div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]

[/div]

0/5 books[/center]


To change the thickness of the border, increase the number in red.

Here is what the bar looks like with the numbers set at 1 as I have it in the code you copied:






5/10 books


Here is what the bar looks like with the numbers increased to 10:





5/10 books


Change the Border Color

[center][div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 10px solid rgb(0, 0, 0); height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; width: 0%;"][/div]

[/div]

0/5 books[/center]

I've left the border thickness at 10px so you can see the color change clearly. If you want to change the color of the border just replace the numbers in blue. Use the 500+ Named Colors with RGB and Hex Values link from above to find new RGB color codes. Here is an example with the color changed to blue (0, 0, 225):




5/10 books


Change the Border Shape

[center][div style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); border-radius: 40px / 20px; height: 15px; text-align: left; width: 185px;"][div style="background: none repeat scroll 0% 0% rgb(255, 0, 0); font-size: 8px; height: 15px; line-height: 8px; border-radius: 40px / 20px; width: 40%;"][/div]

[/div]

0/5 books[/center]

The parts in pink and blue change the degree of curve. If you want to adjust the curve, just play around with changing the numbers in pink and blue.  The pink numbers control the outside border, and the blue numbers control the red bar.





0/5 books


And there you have it! 

If anyone has any other questions you can either ask them in the comments or email me. Please don't feel shy at all! 

I'm certainly not an expert, but I'll try my hardest to explain what I do know and research what I don't know. 

8 comments:

  1. Now that was awesome! Thank you!

    ReplyDelete
  2. OMG! I really <3 bloggers who do tutorials! Sharing knowledge rocks!

    Thanks, hun!

    ReplyDelete
  3. Thank you so much I've been wondering how to customize and create these, as I have been seeing them everywhere lately!

    Thanks!

    ReplyDelete
  4. Missie, You're welcome! I'm going to maybe try to do a series of How To posts like this. My knowledge is pretty limited, but I might as well share what I do know!

    T.B., You're very welcome!

    ReplyDelete
  5. Thanks so much for posting this!!! I love progress bars & am so happy to have them for my challenges now!

    ReplyDelete
  6. Thank you! It was very helpful!
    Is there a way to make the borders oval?

    ReplyDelete
    Replies
    1. hm, well, I didn't know but your question prompted me to try to find an answer! I think I've figured it out. I added a section at the bottom on changing the shape. Is this what you're looking for?

      Delete

It's all about friendly conversation here at Small Review :) I'd love to hear your thoughts!

Be sure to check back again because I do make every effort to reply to your comments here.

Because I am absolutely terrible about following through with blog awards, I can't in good conscience accept any more. Thank you very much for thinking of me though!

Spam WILL be deleted. Attacks on myself or other comments WILL be deleted.

Related Posts Plugin for WordPress, Blogger...