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. 

Tweet