HOME | DD
electricjonny — The Good and The Bad
Published: 2012-06-01 07:47:53 +0000 UTC; Views: 7031; Favourites: 4; Downloads: 0
Redirect to original
Description
/* set a max-width for the whole journal */ body div#devskin7808734 .gr-box { max-width:920px; margin:0px auto 0px auto; border:1px solid #a6b2a6; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* hide certain borders */ body div#devskin7808734 i.gr2, body div#devskin7808734 i.gr3 i, body div#devskin7808734 .gr-top .gr, body div#devskin7808734 , body div#devskin7808734 i.gr3, body div#devskin7808734 .gr-body { border:none!important; } /* top of journal borders and other borders */ body div#devskin7808734 .gr-top { border-bottom:1px solid #a6b2a6; border-right:none; border-left:none; } /* hide certain things */ body div#devskin7808734 .gr-top .metadata img, body div#devskin7808734 i.gr1, body div#devskin7808734 i.gr2, body div#devskin7808734 i.gr3 { display:none; } body div#devskin7808734 .gr-body .gr { border-top:none; border-right:none; border-left:none; } /* the top of the journal */ body div#devskin7808734 .gr-top { background:#DAE4D9 url(https://fc02.deviantart.net/fs71/f/2014/240/d/c/topfade_by_electricjonny-d7wzcyu.gif) repeat-x scroll center top; background: -webkit-linear-gradient(top, #e7f0e6 0%, #ccd9cd 75%); background: -moz-linear-gradient(top, #e7f0e6 0%, #ccd9cd 75%); background:linear-gradient(top, #E7F0E6 0%, #CCD9CD 75%); text-align:center; padding:0px 0px 0px 0px; } /* text align the top journal info */ body div#devskin7808734 .gr-top .metadata { text-align:center; } /* color of links in journal info */ body div#devskin7808734 .gr-top .metadata a { color:#89968A; } /* the journal author and category */ body div#devskin7808734 .gr-top .metadata .name, body div#devskin7808734 .gr-top .metadata .name a, body div#devskin7808734 .gr-top .metadata .category a { color:#000000; } body div#devskin7808734 .gr-top .metadata .name a:hover, body div#devskin7808734 .gr-top .metadata .category a:hover { color:#000000; text-decoration:underline; } /* no bullet on the category */ body div#devskin7808734 .gr-top .metadata ul li { list-style-type:none; } /* nudge the journal info up a tad */ body div#devskin7808734 .gr-top .metadata ul { margin-top:-5px; } /* main background */ body div#devskin7808734 .text { background:#2E3D35 url(https://fc01.deviantart.net/fs71/f/2014/206/7/6/skinbg_green_by_electricjonny-d7sb0fz.png) repeat; padding:20px; margin-bottom:-56px; } /* box-shadow on the content box's */ body div#devskin7808734 .shadow { box-shadow:6px 6px 6px #1B241F; -moz-box-shadow:6px 6px 6px #1B241F; -webkit-box-shadow:6px 6px 6px #1B241F; margin-top:20px; } /* the bottom holding the comment link */ body div#devskin7808734 .ppb { margin-top:14px; height:40px; border-top:1px solid #a6b2a6; background:#e7f0e6 url(https://fc06.deviantart.net/fs70/f/2014/206/0/a/ppb_by_electricjonny-d7sb0gc.gif) center bottom repeat-x; background: -webkit-linear-gradient(180deg, #e7f0e6, #ccd9cd); background: -moz-linear-gradient(180deg, #e7f0e6, #ccd9cd); background:linear-gradient(180deg, #E7F0E6, #CCD9CD); } /* the title of the journal */ body div#devskin7808734 .gr-top h2 { padding-top:65px; color:#2c3635; font-family:Palatino Linotype; font-size:20pt; text-shadow:2px 2px 3px #F2FCF1; } body div#devskin7808734 .gr-top h2 a { color:#2c3635!important; } /* the top image */ body div#devskin7808734 .gr-top .gr { padding:10px; background:transparent url(https://orig12.deviantart.net/f282/f/2014/208/9/e/journal_lightning_animated_by_electricjonny-d7sg6i4.png) no-repeat top center!important; height:135px; } /* title of the content box */ body div#devskin7808734 .newstitle { background:#EAEFE8; background: -webkit-linear-gradient(top, #f1f7ef 20%, #c6ccc5 100%); background: -moz-linear-gradient(top, #f1f7ef 20%, #c6ccc5 100%); background:linear-gradient(top, #F1F7EF 20%, #C6CCC5 100%); text-shadow:2px 2px 3px #F6F9F4; text-align:center; font-family:Palatino Linotype; font-size:18pt; padding:2px; border:1px solid #a6b2a6; border-radius:6px 6px 0px 0px; -moz-border-radius:6px 6px 0px 0px; -webkit-border-radius:6px 6px 0px 0px; } body div#devskin7808734 .newstitle.good { background:#468451; background: -webkit-linear-gradient(top, #e6ede4, #468451); background: -moz-linear-gradient(top, #e6ede4, #468451); background:linear-gradient(top, #E6EDE4, #468451); text-shadow:1px 1px 2px #F6F9F4; } body div#devskin7808734 .newstitle.bad { background:#A56565; background: -webkit-linear-gradient(top, #e6ede4, #a56565); background: -moz-linear-gradient(top, #e6ede4, #a56565); background:linear-gradient(top, #E6EDE4, #A56565); text-shadow:1px 1px 2px #F6F9F4; } body div#devskin7808734 .newstitle.gold { background:#E5D81B; background: -webkit-linear-gradient(top, #fffced 20%, #e5d81b 100%); background: -moz-linear-gradient(top, #fffced 20%, #e5d81b 100%); background:linear-gradient(top, #FFFCED 20%, #E5D81B 100%); text-shadow:1px 1px 2px #F6F9F4; } /* the content box it's self */ body div#devskin7808734 .news { background:#ccd9cd url(https://fc00.deviantart.net/fs71/f/2014/206/0/8/skincontentbg_by_electricjonny-d7sb0fk.png) repeat; border:1px solid #a6b2a6; border-top:none; padding:0px 10px 10px 10px; font-size:12px; border-radius:0px 0px 6px 6px; -moz-border-radius:0px 0px 6px 6px; -webkit-border-radius:0px 0px 6px 6px; box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); -moz-box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); -webkit-box-shadow:0px 4px 10px -6px rgba(0,0,0,.4) inset, 4px 4px 10px rgba(0,0,0,.8); } /* first letter of content */ body div#devskin7808734 .a:first-letter { font-size:14pt; } /* indent the first sentence of the content */ body div#devskin7808734 .a { text-indent:20px; margin:0px 0px 5px 0px; line-height:18px; } /* links in the content */ body div#devskin7808734 .news a { color:#0B7200; border-bottom:1px solid transparent; text-decoration:none; font-weight:normal; outline:none; text-shadow:1px 1px 0px rgba(0,0,0,.15); transition:color 160ms ease-in-out, border 160ms ease-in-out; -moz-transition:color 160ms ease-in-out, border 160ms ease-in-out; -webkit-transition:color 160ms ease-in-out, border 160ms ease-in-out; -ms-transition:color 160ms ease-in-out, border 160ms ease-in-out; -o-transition:color 160ms ease-in-out, border 160ms ease-in-out; } body div#devskin7808734 .news a:hover:not(.img) { color:#309923; border-bottom:1px solid #309923; transition:color 110ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 110ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 110ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 110ms ease-in-out, border 90ms ease-in-out; -o-transition:color 110ms ease-in-out, border 90ms ease-in-out; } body div#devskin7808734 .news a:active:not(.img) { color:#125908; border-bottom:1px solid #125908; transition:color 110ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 110ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 110ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 110ms ease-in-out, border 90ms ease-in-out; -o-transition:color 110ms ease-in-out, border 90ms ease-in-out; } /* define the external links */ body div#devskin7808734 a .img:hover, body div#devskin7808734 a:hover .img, body div#devskin7808734 a:hover .img:hover { text-decoration:none!important; border-bottom:none!important; } body div#devskin7808734 .news a[class^='external'] { color:#053275; text-decoration:none; border-bottom:1px solid transparent; transition:color 160ms ease-in-out, border 160ms ease-in-out; -moz-transition:color 160ms ease-in-out, border 160ms ease-in-out; -webkit-transition:color 160ms ease-in-out, border 160ms ease-in-out; -ms-transition:color 160ms ease-in-out, border 160ms ease-in-out; -o-transition:color 160ms ease-in-out, border 160ms ease-in-out; } body div#devskin7808734 .news a[class^='external']:hover:not(.img) { color:#0958BF; text-decoration:none; border-bottom:1px solid #0958BF; transition:color 90ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 90ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 90ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 90ms ease-in-out, border 90ms ease-in-out; -o-transition:color 90ms ease-in-out, border 90ms ease-in-out; } body div#devskin7808734 .news a[class^='external']:active:not(.img) { color:#042959; text-decoration:none; border-bottom:1px solid #042959; transition:color 90ms ease-in-out, border 90ms ease-in-out; -moz-transition:color 90ms ease-in-out, border 90ms ease-in-out; -webkit-transition:color 90ms ease-in-out, border 90ms ease-in-out; -ms-transition:color 90ms ease-in-out, border 90ms ease-in-out; -o-transition:color 90ms ease-in-out, border 90ms ease-in-out; } /* style links to show */ body div#devskin7808734 .news a.show { font-size:0px; } body div#devskin7808734 .news a.show:after { font-size:12px; content:attr(href); } body div#devskin7808734 a.external, body div#devskin7808734 a.external:after { display:inline; content:''!important; } /* style bold, since dA's style plays on it */ body div#devskin7808734 b { font-weight:bold; background:transparent; display:inline; } /* classes I can use to define certain things */ body div#devskin7808734 .red { color:#C90404; display:inline; } body div#devskin7808734 .blue { color:#052363; display:inline; } body div#devskin7808734 .green { color:#43895D; display:inline; } body div#devskin7808734 .big { font-size:13pt; display:inline; } body div#devskin7808734 .small { display:inline; font-size:7pt; position:relative; } body div#devskin7808734 .code { text-indent:0px; font-family:Courier New; background:#E9F2E8; border:2px inset black; padding:5px 5px 5px 5px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; white-space:nowrap; overflow:auto; } body div#devskin7808734 .scroller { text-indent:0px; font-family:'Source Code Pro', courier; background:#E9F2E8; border:2px inset black; padding:5px 5px 5px 5px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; white-space:nowrap; overflow:auto; } body div#devskin7808734 blockquote { text-indent:0px; border:none; } /* the comments link button */ body div#devskin7808734 a.commentslink { background:transparent url(https://99.82.246.199/journal/journal_comments.png) 0px 0px no-repeat; background: -webkit-linear-gradient(180deg, #dbeada 20%, #b5c5b4 100%); background: -moz-linear-gradient(180deg, #dbeada 20%, #b5c5b4 100%); background:linear-gradient(180deg, #DBEADA 20%, #B5C5B4 100%); border:1px solid #8BA68B; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:3px 3px 8px rgba(0,0,0,.35); -moz-box-shadow:3px 3px 8px rgba(0,0,0,.35); -webkit-box-shadow:3px 3px 8px rgba(0,0,0,.35); display:inline-block; padding:4px 6px 4px 6px; margin:8px 0px 0px 0px; text-indent:0px; text-decoration:none; word-spacing:auto; color:#2C3635; transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -moz-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -webkit-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -ms-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; -o-transition:background 160ms ease-in-out, box-shadow 160ms ease-in-out, padding 160ms ease-in-out, margin 160ms ease-in-out; } body div#devskin7808734 a:hover.commentslink { background:url(https://99.82.246.199/journal/journal_comments.png) 0px -37px no-repeat; background: -webkit-linear-gradient(top, #dbeada 20%, #c8d6c7 100%); background: -moz-linear-gradient(top, #dbeada 20%, #c8d6c7 100%); background:linear-gradient(top, #DBEADA 20%, #C8D6C7 100%); padding:6px 16px 6px 16px; margin:6px 0px 0px 0px; transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -moz-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -webkit-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -ms-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; -o-transition:background 90ms ease-in-out, padding 90ms ease-in-out, margin 90ms ease-in-out; } body div#devskin7808734 a:active.commentslink { background:url(https://99.82.246.199/journal/journal_comments.png) 0px -74px no-repeat; background: -webkit-linear-gradient(top, #c8d6c7 20%, #dbeada 100%); background: -moz-linear-gradient(top, #c8d6c7 20%, #dbeada 100%); background:linear-gradient(top, #C8D6C7 20%, #DBEADA 100%); box-shadow:1px 1px 4px rgba(0,0,0,.35); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.35); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.35); transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -moz-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -webkit-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -ms-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; -o-transition:background 90ms ease-in-out, box-shadow 90ms ease-in-out; } body div#devskin7808734 a.commentslink:first-letter { font-size:12px; } /* not used anymore, but the previous journals link */ body div#devskin7808734 a.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; display:none; } body div#devskin7808734 a:hover.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; background-position:0px -27px; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; } body div#devskin7808734 a:active.prevlink { background:url(https://99.82.246.199/journal/journal_previous.gif) no-repeat; background-position:0px -54px; padding:5px 11px 6px 11px; margin-left:3px; text-decoration:none; color:#2C3635; } body div#devskin7808734 .sig { position:relative; bottom:-30px; right:-8px; width:100px; } /* hide various things */ body div#devskin7808734 .preview, body div#devskin7808734 ul.f, body div#devskin7808734 .gr-top h2 img, body div#devskin7808734 i.tri, body div#devskin7808734 .hsep, body div#devskin7808734 div.drag-and-collect { display:none; } /* style the thumb-holder */ body div#devskin7808734 .thumb-holder { background:url(https://st.deviantart.net/blogskins/green/daskin_noise.png) repeat; margin:20px 20px 20px 20px; padding:20px; box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -moz-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } body div#devskin7808734 .thumb-holder2 { background:url(https://st.deviantart.net/blogskins/green/daskin_noise.png) repeat; margin:20px 20px 20px 20px; padding:20px; box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -moz-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.8), 0px 40px 40px -20px rgba(0,0,0,.11) inset; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; } /* style the thumbs to remove the padding */ body div#devskin7808734 span.shadow { padding:0px; } /* title of the thumb-holder */ body div#devskin7808734 .thumb-holder b { display:block; color:#3F3F3F; font-size:16pt; text-align:center; text-shadow:2px 2px 4px #999999; margin-top:-10px; } body div#devskin7808734 .thumb-holder .thumb:hover { border-bottom:none; } body div#devskin7808734 .news .shadow.mild a:hover, body div#devskin7808734 .news .shadow.mild a:active { border:none!important; } /* remove box-shadow of thumbs - added in another place */ body div#devskin7808734 .thumb-holder .shadow { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; margin:-2px 0px -5px 0px; } body div#devskin7808734 .thumb-holder img { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; max-width:100%; } /* set up the transition */ body div#devskin7808734 .thumb-holder .shadow-holder { transition:all 80ms ease-in-out; -moz-transition:all 80ms ease-in-out; -webkit-transition:all 80ms ease-in-out; -ms-transition:all 80ms ease-in-out; -o-transition:all 80ms ease-in-out; } /* rotate the thumbs, kinda randomly */ body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+1) { transform:rotate(4deg) scale(.8,.8); -moz-transform:rotate(4deg) scale(.8,.8); -webkit-transform:rotate(4deg) scale(.8,.8); -ms-transform:rotate(4deg) scale(.8,.8); -o-transform:rotate(4deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+2) { transform:rotate(-2deg) scale(.8,.8); -moz-transform:rotate(-2deg) scale(.8,.8); -webkit-transform:rotate(-2deg) scale(.8,.8); -ms-transform:rotate(-2deg) scale(.8,.8); -o-transform:rotate(-2deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+3) { transform:rotate(1deg) scale(.8,.8); -moz-transform:rotate(1deg) scale(.8,.8); -webkit-transform:rotate(1deg) scale(.8,.8); -ms-transform:rotate(1deg) scale(.8,.8); -o-transform:rotate(1deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+4) { transform:rotate(-4deg) scale(.8,.8); -moz-transform:rotate(-4deg) scale(.8,.8); -webkit-transform:rotate(-4deg) scale(.8,.8); -ms-transform:rotate(-4deg) scale(.8,.8); -o-transform:rotate(-4deg) scale(.8,.8); box-shadow:1px 1px 4px rgba(0,0,0,.6); -moz-box-shadow:1px 1px 4px rgba(0,0,0,.6); -webkit-box-shadow:1px 1px 4px rgba(0,0,0,.6); } /* unrotate them and zoom up on hover */ body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+1):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+2):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+3):hover, body div#devskin7808734 .thumb-holder .shadow-holder:nth-child(4n+4):hover { transform:rotate(0) scale(1,1); -moz-transform:rotate(0) scale(1,1); -webkit-transform:rotate(0) scale(1,1); -ms-transform:rotate(0) scale(1,1); -o-transform:rotate(0) scale(1,1); transition:all 80ms ease-in-out; -moz-transition:all 80ms ease-in-out; -webkit-transition:all 80ms ease-in-out; -ms-transition:all 80ms ease-in-out; -o-transition:all 80ms ease-in-out; box-shadow:6px 6px 8px rgba(0,0,0,.5); -moz-box-shadow:6px 6px 8px rgba(0,0,0,.5); -webkit-box-shadow:6px 6px 8px rgba(0,0,0,.5); z-index:99; } /* put the exact date on the timestamp */ body div#devskin7808734 li.author span:not(.name):not(.username-with-symbol):not(.user-symbol):after { content:' - 'attr(title); } /* the top and bottom box-shadow look */ body div#devskin7808734 .boxShadowTop { position:relative; top:-20px; margin:0px -20px -50px -20px; } body div#devskin7808734 .boxShadowBottom { position:relative; bottom:71px; margin:61px -20px -49px -20px; } /* the box shadow styles themselves */ body div#devskin7808734 .boxShadow1 { border-top:1px solid #000000; opacity:.5; filter:alpha(opacity=50); _zoom:1; } body div#devskin7808734 .boxShadow2 { border-top:1px solid #000000; opacity:.468203; filter:alpha(opacity=47); _zoom:1; } body div#devskin7808734 .boxShadow3 { border-top:1px solid #000000; opacity:.432504; filter:alpha(opacity=43); _zoom:1; } body div#devskin7808734 .boxShadow4 { border-top:1px solid #000000; opacity:.395469; filter:alpha(opacity=40); _zoom:1; } body div#devskin7808734 .boxShadow5 { border-top:1px solid #000000; opacity:.358121; filter:alpha(opacity=36); _zoom:1; } body div#devskin7808734 .boxShadow6 { border-top:1px solid #000000; opacity:.321018; filter:alpha(opacity=32); _zoom:1; } body div#devskin7808734 .boxShadow7 { border-top:1px solid #000000; opacity:.284532; filter:alpha(opacity=28); _zoom:1; } body div#devskin7808734 .boxShadow8 { border-top:1px solid #000000; opacity:.24895; filter:alpha(opacity=25); _zoom:1; } body div#devskin7808734 .boxShadow9 { border-top:1px solid #000000; opacity:.214517; filter:alpha(opacity=21); _zoom:1; } body div#devskin7808734 .boxShadow10 { border-top:1px solid #000000; opacity:.181468; filter:alpha(opacity=18); _zoom:1; } body div#devskin7808734 .boxShadow11 { border-top:1px solid #000000; opacity:.150042; filter:alpha(opacity=15); _zoom:1; } body div#devskin7808734 .boxShadow12 { border-top:1px solid #000000; opacity:.120494; filter:alpha(opacity=12); _zoom:1; } body div#devskin7808734 .boxShadow13 { border-top:1px solid #000000; opacity:.093113; filter:alpha(opacity=9); _zoom:1; } body div#devskin7808734 .boxShadow14 { border-top:1px solid #000000; opacity:.068233; filter:alpha(opacity=7); _zoom:1; } body div#devskin7808734 .boxShadow15 { border-top:1px solid #000000; opacity:.046259; filter:alpha(opacity=5); _zoom:1; } body div#devskin7808734 .boxShadow16 { border-top:1px solid #000000; opacity:.027692; filter:alpha(opacity=3); _zoom:1; } body div#devskin7808734 .boxShadow17 { border-top:1px solid #000000; opacity:.013171; filter:alpha(opacity=1); _zoom:1; } body div#devskin7808734 .boxShadow18 { border-top:1px solid #000000; opacity:.003549; filter:alpha(opacity=0); _zoom:1; } /* make text white so you can see it */ body div#devskin7808734 .writer.no-lub.put-art-here { color:#FFFFFF; } /* the button to go down to scripts */ body div#devskin7808734 .scripts { margin:20px 0px 0px 0px; background:rgb(220, 225, 220); background:rgba(220, 225, 220, .65); background: -webkit-linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); background: -moz-linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); background:linear-gradient(rgba(251,252,253,.40), rgba(246,247,248,.18) 49%, rgba(231,232,233,.12) 51%, rgba(225,226,229,.1)); box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -moz-box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -webkit-box-shadow:0px 0px 1px 0px rgba(250,250,255,1) inset, 0px 0px 3px 0px rgba(250,250,255,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); color:#FFFFFF; text-shadow:2px 2px 4px #000000; padding:4px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; position:absolute; text-decoration:none; transition:all 120ms ease-in-out; -moz-transition:all 120ms ease-in-out; -webkit-transition:all 120ms ease-in-out; -ms-transition:all 120ms ease-in-out; -o-transition:all 120ms ease-in-out; } body div#devskin7808734 .scripts:hover { background:rgb(250, 255, 250); background: -webkit-linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); background: -moz-linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); background:linear-gradient(center top , rgba(250, 255, 250, 0.85), rgba(240, 245, 240, 0.3) 40%, rgba(230, 235, 230, 0.1) 75%, rgba(220, 225, 220, 0.11)) repeat scroll 0 0 rgba(151, 153, 152, 0.3); transition:all 120ms ease-in-out; -moz-transition:all 120ms ease-in-out; -webkit-transition:all 120ms ease-in-out; -ms-transition:all 120ms ease-in-out; -o-transition:all 120ms ease-in-out; } body div#devskin7808734 .scripts:active { background:rgb(251, 252, 253); background: -webkit-linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); background: -moz-linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); background:linear-gradient(180deg, rgba(251,252,253,.35), rgba(246,247,248,.10) 49%, rgba(231,232,233,.08) 51%, rgba(225,226,229,.05)); box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -moz-box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); -webkit-box-shadow:0px 0px 1px 0px rgba(250,255,250,1) inset, 0px 0px 3px 0px rgba(250,255,250,1) inset, 0px 1px 5px -1px rgba(0,0,0,.75); transition:all 90ms ease-in-out; -moz-transition:all 90ms ease-in-out; -webkit-transition:all 90ms ease-in-out; -ms-transition:all 90ms ease-in-out; -o-transition:all 90ms ease-in-out; } /* testing html -
Intro
So it's been a while since I wrote anything here. That's due to a number of reasons that I don't care to get into right now. But I had this idea last night while falling asleep, and thought it would be fun. I'll list the best 5 features dA has done over the years, and the worst 5 features. I'm sure I could spend months on this and refine it to exactly what I really want to say, but I'm gonna try to spit this out fairly quickly and just list things that first come to mind.
The Good
Quick Reply
At least I think that's the term for this. Or is it Easy Reply? Way back in the day, version 4 or so, when you clicked the Reply button on comments, it would load the comment you were replying to as a new page, and you put your reply into the textbox there and hit send. But with quick reply, it opened right under the comment, quick and easy. I doubt many people remember those days, but that update was beautiful and much loved. Also one of the very first beta features, back when beta testing was first launched.
Journal CSS
This was, and still is, one of the best subscriber features for me. To be able to customize your journal however you want and add some unique flair to your page? Awesome. And it's what first got me interested in learning CSS. Sure, most people use the one click idiot-proof installable journal skins, but being able to create or edit your own skin is amazing, and I really appreciate that.
Comment Links
This one may sound odd. But as you may know, you can click the time stamp on any comment to get just that specific comment. I find that useful, for a number of reasons. First and probably foremost, since dA doesn't remove comments, those comments will always be here. So while the deviation or whatever may be removed, those comments are always able to be loaded. Then there's some other useful things that can be done with those unique comment pages, mostly on the scripting side for me.
Muro
I was kind of hesitant to add this one, since I don't ever draw or use it, but I really like how dA stepped into the HTML5 world and made this, saying "fuck you IE, we'll support you as much as we can, but won't let you hold us back". It's a pretty cool feature (not to imply that it's better than a standalone drawing program), and I hope to see more advanced pages and features here.
Nested Replies
I don't know if dA was the first to implement this. I doubt it. But I bet it was the first site of this size that used nested comments so much. It drives me absolutely insane trying to follow a thread of comments on another site when the threads aren't nested like they are here (or can be, if you select to view threads nested). On other sites, you often see "username : comment here" or something similar, or those fucking quote boxes (like many forums). That is just not useful. To me at least. Having direct replies to people nested right under their comment just makes sense to me, and it feels like anything else is just stuck in the early 2000's and can't fricken adapt nested replies to help people follow conversations better. I love that dA has had nested comments for so long and makes that the primary way to view conversations.
The Bad
Comment Moods
This is, by far, one of the dumbest features still in existence. You know, that block of moods on the right you can select when you leave a comment? Only hardly anyone ever leaves a mood on a comment? I do find it useful that you can see only the comments of a certain mood on things, but since it's so seldom used, it's just a block of emoticons that gets in the way and annoys me.
The Today Moods
This is found on the today page, at the top left, and it never ever changes. Ever. Or if it does, I haven't noticed. Since it never changes, why is it there? Just to remind me that most people are feeling "love" followed by "joy" when they emote or leave journal moods? Bah, rather useless to me. If it never changes, I don't need to see it.
Super Browse
This is probably my most hated "feature" right now. Since version 7, when you click a deviation, you aren't taken to a new page. You are getting fed information about the deviation page and it's loaded into the page you are currently on and made viewable. Or in theory. For me, maybe due to my internet speed or browser configuration, it often fails to load right. But you end up with a URL such as ht tp://browse.deviantart.com/?qh=§ion=&global=1&q=by%3Aelectricjonny#/d4bzqg. For people that pay attention to the URL, you'll see that it makes no sense. The originating page I was on was a search page, and then to show the deviation, dA tacked on #/d4bzqg. But when that URL is linked elsewhere on the internet, people get a double page load. First the originating page is loaded, then once the JavaScript kicks in, the final deviation page loads. Which is just confusing and disorienting to people. Not to mention that it gives no hint as to the creator of the art, or the title of the art.
Make a feature, promptly forget about it
This is sort of a long standing tendency of dA. They make great features, but they release them early, while they could still use some polish, then they forget about them. Like sta.sh? Seems it was released half finished and they are finishing it as we speak. And take portfolios for example. They had said that small images (like emoticons) and literature and video and Flash would be supported. But as far as I know, those are still not available to be put into a portfolio. Don't get me wrong, I love the portfolio. It is great for images, but for those other types of art, it is lacking. And we've seen absolutely zero progress here. Many site features are in the same boat. Chats being a prime example. It was great when it was first launched. But it was not user friendly and the style is still rather dated. Third party developers, like electricnet , have made scripts to try and smooth it's use. But why dA can't just spend a week or two and put those features in for everyone is a fucking mystery to us all. But dA did recently revamp the forums, and for that I am thankful. I just wish that dA would refine more of it's current features rather than spend time and money and resources with other things. And on a related note, take a read of this, since I very much agree with it: An Open Letter for API Developers .
Lack of Direction
Part of the last few issues I talked about, is a lack of direction. Or a lack of leadership. Or so it seems to me. We are getting hit with new features and refinements left and right. But I don't see a clear logic or reason behind any of it. It seems that it's kind of a "Well we have the man power, make some new feature!" or something close to that. I think, what this site lacks, is a clear model of where it's headed. Are we appealing to idiot 12 year olds who like to give each other llamas and spend mommy and daddies money? Are we a professional art site? Are we just another money making social network? Why are we making these features? What about all the older features? Granted those questions would take a long time to answer, and I or anyone else here probably doesn't deserve to know, but I used to think I had an idea about those questions, 3 or so years ago. dA is hiring new people left and right, and they seem to be public relations folk that their prime job is to talk the talk and to sound pleasing. I don't know. I liked it better when the old staff I knew talked about things. While I don't love each and every old time staff member, I appreciated their talking to us.
So, what say you?
This only took me an hour or two to type up (I'm slow as shit with journals 
Related content
Comments: 33
The only portion of the pros I don't agree completely is Muro, I have tried to use it, is crappy as hell; my sister used to have an LG cookie cell phone, it's pretty sad to say that the in phone drawing program was better and more user friendly than Muro and I'm talking about a 3 or so years old cell phone. Muro is not user friendly and it's buggy, at least for me, so I just gave up trying to use it.
I think what I find most annoying about the Comment Moods thing is that sometimes I click on it by mistake and I've yet to figure out how you can clear it, you know, if I'm writting my reply and I click on it for any reason there's no way to take off the emoticon, you can only change it but not remove it. Also, that super browse thing is such a small thing but definitely annoying as hell, I usually end up clicking on the deviation title just to see the cleaner link with the deviation title, etc. I'm not sure if I'm just being picky but I can't stand that random looking url.
Another feature they seem to have forgotten about it's Groups, they launched Groups and then there has been like no updates to it (as far as I can remember), at least they should add a forum to Groups or something.
👍: 0 ⏩: 1
Hmm, well I've never used muro on a phone, or other mobile device. I think (not completely sure) that they intended for muro to be used on a desktop computer. I think they tried to make it work on iThings, but the main thing they are working to make it work on is a computer. And true, while it is not the most advanced in terms of features, I still have to appreciate it, if only for the built-by-hand dive into HTML5 they did. So, while there are issues, and problems, I like the idea of it. If that makes sense.
And ugh, yeah I don't even know if you can clear a comment mood. I hide the comment moods (with the Stylish extension), since it takes up space for me and I never use it. And oh my god, yes, the superbrowse thing with jacked up URL's is by far one of the most annoying things here. I've heard countless complaints from users where things just fail to even work. And dA said that they load faster and cleaner, back when it first showed up. I'm sorry, but loading the full underlying page, THEN loading the image and all its content afterwards? How is that faster? It is not faster. And it is annoyingly confusing with its URL
As for groups, well, yeah. They launched them, but then promptly forgot about them. That sort of ties into my "Make a feature, promptly forget about it" section. I mean, sure they work. But as with any new feature, there's things that need to be ironed out and updated. And lack of a group forum? That honestly confuses the fuck out of me. That sort of communication just seems obvious to any sort of group system dA would make.
👍: 0 ⏩: 0
Also on the journal portal thing...I wish they just implemented favourites. I hate how my subscriber options are only visible when you view my journal tab and not next to each journal like it used to be. ;_;
👍: 0 ⏩: 0
I agree with it all, though I think this journal portal shit has been an awful idea.
It's made good articles harder to find and people keep abusing the journal categories. Articles were intimidating, you know? Like you didn't wanna fuck it up. Journals...pffft no one cares.
Also I am a bit apprehensive about the addition of points. People beg for them like homeless people in the street forgetting it's real money AND THEY HAVE AN INTERNET CONNECTION. Like...e-homeless-beggers. Jesus christ.
I could think of a thousand more things but I think I'll stop there.
👍: 0 ⏩: 1
Well I think points are a good idea. In theory. Just, as with a lot of things, people take a good idea and just turn into annoying idiot beggers with it. But that's a problem with dA's users, not the points system its self. So I can forgive dA there.
But the journal portal? Well, yeah that really bothers me too. I was never a fan of combining everything into deviations. Artwork, journals, and news articles are very different things. And it was good to instantly see the format of each kind of thing and know "this is a deviation, or journal, or news article" without having to go hunting for a fricken category somewhere to know for sure. And, the categories for them (and ALL art) have turned into a confusing mess of options. It's turned into a freaking chore to try and find a category for your art. And journal/news things aren't very clear and obvious.
👍: 0 ⏩: 0
Well said!
I don't necessarily agree with all your 10 choices, but in essence I do agree. And man, do I remember the pre-Easy Reply days
👍: 0 ⏩: 1
Haha, pre-easy reply days were rough, looking back on how it's all changed
👍: 0 ⏩: 1
I know. So many things we take for granted now were quite a struggle to get back then…
👍: 0 ⏩: 0
Agree with you entirely on the 5 good and 5 bad features. 
Regarding nested comments - dA were definitely not the first to come up with the idea. From memory, I know that Slashdot and Livejournal had similar systems in place prior to 2000, and there are prior examples that predate the Web itself, for instance in early email and Usenet newsreader software. 
On the subject of SuperBrowse, I have a feeling that this might be linked to making the site more touch- and mobile-friendly. 
Definitely agree with you about the apparent lack of focus and direction - and that's a crying shame. 
👍: 0 ⏩: 2
dA was my first real social network, and so seeing nested replies just makes sense to me. Other sites that rely on quoting and things is just hard for me to understand
And with superbrowse, I think dA saw that AJAX page loading was a nifty idea, and tried to implement it. But by the time dA was doing that, it had already lost its appeal. Facebook now uses a more advanced form of it, and I think twitter does too (pushState(), if you want the technical term).
👍: 0 ⏩: 0
FYI: SuperBrowse has nothing to do with mobile or touch; it is a dynamic page loading mechanism. It's here to dynamically load new content into the page (like a new deviation) without the need to load the whole new page. In essence: makes the whole browsing faster. The rediculous URLs are an unfortunate downside to this. But I guess, even with JavaScript this could be fixed
👍: 0 ⏩: 1
I'm sort of picky on URL cleanliness
👍: 0 ⏩: 1
👍: 0 ⏩: 1
lmao, I actually made a script that modifies dA links slightly, taking out utm things and anchors like #comments
As for #comments, well I get what it's doing. dA assumes that when you click into a journal, you want to comment. But that also makes it a pain when you want to link to it elsewhere, since the person needs to read the journal first before they can comment 
👍: 0 ⏩: 1
I agree. Anchors have their place. But on dA they only make sense when you flip through pages of comments, then I want to jump right down to the comments section sure enough. Speaking of which, I'd much rather have the comments section AJAX-ified than have SuperBrowse at all.
I had a smooth-scroll userscript once, but I ended up disabling it. Why? Because it usually interfered with pages that actually have this as a feature. Also, I usually open new pages in background tabs, so when I click on a link that has an anchor in it, I won't notice the smooth scrolling anyway.
👍: 0 ⏩: 1
Hehe, yeah I had a sort of universal scrolling anchors script too, but it was buggy or just out of date, and many sites that enable certain menus popping up when clicking on anchored links would mess up because of it.
👍: 0 ⏩: 0
Sorry, what are you saying?
👍: 0 ⏩: 1
I agree with most of these pros and cons, though I don't use or care much about things like forums or muro. lol I think Muro is rather ridiculous and incredibly goofy to try and use. I've never been fond of it, and so far the only purpose it has served in my life is for when I want to occasionally leave obnoxiously silly drawings on comments (which is a feature I do greatly enjoy
Comment moods ARE rather pointless, and I agree, most people don't remember them. I never do, and when I actually get a comment with one, it tends to baffle me.
And chats? Augh. I think at least half the reason I "live" on DA is for the aspect of chats. Most of the time they make updates, they're HORRIBLE, and any time we get loading problems or a massive disconnect (dAmnfart), there never seems to be anything useful resulting from it. I honestly WISH that somebody would come along and pay some serious attention to updating it. In my usual chat of the last 4+ years, its been part of our goal to introduce others to the main scripts that make dAmn so much better: superdAmn, Chromacity, and chat skins (specifically a black version that most of us have used for years.)
Individual colors made crisp and bold on a black skin seem to make the whole world brighter for us, and now that I think about it, really help represent a lot of the artistic spirit in us. Other than the fact that if a chat is very full and active, it makes identifying other deviants many times easier. (currently though, for the last month, chromacity hasn't been working, and it's made everything drab and depressing again. 
👍: 0 ⏩: 1
Heh, well dA not giving back unused chat names seems to be inline with their "don't delete ANYTHING" mindset. Personally, I couldn't care less. A chat is not active? Ok cool. Drop it from the list of chats, at the very least. Letting people use the name again would be helpful there.
But yeah. They've said that they would recycle the chat name, make it available again, so why not actually do that? Or any other updates? All in all, I think the chat folk KNOW their communication platform of choice is a niche and tightly controlled place, but they don't care. Since it works for them. Just sort of wish dA would see the market, that is indeed there, and market it better. Rather than just drop it like they have.
👍: 0 ⏩: 1
👍: 0 ⏩: 0
Mostly agree. I'd toss in the text editor as a good thing (not stash writer)...uploading HTMLs was bullshit.
👍: 0 ⏩: 1
"the text editor"? Care to expand on that? What is this "text editor" you speak of?
👍: 0 ⏩: 1
When you go to submit and you can actually add text instead of uploading an html doc. It's also from way back,but damn is it nice.
👍: 0 ⏩: 1
Oh, like most html docs written in Word and the like?
👍: 0 ⏩: 1
Yeah, that kind of deal. Just...not having to save as html and then upload it is great.
👍: 0 ⏩: 0
On the topic of superbrowse, I have some code in dAUltra which automatically jumps to the real page when you load a superbrowse page.
I think this is all of it:
function ajaxFoiler()
{
simpleHref = this.getAttribute("href").split('?q=')[0];
window.location = simpleHref;
return false;
}
function deAjaxify()
{
if(document.URL.indexOf("?q=") != -1)
{
var cleanURL = document.URL.split("?q=")[0];
document.URL = cleanURL;
}
if(document.URL.indexOf("/art/") == -1)
{
for(var i = 0; i < document.images.length; i++)
{
document.images[i].parentNode.addEventListener('click', ajaxFoiler, false);
}
}
}
deAjaxify();
👍: 0 ⏩: 1
Haha, yeah I made myself a script to bypass the fucking annoying as shit super browse. Although I'm not sure if it's effective for most normal users: [link] Lots of commented out code, and I hijack a vms dA can offer; just not sure it's available to all users.
👍: 0 ⏩: 1
Yeah, if it works that's way cleaner then my way (which grabs the true URL from the title link when it loads)
👍: 0 ⏩: 1
Hehe, yeah
I was previously loading the original link, then returning the js on the AJAX clicks, then just loading the old normal link. Worked, but was more hacky than I liked
👍: 0 ⏩: 0