HOME | DD
CypherVisor — Customization tutorials
Published: 2008-03-02 12:35:28 +0000 UTC; Views: 7285; Favourites: 66; Downloads: 0
Redirect to original
Description
body div#devskin11160230 .gr-box * { margin:0; padding:0; border:0; background:transparent; } body div#devskin11160230 .list, body div#devskin11160230 .gr-top h2 img, body div#devskin11160230 .gr1, body div#devskin11160230 .gr2, body div#devskin11160230 .gr3, body div#devskin11160230 .tri, body div#devskin11160230 .gr3.gb, body div#devskin11160230 .gr2.gb, body div#devskin11160230 .gr1.gb, body div#devskin11160230 .bottom, body div#devskin11160230 .gr-top span { display:none; } body div#devskin11160230 .text { position:relative; z-index:99; width:580px; height:265px; margin:auto; margin-top:15px; margin-bottom:10px; color:#000; color:#fff; background:#0F0E0E; } body div#devskin11160230 .gr-top h2 { width:310px; height:45px; margin:auto; font-family:Julius Sans One; font-size:32px; } body div#devskin11160230 .gr-top h2 a { font-size:0px; } body div#devskin11160230 .container { position:relative; left:0px; width:580px; height:265px; padding-top:5px; _border:1px solid black; } body div#devskin11160230 .container::after { display:block; content:''; position:absolute; top:15px; left:355px; width:220px; height:220px; background:url(https://fc09.deviantart.net/fs70/f/2014/124/9/c/button_popup_bg_updated2014_by_cyphervisor-d7h4g07.png) no-repeat; background-position:0px -1604px; } body div#devskin11160230 .container:hover .box { max-height:36px; } body div#devskin11160230 .container:hover .box h1 { margin:3px 0px 5px -7px; transition:margin .4s; -moz-transition:margin .4s; -webkit-transition:margin .4s; -ms-transition:margin .4s; -o-transition:margin .4s; } body div#devskin11160230 .container .box { display:inline-block; width:348px; margin:-3px 0px; border:1px solid #a54141; background:#d55555; max-height:65px; overflow:hidden; cursor:pointer; transition:max-height .4s; -moz-transition:max-height .4s; -webkit-transition:max-height .4s; -ms-transition:max-height .4s; -o-transition:max-height .4s; } body div#devskin11160230 .container .box:hover { max-height:200px; } body div#devskin11160230 .container .box h1 { padding-left:30px; color:#fff; margin:17px 0px 23px 0px; font-weight:normal; font-family:Asap; font-size:18px; text-shadow:1px 1px 2px #565656; transition:margin .4s; -moz-transition:margin .4s; -webkit-transition:margin .4s; -ms-transition:margin .4s; -o-transition:margin .4s; } body div#devskin11160230 .container .box h1.menu1::before { display:inline-block; position:relative; top:4px; left:-14px; content:''; background:url(https://fc02.deviantart.net/fs71/f/2014/124/b/c/menuicon1_by_cyphervisor-d7h341e.png) no-repeat; width:23px; height:23px; } body div#devskin11160230 .container .box h1.menu1::after { display:inline-block; position:relative; top:6px; right:-45px; content:''; background:url(https://fc03.deviantart.net/fs71/f/2014/124/c/3/counter_03_by_cyphervisor-d7h4hq2.png) no-repeat; width:35px; height:23px; } body div#devskin11160230 .container .box h1.menu2::before { display:inline-block; position:relative; top:4px; left:-14px; content:''; background:url(https://fc07.deviantart.net/fs71/f/2014/124/a/d/menuicon2_by_cyphervisor-d7h37mo.png) no-repeat; width:23px; height:23px; } body div#devskin11160230 .container .box h1.menu2::after { display:inline-block; position:relative; top:6px; right:-30px; content:''; background:url(https://fc09.deviantart.net/fs71/f/2014/124/c/e/counter_05_by_cyphervisor-d7h4hqp.png) no-repeat; width:35px; height:23px; } body div#devskin11160230 .container .box h1.menu3::before { display:inline-block; position:relative; top:4px; left:-14px; content:''; background:url(https://fc05.deviantart.net/fs70/f/2014/124/2/7/menuicon3_by_cyphervisor-d7h37mt.png) no-repeat; width:23px; height:23px; } body div#devskin11160230 .container .box h1.menu3::after { display:inline-block; position:relative; top:6px; right:-104px; content:''; background:url(https://fc06.deviantart.net/fs71/f/2014/124/e/2/counter_01_by_cyphervisor-d7h4hpi.png) no-repeat; width:35px; height:23px; } body div#devskin11160230 .container .box h1.menu4::before { display:inline-block; position:relative; top:4px; left:-14px; content:''; background:url(https://fc06.deviantart.net/fs70/f/2014/124/a/4/menuicon4_by_cyphervisor-d7h37mz.png) no-repeat; width:23px; height:23px; } body div#devskin11160230 .container .box h1.menu4::after { display:inline-block; position:relative; top:6px; right:-130px; content:''; background:url(https://fc03.deviantart.net/fs71/f/2014/124/c/3/counter_03_by_cyphervisor-d7h4hq2.png) no-repeat; width:35px; height:23px; } body div#devskin11160230 .container .box .mylinks { margin-top:8px; max-height:115px; overflow:auto; } body div#devskin11160230 .container .box .mylinks a { text-decoration:none; display:inline-block; width:100%; background:#923838; padding-top:9px; height:26px; color:#c5c5c5; font-size:14px; font-family:Roboto Condensed; font-size:14px; } body div#devskin11160230 .container .box .mylinks a:hover { background:#6e2b2b; } body div#devskin11160230 .container .box .mylinks a::after { position:absolute; z-index:99; top:55px; left:349px; width:195px; height:160px; opacity:0; filter:alpha(opacity=0); _zoom:1; background:url(https://fc09.deviantart.net/fs70/f/2014/124/9/c/button_popup_bg_updated2014_by_cyphervisor-d7h4g07.png); content:''; } body div#devskin11160230 .container .box .mylinks a.cbox::after { background-position:0px 0px; } body div#devskin11160230 .container .box .mylinks a.devid::after { background-position:0px -161px; } body div#devskin11160230 .container .box .mylinks a.devbox::after { background-position:0px -321px; } body div#devskin11160230 .container .box .mylinks a.tipsntricks::after { background-position:0px -481px; } body div#devskin11160230 .container .box .mylinks a.resources::after { background-position:0px -640px; } body div#devskin11160230 .container .box .mylinks a.floatimage::after { background-position:0px -801px; } body div#devskin11160230 .container .box .mylinks a.contentbg::after { background-position:0px -961px; } body div#devskin11160230 .container .box .mylinks a.semitranparent::after { background-position:0px -1120px; } body div#devskin11160230 .container .box .mylinks a.journalbeginner::after { background-position:0px -1283px; } body div#devskin11160230 .container .box .mylinks a.youplayer::after { background-position:0px -1444px; } body div#devskin11160230 .container .box .mylinks a.customwide::after { background-position:0px -1841px; } body div#devskin11160230 .container .box .mylinks a.customcol::after { background-position:0px -2003px; } body div#devskin11160230 .container .box .mylinks a:hover::after { transition:all .4s ease-out .3s; -moz-transition:all .4s ease-out .3s; -webkit-transition:all .4s ease-out .3s; -ms-transition:all .4s ease-out .3s; -o-transition:all .4s ease-out .3s; left:372px; opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin11160230 .container .box .mylinks a span { margin-left:60px; } body div#devskin11160230 .topround { border-radius:4px 4px 0px 0px; -moz-border-radius:4px 4px 0px 0px; -webkit-border-radius:4px 4px 0px 0px; } body div#devskin11160230 .bottomround { border-radius:0px 0px 4px 4px; -moz-border-radius:0px 0px 4px 4px; -webkit-border-radius:0px 0px 4px 4px; } body div#devskin11160230 a.external:after { content:''; }
Page Customization Tutorials
Custom Box background tutorial
Deviant ID Box background tutorial
Deviation Box background tutorial
Widget Customization Tutorials
Content-Holder box floating image
Content-Holder box background
Semi-Transparent box tutorial
CustomBox Wide Content tutorial
CustomBox Columns tutorial
Journal CSS Tutorials
Journal {CSS} Guide - Beginners
General Tutorials
Custom Box Tips & Tricks
Custom Box Resources
Mini Youtube player
Related content
Comments: 39
Will you make a F2U or P2U version of this ?
So we can use and customize it by ourselves.
Because I must admit that it'd be really helpful !
👍: 0 ⏩: 0
I would love one of these for my group page I've started. But don't you need premium to have journal skins?
I would love if you can make on for my group. i dont have much points yet but I can feature you both on my profile and group page. Note me if your ok with this.
👍: 0 ⏩: 0
If I were to give a commotion. Would you be willing to create me one of these? And also I had a very very hard time figuring out the tutorial for adding the navigation to my page, I have very bad eyes that makes reading difficult for me is there any video out there that shows this process?
👍: 0 ⏩: 1
Sure, I can do that for you.
👍: 0 ⏩: 0
I am sorry, I am keeping this with me currently.
👍: 0 ⏩: 0
This is so neat! Where can I find a tutorial for how to make it so when you hover over the button, it appears on the side?
👍: 0 ⏩: 1
I guess nowhere. 
👍: 0 ⏩: 1
I mean... where can I find help with coding something like this X3
I really love the roll-over affect and I want to try using it myself once I get a premium. Do you happen to have any sort of resources that may be helpful?
👍: 0 ⏩: 1
Nah. As I said, I just coded that for own use and I do not have a tut for that exact thing.
👍: 0 ⏩: 1
i don't know how to make a journal into a featured deviation//SOBS
👍: 0 ⏩: 1
You gotta know how to make journal skin for this tut. I do commission work for this. If you are interested then perhaps I can make one for you.
👍: 0 ⏩: 1
Yeah i know how to do journals but i dont know how to convert them into a deviation. Well ifjndjdbd its ok. Emm yeah i would like to but only if its point commissions since i dont have money ovo
👍: 0 ⏩: 1
Yes, I do points commission as well.
👍: 0 ⏩: 1
oh thanks 
👍: 0 ⏩: 1
How much are your point commissions for journal skins? I have only seen USD amounts
👍: 0 ⏩: 1
Well, 100pts=$1
👍: 0 ⏩: 1
I was unsure if you accepted points
👍: 0 ⏩: 1
Well, I do. It is mentioned in my commission rate journal at the bottom.
👍: 0 ⏩: 1
wow ! this is so awesome! I'm going to have to try and figure out the tutorial for this and add it to my page! It's so great!!!
👍: 0 ⏩: 1
Anyway, next step is figuring out how to have a longer display.. I noticed you could only display a certain length.
👍: 0 ⏩: 1
Yes. That's a challenge to get a bigger length in the widget. I tried some ways but it didn't work.
Btw, don't tell this to anyone yet. Its kinda smart secret. 
👍: 0 ⏩: 1
I tried a few things too. I think the problem is, dA has limited the height for those.
Your secret is safe
👍: 0 ⏩: 1
Yeah if feature a journal then the deviation height is fixed by DA.
👍: 0 ⏩: 0
Okay, figured it out!
Create a journal with desired skin, then add a featured deviation widget, then use the search function to sneakily add your journal!
👍: 0 ⏩: 1
Very intelligent! I salute you
👍: 0 ⏩: 1
