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)
Red color
Yellow color
Green color
Blue color
Purple color
Orange color
Pink color
White color
Cyan color
HOW to customize "title" and "size" of the progress-bar
Code break-down:
YOUR_PROGRESSBAR_TITLE
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
awesome!!!!.
sure, when i start commissions i'll give you a part of it.
i have a question, can i use two or more css in one page/journal etc, i mean like having my own css for the bg and this css for the contents?
👍: 0 ⏩: 1
Thanks...
Yes ofcourse! This is an embeddable code mate. You can just copy+paste the codes along with your own code to use it in your journal CSS!
👍: 0 ⏩: 1
So we have to note you that we used it and credit you in the journal? o3o
YAY! FINALLY
👍: 0 ⏩: 1
You're welcome.
I had to upload this for a long time now. 
👍: 0 ⏩: 0
<= Prev |