BBCode request: progress bars

[Jar-Ptitsa]

I like the blue progress bars, but I don't understand how to add them in my signature. Not that I progress much

If you want to put the progress bars in your signature use this code:

Code: Select all

[progress= ]3/52[/progress] French In Action chapters :
[progress= ]562/3810[/progress] Memrise French words :
[progress= ]7/30[/progress] Pimsleur French 1 lessons :

You need to put a space after the equals sign in the opening tag. In my example I have finished 3 of 52 chapters in French in Action, 562 words out of 3810 in Memrise, and 7 lessons out of 30 in Pimsleur French 1. You can, of course, choose any measurement you want. When you put your mouse over a progress bar you will get a popup that reads something like, ":3/52"

By the way, the color of the bars can change on different systems.

Thank you very much!!!! I will try this now.

It seems that you like the old fashioned telephones, but you are good with the modern technology also

Which other colours are the bars? i would like pink or lilac.

[tomgosse]

You can make them different colors?! How do you do that? I want purple too.

I don't know of any way for the creator of the post to change the color of the progress bar. As far as I know its color depends on the computer operating system and/or web browser. I am on Windows 10 and use Firefox 42; I get green bars. On my android phone I get grey bars.

[Brun Ugle]

You can make them different colors?! How do you do that? I want purple too.

I don't know of any way for the creator of the post to change the color of the progress bar. As far as I know its color depends on the computer operating system and/or web browser. I am on Windows 10 and use Firefox 42; I get green bars. On my android phone I get grey bars.

No, I didn't think there was, but it would be fun. Maybe a little hard on the eyes though when people started having all bright, flashy, rainbow colored bars everywhere.

[Jar-Ptitsa]

You can make them different colors?! How do you do that? I want purple too.

I don't know of any way for the creator of the post to change the color of the progress bar. As far as I know its color depends on the computer operating system and/or web browser. I am on Windows 10 and use Firefox 42; I get green bars. On my android phone I get grey bars.

My laptop is a Mac with Firefox and the bars are blue.

Some people have discussed about the forum's colours for example "we universal", but I don't know how to change this. I use the original one with the blue, grey and white.

Brown Owl, I have discovered that if you want to put the typing in purple you can do this. when you add the bars, you can click on Font colour, and chose purple. But this is not for the bars, only the description of the bar.

[Serpent]

Just to be clear, the : or spaces in the tag are for keeping several bars vertically aligned. The simple way also works:

Code: Select all

[progress=episodes]3/40[/progress]

You can change your forum style here But this doesn't seem to affect the progress bars' appearance.

[dampingwire]

Is there any way to have "two columns" of progress bars and still have them line up vertically? (Like an HTML <TABLE>?)

I mean without throwing in extra whitespace, obviously.

[zenmonkey]

It is possible to use a table code to align columns like this:

(expanded for readability - see below)

Code: Select all

[table]
[tr]
[td][color=#4040BF][b]Hebrew[/b][/color][/td]
[td][color=#804080][b]German[/b][/color][/td]
[/tr]
[tr]
[td][color=#4040BF][progress= ]13/87[/progress] assimil[/color][/td]
[td][color=#804080][progress= ]5/80[/progress] something de[/color][/td]
[/tr]
[tr]
[td][color=#4040BF][progress= ]5/80[/progress] living lang[/color][/td]
[td][color=#804080]etc. here[/color][/td]
[/tr]
[tr]
[td][color=#4040BF][progress= ]5/100[/progress]hebrewpod101[/color][/td]
[td][color=#804080][progress= ]5/100[/progress]german[/color][/td]
[/tr]
[/table]


Which would look like this:

Hebrew	German
: 13 / 87assimil	: 5 / 80 something de
: 5 / 80 living lang	: 5 / 80etc. here
: 5 / 100hebrewpod101	: 5 / 100 german

Although if you do this please remove all returns, otherwise you will get a lot of blank lines.

It should really look like this, as if you entered a single line:

Code: Select all

[table][tr][td][color=#4040BF][b] Hebrew[/b][/color][/td][td][color=#804080][b] German[/b][/color][/td][/tr][tr][td][color=#4040BF][progress= ]13/87[/progress]assimil[/color][/td][td][color=#804040][progress= ]5/80[/progress] something de[/color][/td][/tr][tr][td][color=#4040BF][progress= ]5/80[/progress] living lang[/color][/td][td][color=#804080][progress= ]5/80[/progress]etc. here[/color][/td][/tr][tr][td][color=#4040BF][progress= ]5/100[/progress]hebrewpod101[/color][/td][td][color=#804080][progress= ]5/100[/progress] german[/color][/td][/tr][/table]

[smallwhite]

It is possible to use a table code to align columns like this:

Thanks, zenmonkey! I didn't know you could use table codes. My bars now align, AND the labels can go back to the left!

I'm putting everything on the same row ( [tr] ), though. Naughty, I know.

● Basic ● News

: 7972 / 7200 ● ● Interests : 603 / 900 ● ● Novels

: 410 / 900 ● : 1049 / 1800 ●

Code: Select all

[table][tr][td]● Basic
● News[/td][td][progress= ]7972/7200[/progress] ● ● Interests
[progress= ]603/900[/progress] ● ● Novels[/td][td][progress= ]410/900[/progress] ●
[progress= ]1049/1800[/progress] ●[/td][/tr][/table]

[zenmonkey]

Very clean! I like it. Might even use them....

[dampingwire]

It is possible to use a table code to align columns like this:

Great. Thanks. A bit hard to read with the CRLF removed, but looks fine to me in the sig.