HOME | DD
CypherVisor — Journal CSS Progress-bar Source Code
by-nc-nd
Published: 2012-07-24 20:42:36 +0000 UTC; Views: 26944; Favourites: 724; Downloads: 0
Redirect to original
Description
»»»»»»»»»»»»»»»»»»»»»»»»»»» Exclusively for Premium members and Super groups only «««««««««««««««««««««««««««Live view: cyphervisor.deviantart.com/jou…
Live views from other deviants: xgblue.deviantart.com/journal/… , kovowolf.deviantart.com/journa… , moofestgirl.deviantart.com/jou…
JOURNAL text code (each color is in each line)
HOW to customize "title" and "size" of the progress-bar
Code break-down:
Change:
1) The title text color to black or white by replacing the text "PBtitle-white" by "PBtitle-black"
2) The progress bar title by replacing the text YOUR_PROGRESSBAR_TITLE with your own.
3) The size of the progress bar by replacing the text size20 with your own number such as size43, size57, size86. Just make sure the number is 0-100.
CSS code
.PBC
{
padding-top:1px;
padding-left:1px;
width:380px;
height:30px;
background:#3e4044;
box-shadow:0px 2px 5px #1a1a1a inset;
-moz-box-shadow:0px 2px 5px #1a1a1a inset;
-webkit-box-shadow:0px 2px 5px #1a1a1a inset;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #1d1d1d;
}
.red{background:#d32727;}
.yellow{background:#d1cb21;}
.green{background:#8cc822;}
.blue{background:#2694e1;}
.purple{background:#c026e1;}
.pink{background:#e126cd;}
.white{background:#efefef;}
.cyan{background:#19e1da;}
.orange{background:#e17719;}
.PBC .bar
{
position:relative;
height:29px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.PBC .PBtitle-black
{
background:transparent;
font-family:Arial;
font-size:13px;
padding-top:6px;
padding-left:5px;
position:absolute;
z-index:99;
font-weight:bold;
color:#28292d;
text-shadow:#e9e9e9 0px 0px 5px;
}
.PBC .PBtitle-white
{
background:transparent;
font-family:Arial;
font-size:13px;
padding-top:6px;
padding-left:5px;
position:absolute;
z-index:99;
font-weight:bold;
color:#fff;
text-shadow:#959595 0px 0px 5px;
}
.size0{width:0%;}
.size1{width:1%;}
.size2{width:2%;}
.size3{width:3%;}
.size4{width:4%;}
.size5{width:5%;}
.size6{width:6%;}
.size7{width:7%;}
.size8{width:8%;}
.size9{width:9%;}
.size10{width:10%;}
.size11{width:11%;}
.size12{width:12%;}
.size13{width:13%;}
.size14{width:14%;}
.size15{width:15%;}
.size16{width:16%;}
.size17{width:17%;}
.size18{width:18%;}
.size19{width:19%;}
.size20{width:20%;}
.size21{width:21%;}
.size22{width:22%;}
.size23{width:23%;}
.size24{width:24%;}
.size25{width:25%;}
.size26{width:26%;}
.size27{width:27%;}
.size28{width:28%;}
.size29{width:29%;}
.size30{width:30%;}
.size31{width:31%;}
.size32{width:32%;}
.size33{width:33%;}
.size34{width:34%;}
.size35{width:35%;}
.size36{width:36%;}
.size37{width:37%;}
.size38{width:38%;}
.size39{width:39%;}
.size40{width:40%;}
.size41{width:41%;}
.size42{width:42%;}
.size43{width:43%;}
.size44{width:44%;}
.size45{width:45%;}
.size46{width:46%;}
.size47{width:47%;}
.size48{width:48%;}
.size49{width:49%;}
.size50{width:50%;}
.size51{width:51%;}
.size52{width:52%;}
.size53{width:53%;}
.size54{width:54%;}
.size55{width:55%;}
.size56{width:56%;}
.size57{width:57%;}
.size58{width:58%;}
.size59{width:59%;}
.size60{width:60%;}
.size61{width:61%;}
.size62{width:62%;}
.size63{width:63%;}
.size64{width:64%;}
.size65{width:65%;}
.size66{width:66%;}
.size67{width:67%;}
.size68{width:68%;}
.size69{width:69%;}
.size70{width:70%;}
.size71{width:71%;}
.size72{width:72%;}
.size73{width:73%;}
.size74{width:74%;}
.size75{width:75%;}
.size76{width:76%;}
.size77{width:77%;}
.size78{width:78%;}
.size79{width:79%;}
.size80{width:80%;}
.size81{width:81%;}
.size82{width:82%;}
.size83{width:83%;}
.size84{width:84%;}
.size85{width:85%;}
.size86{width:86%;}
.size87{width:87%;}
.size88{width:88%;}
.size89{width:89%;}
.size90{width:90%;}
.size91{width:91%;}
.size92{width:92%;}
.size93{width:93%;}
.size94{width:94%;}
.size95{width:95%;}
.size96{width:96%;}
.size97{width:97%;}
.size98{width:98%;}
.size99{width:99%;}
.size100{width:100%;}
USAGE POLICY
1) You are allowed to use this ready-made code in your new skin provided it’s a FREE SKIN.
2) You are allowed to modify the code as per your requirement in your skin
3) You are required to inform me by sending me a NOTE while using this code
4) You need to CREDIT ME and LINK back the SOURCE CODE when using this code (Example on how to credit xgblue.deviantart.com/journal/… , kovowolf.deviantart.com/journa… , moofestgirl.deviantart.com/jou…
5) If you are using this for a “COMMISSION SKIN” then you need to pay me an incentive for using it. Note me for more details.
6) You cannot resubmit, claim the codes to be yours.
Found any bugs?
Let me know if you find any bug while using this code.
Get progress bars for your custom box:
Want to buy unique ready-made skins?
Check my gallery folder for Read-made Journal Skins .
I take commissions to make custom journal CSS too. Check out my Journal CSS folder or send me a note
Want to customize your profile page?
Check all my free resources + tutorials: CypherVisor.deviantart.com/gal…
Having any doubt with Custombox or Journal CSS? Please read this F.A.Q. + Tips n Tricks
I am a free resource provider for the deviantART community. If you like my free customization resources you can donate some points
to me as an appreciation or support.Coding copyright © `CypherVisor
Related content
Comments: 112
Hello! I have quick question about these ; w ; I figured out how to use and adjust them just fine, but I was wondering is there a way to get the bars to go side by side? Like using them with this code two in a row automatically puts one right below the other, but I'd like to use them in a horizontal row rather than a vertical row? If that makes sense fhdjghg Is there a way to do that?
👍: 0 ⏩: 0
Nothing. This code is usable in any skin. (it is not a skin itself) Whenever you want to use these progressbars just add the codes in your journal CSS (whether it is the default skin or a custom one) and you should be good to go!
👍: 0 ⏩: 0
Premium members can use CSS in journal skins unfortunately.
👍: 0 ⏩: 1
I thought if you made it yourself it would work... Well thenks anyways!
👍: 0 ⏩: 1
Do you even have anything in your gallery that doesn't say »»»»»»»»»»»»»»»»»»»»»»»»»»» Exclusively for Premium members and Super groups only
«««««««««««««««««««««««««««
?
👍: 0 ⏩: 1
I am sorry but all these stuff can be used in a premium profile only.
However, banners in my gallery can be used by all. cyphervisor.deviantart.com/gal...
👍: 0 ⏩: 0
Thanks...glad that you like it!
👍: 0 ⏩: 0
It's my pleasure. You're most welcome!
👍: 0 ⏩: 0
Can this be placed on the custom boxes on our main profile???
👍: 0 ⏩: 1
This is Very Creative~ I love how you make helpful AND useful stuffs for us deviants
👍: 0 ⏩: 1
Where are you supposed to paste the code in? I know its in the CSS box, but where?
👍: 0 ⏩: 1
In any journal skin's CSS (at the bottom of the other codes)
Read the instructions properly you'll understand it yourself.
👍: 0 ⏩: 0
I am surprised the way yo did the journal coding and stuff!
👍: 0 ⏩: 1
You are amazing with these stuff! Are you ever going to decide to make these progress bars for custom boxes?
👍: 0 ⏩: 1
Well, that is not quite possible taking into consideration the limitations of DA.
👍: 0 ⏩: 1
It's been almost a year since you commented that. Has there been any changed to the deviant art website that would allow you to make a progress bar for the custom box?
👍: 0 ⏩: 1
Commented on your other comment.
👍: 0 ⏩: 0
3 of them are mine and other two was from others which I do not remember!
👍: 0 ⏩: 0
Wait to many numbers and stuff DX
How does this work DX
I really like the color it is on the display
One of my faves
May I use it?
But I can figure out how
👍: 0 ⏩: 1
Well, it is explain in the description and the deviation. Just read through you'll understand. Please let me know if you still face any problem.
👍: 0 ⏩: 0
can these be used in custom boxes? ^^ just wondering! <3
👍: 0 ⏩: 1
| Next =>