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
Thanks for featuring my journal in the preview
👍: 0 ⏩: 1
These are so neat! I'm going to use them! If I'm using this in my everyday journal, would you like me to credit you? (I understand, and agree, that people who are using it when making new skins should credit you.)
👍: 0 ⏩: 1
Thanks dear!
I would appreciate if you do provide a credit in your journal. If not mine atleast providing a link to the source code would be much appreciated!
👍: 0 ⏩: 1
Okay, I used the code, credited you and linked to this deviation. Here's my journal entry: [link] (skin not made by me). You're directions were simple to understand and perfect. 
👍: 0 ⏩: 1
Ah! thank you... 
👍: 0 ⏩: 0
Okay, thanks for informing. I've fixed it now. There was a comma(,) getting along with the hyperlink address.
👍: 0 ⏩: 1
Ah, I see. Glad I was of help. ^^
👍: 0 ⏩: 1
Holy ZOMG! I had no idea before how you did this, it is brilliant. I know dA stacks their codes like your "bar red size20", but I never really thought of the applications of this.
👍: 0 ⏩: 1
Thanks dear!
Yeah, this way of stacking not only makes your coding clean but also structured and saves time by reducing coding effort!
👍: 0 ⏩: 1
I like! Though it may be harder for other non-HTML/CSS saavy users to really make good use of. I try to do most of my formattings via standard things, avoiding too many div classes, etc. But for some special snippet like this, very good idea.
👍: 0 ⏩: 1
Umm, its a little tricky actually. You need to keep all your class and their properties in mind while doing this because if you use the same property in different way and try to combine them the codes will get overwritten and you may get strange results!
👍: 0 ⏩: 1
Then you are a juggling CSS magician!
👍: 0 ⏩: 1
You have an appropriate plz response for everything.
👍: 0 ⏩: 1
These look awesome! I'll probably use them eventually, when I have something to use them on.
👍: 0 ⏩: 1
Man I want a subscription just for this. T.T
👍: 0 ⏩: 1
So Hawt xD
those codes are beautiful too xD
👍: 0 ⏩: 1
This is absolutely brilliant! 
👍: 0 ⏩: 1
Thanks dear! 
👍: 0 ⏩: 0
Hmm is it possible for these to be in custom boxes?
👍: 0 ⏩: 1
oh well. Thank you very much :3
👍: 0 ⏩: 1
Neat! However, is this only for Journal CSS? What if I wanted to use it for a custom box? Is that possible?
👍: 0 ⏩: 1
Thanks...
Nope. You can't use it in your custom box.
👍: 0 ⏩: 1
Damn. Oh well~ I might use it someday!
👍: 0 ⏩: 1
| Next =>