HOME | DD

pica-ae — CSS Tricks: Journal break-down
Published: 2014-06-17 12:00:28 +0000 UTC; Views: 15657; Favourites: 281; Downloads: 0
Redirect to original
Description body div#devskin7405315 * { background:transparent; border:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin:0; padding:0; } /* ------------------------------ GENERAL ------------------------------ */ body div#devskin7405315 .gr1 { display:none; } body div#devskin7405315 .gr2 { display:none; } body div#devskin7405315 .gr3 { display:none; } body div#devskin7405315 .tri { display:none; } body div#devskin7405315 h2 img { display:none; } body div#devskin7405315 a { color:#98ab0a; text-decoration:none; transition:color 0.5s; -moz-transition:color 0.5s; -webkit-transition:color 0.5s; -ms-transition:color 0.5s; -o-transition:color 0.5s; } body div#devskin7405315 a:hover { color:#b4cc00; text-decoration:underline; } body div#devskin7405315 h1, body div#devskin7405315 h2, body div#devskin7405315 h3, body div#devskin7405315 h4, body div#devskin7405315 h5, body div#devskin7405315 h6 { font-family:Georgia, serif; color:#414d4c; letter-spacing:0px; font-weight:bold; } body div#devskin7405315 .text ::selection { background:#f2d649; } body div#devskin7405315 .text ::-moz-selection { background:#f2d649; } body div#devskin7405315 .gr-box { } body div#devskin7405315 .gr-genericbox { border:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; position:static; background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_background.jpg) #f2f2f2; margin:10px 0px; padding:0px; font-family:Verdana; font-size:13px; line-height:20px; color:#333333; text-shadow:#ffffff 0px 1px 0px; } body div#devskin7405315 .divider { background:#cccccc; display:block; height:1px; } /* ------------------------------ GR-TOP ------------------------------ */ body div#devskin7405315 .gr-top { border:none; position:static; background:#4a5d4e url('https://dl.dropboxusercontent.com/u/22307794/css/CR/gr-top_trans.png') center; color:#FFFFFF; margin:0px!important; padding:0px!important; } body div#devskin7405315 .gr-top .gr { border:none; background:transparent; margin:0px!important; padding:40px 20px!important; margin:auto!important; max-width:680px; } body div#devskin7405315 .gr-top h2, body div#devskin7405315 .gr-top h2 a { background:url('https://dl.dropboxusercontent.com/u/22307794/dA/profile/TriCSS.png') no-repeat top left; color:#98ab0a; text-shadow:#37413e 0px 1px 0px; font-weight:normal; font-size:32px; letter-spacing:0.1px; padding-top:90px; transition:color 0.5s, box-shadow 0.5s; -moz-transition:color 0.5s, box-shadow 0.5s; -webkit-transition:color 0.5s, box-shadow 0.5s; -ms-transition:color 0.5s, box-shadow 0.5s; -o-transition:color 0.5s, box-shadow 0.5s; } body div#devskin7405315 .gr-top h2 a:hover { color:#b4cc00; text-decoration:none; text-shadow:#37413e 0px 2px 1px; } body div#devskin7405315 .gr-top .timestamp { display:none; } body div#devskin7405315 .gr-top span { border:none; background:transparent; margin:0px!important; padding:0px!important; } /* ------------------------------ GR-BODY ------------------------------ */ body div#devskin7405315 .gr-body { position:static; border:none; background:transparent; margin:0px; padding:0px; } body div#devskin7405315 .gr-body .gr { position:static; border:none; background:transparent; margin:0px!important; padding:0px!important; } /* ------------------------------ TEXT ------------------------------ */ body div#devskin7405315 .text { background:transparent; padding:20px; margin:auto; max-width:680px; } body div#devskin7405315 .text p { display:inline; } body div#devskin7405315 .text h1 { display:block; margin:0px!important; padding:0px; font-size:24px; } body div#devskin7405315 .text h2 { font-size:21px; } body div#devskin7405315 .text h3 { font-size:18px; } body div#devskin7405315 .text h4 { font-size:16px; } body div#devskin7405315 .text ol { list-style-type:decimal; margin:10px 20px; padding:0px; } body div#devskin7405315 .text ul { list-style-image:url('https://dl.dropbox.com/u/22307794/css/img_li.gif'); margin:10px 20px; padding:0px; } body div#devskin7405315 .text li { margin:5px 0px; } body div#devskin7405315 .text hr { background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_sidebar_hr.gif) repeat-x left; margin:0px; padding:0px; border:none; } body div#devskin7405315 .text em { } body div#devskin7405315 .text strong { color:#4a5d4e; font-size:150%; } body div#devskin7405315 .text .bu { font-size:11px; max-width:70%; margin:0 auto; } body div#devskin7405315 .shadow-holder { background:white; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; margin:5px; padding:0px; vertical-align:middle; transition:background 0.5s ease; -moz-transition:background 0.5s ease; -webkit-transition:background 0.5s ease; -ms-transition:background 0.5s ease; -o-transition:background 0.5s ease; } body div#devskin7405315 .shadow-holder .mild .thumb img { padding:0px; vertical-align:middle; transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; } body div#devskin7405315 .shadow-holder:hover { background:#f2f2f2; } body div#devskin7405315 .shadow-holder .mild .thumb img:hover { } /* ------------------------------ BOTTOM ------------------------------ */ body div#devskin7405315 .bottom { background:#4a5d4e; margin:0px; padding:20px; } body div#devskin7405315 .bottom a { color:#ffffff; text-decoration:none; text-shadow:#37413e 0px -1px 0px; } body div#devskin7405315 .bottom a:hover { color:#798e7f; text-shadow:#37413e 0px 1px 0px; text-decoration:none; } /* ------------------------------ FOOTER ------------------------------ */ body div#devskin7405315 .footer { background:#e5e5e5; line-height:30px; margin:0px; padding:20px; text-shadow:none; text-align:center; } body div#devskin7405315 .footer h1 { } body div#devskin7405315 .footer a { background:#98ab0a; color:#FFFFFF; font-weight:normal; margin:2px 0; padding:0px 10px; display:inline-block; height:30px; line-height:30px; transition:background 1s ease; -moz-transition:background 1s ease; -webkit-transition:background 1s ease; -ms-transition:background 1s ease; -o-transition:background 1s ease; } body div#devskin7405315 .footer a:hover { background:#FFFFFF; color:#98ab0a; } body div#devskin7405315 .suggestion { background:#ffffff; color:#333333; font-size:14px; padding:20px; } body div#devskin7405315 .suggestion h3 { text-align:center; } /* ------------------------------ DEVIATIONS ------------------------------ */ body div#devskin7405315 a.embedded-deviation { transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; } body div#devskin7405315 a.embedded-deviation:hover { } body div#devskin7405315 a.embedded-deviation .iframe .deviantart .bubbleview .journal-wrapper .journal-wrapper2 , body div#devskin7405315 journal .journalcontrol .negate-box-margin .gr-box .gr-top { display:none; } /* ------------------------------ COLUMNS ------------------------------ */ body div#devskin7405315 .columns { display:inline-block; width:100%; height:100%; } body div#devskin7405315 .columns p, body div#devskin7405315 .columns .half { width:50%; display:block; float:left; padding-right:10px; } body div#devskin7405315 .left-half { height:300px; width:40%; float:left; padding-right:10px; } body div#devskin7405315 .right-half { width:50%; text-align:right; float:right; display:block; } body div#devskin7405315 .specs { background:#e5e5e5; padding:10px; text-shadow:none; } body div#devskin7405315 .right-half .shadow-holder { background:#f2f2f2; border:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; margin:0; padding:0; vertical-align:middle; } body div#devskin7405315 .right-half .shadow-holder .shadow { } body div#devskin7405315 .right-half .shadow-holder .shadow a.thumb.lit { height:240px; width:320px; border-radius:10px 10px 0 0; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; } body div#devskin7405315 .right-half .shadow-holder .shadow a.thumb.lit img { display:none; } body div#devskin7405315 .right-half .shadow-holder a.thumb.lit .wrap q { } body div#devskin7405315 .right-half .shadow-holder a.thumb.lit .wrap q { font-size:13px; line-height:20px; margin:0; padding:20px; position:absolute; right:0; left:0; } body div#devskin7405315 .right-half .shadow-holder a.thumb.lit .wrap q strong { display:block; background:#4a5d4e; color:#98ab0a; text-shadow:#37413e 0px 1px 0px; font-weight:normal; font-size:16px; margin:-20px; margin-bottom:10px; padding:20px; transition:color 0.5s, box-shadow 0.5s; -moz-transition:color 0.5s, box-shadow 0.5s; -webkit-transition:color 0.5s, box-shadow 0.5s; -ms-transition:color 0.5s, box-shadow 0.5s; -o-transition:color 0.5s, box-shadow 0.5s; } body div#devskin7405315 .right-half .shadow-holder:hover { background:#FFFFFF; } body div#devskin7405315 .right-half .shadow-holder:hover a.thumb.lit .wrap q strong { color:#b4cc00; text-shadow:#37413e 0px 2px 1px; } /* ------------------------------ BUTTONS ------------------------------ */ body div#devskin7405315 .button a { background:#98ab0a url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/icon-journal.png') center no-repeat; background-position:10px; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; color:#ffffff; font-weight:normal; font-size:16px; padding:10px 12px 10px 36px; text-shadow:#6b7807 0px -1px 0px; } body div#devskin7405315 .button a:hover { background:#a5b90f url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/icon-journal-hover.png') center left no-repeat; background-position:10px; color:#6b7807; text-shadow:#b6c54d 0px 1px 0px; } /* ------------------------------ BOXES ------------------------------ */ body div#devskin7405315 .tip, body div#devskin7405315 .tip-small { background:#f7e37c; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; color:#404040; font-family:'Inconsolata', monospace; font-size:14px; padding:20px 20px 20px 50px; text-shadow:#fbf1be 0px 1px 0px; } body div#devskin7405315 .tip b { margin-left:-30px; } body div#devskin7405315 .tip strong { color:#404040; font-size:14px; } body div#devskin7405315 .tip i, body div#devskin7405315 .tip em { font-style:normal; } body div#devskin7405315 .tip i { color:#e5004d; } body div#devskin7405315 .tip em { color:#1717e5; } body div#devskin7405315 .tip u { background:#1717e5; color:#FFFFFF; text-decoration:none; padding:0 2px; text-shadow:none; } body div#devskin7405315 .tip-small { box-shadow:1px 1px 1px #b2b2b2; -moz-box-shadow:1px 1px 1px #b2b2b2; -webkit-box-shadow:1px 1px 1px #b2b2b2; display:inline-block; font-size:12px; margin-left:8px; padding:2px 4px; position:relative; top:-2px; float:right; text-align:right; z-index:10; } body div#devskin7405315 .tip-small::before { content:' '; border-top:solid 8px transparent; border-bottom:solid 8px transparent; border-right:solid 8px #f7e37c; position:absolute; left:-8px; top:4px; } body div#devskin7405315 .tip-small i { opacity:0; filter:alpha(opacity=0); _zoom:1; transition:opacity 0.5s ease; -moz-transition:opacity 0.5s ease; -webkit-transition:opacity 0.5s ease; -ms-transition:opacity 0.5s ease; -o-transition:opacity 0.5s ease; display:block; float:left; position:absolute; background:#f7e37c; font-size:0; right:-20px; bottom:0px; left:-900px; top:0px; } body div#devskin7405315 .tip-small:hover i { opacity:0.5; filter:alpha(opacity=50); _zoom:1; } body div#devskin7405315 .attention { background:#4a5d4e; color:#FFFFFF; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; padding:20px; text-shadow:#000000 0px -1px 0px; font-size:14px; } body div#devskin7405315 .attention a:hover { color:#FFFFFF; } /* ------------------------------ PRO AND CONS ------------------------------ */ body div#devskin7405315 .procon { display:inline!important; } body div#devskin7405315 .pro, body div#devskin7405315 .con { display:inline; float:left; width:50%; } body div#devskin7405315 .text .procon .pro ul { list-style-image:url('https://dl.dropbox.com/u/22307794/css/img_li_plus.gif'); margin:10px 20px; padding:0px; } body div#devskin7405315 .text .procon .con ul { list-style-image:url('https://dl.dropbox.com/u/22307794/css/img_li_minus.gif'); margin:10px 20px; padding:0px; } /* ------------------------------ MOBILE ------------------------------ */ @media only screen and (max-width: 767px) { body div#devskin7405315 .footer a { margin:4px 0; display:block; } } /* ------------------------------ CODE EXAMPLES ------------------------------ */ body div#devskin7405315 .text blockquote { margin:0px; padding:24px 20px 15px 20px; color:#333333; font-family:monospace; font-size:12px; border:none; background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_blockquote.gif) #ffffff; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; text-shadow:none; position:relative; overflow:hidden; } body div#devskin7405315 .text blockquote span { color:#1717e5; } body div#devskin7405315 .text blockquote p { margin:0px; padding:0px 20px; } body div#devskin7405315 .text blockquote p span { color:#e5004d; } body div#devskin7405315 .text blockquote i { color:#338033; font-style:normal; } body div#devskin7405315 .images { text-align:center; } body div#devskin7405315 .images img { box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; margin:5px; } /* ------------------------------ CODE EXAMPLE BOXES ------------------------------ */ body div#devskin7405315 .da-box { border:1px solid #a6b3a6; background:#dae4d9; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:20px; font-family:Verdana; text-shadow:none; } body div#devskin7405315 .da-box h1, body div#devskin7405315 .da-box h2, body div#devskin7405315 .da-box h3, body div#devskin7405315 .da-box h4, body div#devskin7405315 .da-box h5, body div#devskin7405315 .da-box h6 { font-family:Verdana; } body div#devskin7405315 .da-box h1 { font-size:24px; } body div#devskin7405315 .da-box h2 { font-size:18px; } body div#devskin7405315 .da-box h3 { font-size:14px; } body div#devskin7405315 .da-box h4 { font-size:12px; } body div#devskin7405315 .da-box h5 { font-size:10px; } body div#devskin7405315 .da-box h6 { font-size:8px; } body div#devskin7405315 .da-box ul, body div#devskin7405315 .da-box ol { list-style-image:none; list-style-position:outside; margin:0 20px; padding:0; } body div#devskin7405315 .da-box p { display:block; margin:10px 0; } body div#devskin7405315 .da-box blockquote { margin:1em 0 1em 1em; padding:0.6em; border-left:5px solid #aaa; background:transparent; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; font-family:Verdana; } body div#devskin7405315 .da-box a { color:#337287; font-weight:normal; text-shadow:none; } body div#devskin7405315 .custom-box { margin:auto; max-width:400px!important; background:#664d80; color:#ffffff; padding:20px; text-shadow:none; } /* -- Background Images -- */ body div#devskin7405315 .tiffany1, body div#devskin7405315 .tiffany2, body div#devskin7405315 .tiffany3 { padding:20px; margin:0 40px; text-shadow:none; } body div#devskin7405315 .tiffany1 { background-image:url('https://dl.dropbox.com/u/22307794/css/tricks/372031.png'); } body div#devskin7405315 .tiffany2 { background-color:#bde6d8; background-image:url('https://dl.dropbox.com/u/22307794/css/tricks/372031.png'); background-position:center; background-repeat:no-repeat; background-attachment:scroll; } body div#devskin7405315 .tiffany3 { background:#bde6d8 url('https://dl.dropbox.com/u/22307794/css/tricks/372031.png') center no-repeat scroll; } body div#devskin7405315 .imagepractice { display:inline-block; margin:20px 0px; } body div#devskin7405315 .imagepractice1, body div#devskin7405315 .imagepractice2, body div#devskin7405315 .imagepractice3, body div#devskin7405315 .imagepractice4, body div#devskin7405315 .imagepractice5, body div#devskin7405315 .imagepractice6 { background:#3d5266; padding:20px; margin:0 40px 0 0; text-shadow:none; color:#ffffff; float:left; max-width:45%; } body div#devskin7405315 .imagepractice1 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/busy_image.png') top; } body div#devskin7405315 .imagepractice2 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/busy_pattern.png') top; } body div#devskin7405315 .imagepractice3 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/hardedge_gradient.png') top no-repeat #3d5266; } body div#devskin7405315 .imagepractice4 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/texture_image.png') top no-repeat #3d5266; } body div#devskin7405315 .imagepractice5 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/subtle_pattern.png'); } body div#devskin7405315 .imagepractice6 { background:url('https://dl.dropbox.com/u/22307794/css/tricks/softedge_gradient.png') top no-repeat #3d5266; } body div#devskin7405315 .welcome { background:#EFE7E1 url('https://dl.dropbox.com/u/22307794/css/tricks/welcome.png') no-repeat; background-position:center 20px; max-width:400px; margin:auto; padding:90px 20px 20px 20px; text-shadow:none; } body div#devskin7405315 .hlimage { background:#EFE7E1; max-width:400px; margin:auto; padding:20px; text-shadow:none; } body div#devskin7405315 .hlimage h1 { color:#332115; background:url('https://dl.dropbox.com/u/22307794/css/tricks/hlimage.png') center left no-repeat; font-family:'Alegreya', Georgia, Serif; padding:0 0 0 30px; } /* -- Fonts -- */ body div#devskin7405315 .websafefonts { background:deepskyblue url('https://dl.dropbox.com/u/22307794/css/tricks/websafefonts.jpg') no-repeat; box-shadow:0px 1px 4px #b2b2b2; -moz-box-shadow:0px 1px 4px #b2b2b2; -webkit-box-shadow:0px 1px 4px #b2b2b2; color:#ffffff; font-size:20px; line-height:30px; padding:20px 20px 20px 50%; text-shadow:none; } body div#devskin7405315 .font-arial { font-family:Arial; } body div#devskin7405315 .font-arial-black { font-family:Arial Black; } body div#devskin7405315 .font-courier-new { font-family:Courier New; } body div#devskin7405315 .font-georgia { font-family:Georgia; } body div#devskin7405315 .font-impact { font-family:Impact; } body div#devskin7405315 .font-lucida-grande { font-family:Lucida Grande; } body div#devskin7405315 .font-tahoma { font-family:Tahoma; } body div#devskin7405315 .font-times-new-roman { font-family:Times New Roman; } body div#devskin7405315 .font-trebuchet-ms { font-family:Trebucht MS; } body div#devskin7405315 .font-verdana { font-family:Verdana; } body div#devskin7405315 .fonthierarchy1 { font-family:'Rufina', Georgia, Serif; font-size:18px; padding:10px 0; } body div#devskin7405315 .fonthierarchy2 { font-family:Georgia, Serif; font-size:18px; padding:10px 0; } body div#devskin7405315 .fonthierarchy3 { font-family:Serif; font-size:18px; padding:10px 0; } body div#devskin7405315 .fonthierarchy4 { font-family:Times New Roman; font-size:18px; padding:10px 0; } body div#devskin7405315 .sans-serif { font-family:sans-serif; font-size:18px; } body div#devskin7405315 .serif { font-family:serif; font-size:18px; } body div#devskin7405315 .fantasy { font-family:fantasy; font-size:18px; } body div#devskin7405315 .cursive { font-family:cursive; font-size:18px; } body div#devskin7405315 .monospace { font-family:monospace; font-size:18px; } body div#devskin7405315 .fonts-text { padding:20px; text-shadow:none; background:#664d80; color:#ffffff; font-family:'Josefin Sans', Sans-serif; font-size:16px; font-weight:400; line-height:25px; } body div#devskin7405315 .fonts-text h1 { color:#ffffff; font-family:'Josefin Sans', Sans-serif; font-size:24px; font-style:italic; font-weight:100; letter-spacing:5px; text-align:right; text-transform:capitalize; } body div#devskin7405315 .fonts-text h2 { color:#ffffff; font-family:'Josefin Sans', Sans-serif; font-size:18px; font-weight:700; letter-spacing:-1px; text-decoration:underline; text-transform:uppercase; } /* -- Lists -- */ body div#devskin7405315 .list1, body div#devskin7405315 .list2, body div#devskin7405315 .list3, body div#devskin7405315 .list4 { background:#EFE7E1; color:#332115; max-width:400px; margin:auto; padding:20px 40px; text-shadow:none; } body div#devskin7405315 .list1 ul { padding:0; margin:0; list-style-type:circle; list-style-image:none; list-style-position:inside; } body div#devskin7405315 .list2 ol { padding:0; margin:0; list-style-type:upper-roman; list-style-image:none; list-style-position:outside; } body div#devskin7405315 .list3 ol { padding:0; margin:0 0 0 20px; list-style-type:lower-latin; list-style-image:none; list-style-position:outside; } body div#devskin7405315 .list4 ul { padding:0; margin:0; list-style-type:none; list-style-image:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/list4_ul_img.png'); list-style-position:inside; } body div#devskin7405315 .listmenu, body div#devskin7405315 .listmenu a { text-shadow:none; margin:0px!important; padding:0px!important; } body div#devskin7405315 .listmenu ul { margin:0px; padding:0px; list-style:none; background:#ffffff; text-align:center; height:30px; } body div#devskin7405315 .listmenu ul li { display:inline-block; position:relative; margin:0px; padding:0px; } body div#devskin7405315 .listmenu li ul { position:absolute; left:0px; top:30px; display:none; margin:0px; padding:0px; } body div#devskin7405315 .listmenu ul li a { display:block; text-decoration:none; color:#fff; background:#17c3e5; height:30px; width:120px; text-align:center; line-height:30px; margin:0px; padding:0px; } body div#devskin7405315 .listmenu ul li a:hover { background:#369eb3; color:#fff; } body div#devskin7405315 .listmenu li:hover ul { display:block; } /* -- Before & After -- */ body div#devskin7405315 .da-box .i-ba { display:inline-block; } body div#devskin7405315 .da-box .i-ba:before, body div#devskin7405315 .da-box .i-ba:after { font-family:sans-serif; } body div#devskin7405315 .da-box .i-ba:before { content:' '; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/guillemets-before.png') no-repeat; display:inline-block; height:6px; width:8px; } body div#devskin7405315 .da-box .i-ba:after { content:' '; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/guillemets-after.png') no-repeat; display:inline-block; height:6px; width:8px; } body div#devskin7405315 .da-box .ba-list, body div#devskin7405315 .da-box .ba-image { margin:0; padding:0; } body div#devskin7405315 .da-box .ba-image h1 { color:#2864ff; font-size:18px; font-weight:bold; } body div#devskin7405315 .da-box .ba-image h1::before { content:' '; display:inline-block; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/ba_image_cat_before.png') no-repeat; height:20px; width:12px; margin:0 4px -3px 0; padding:0; } body div#devskin7405315 .da-box .ba-image h1::after { content:' '; display:inline-block; background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/ba_image_cat_after.png') no-repeat; height:20px; width:12px; margin:0 0 -3px 4px; padding:0; } body div#devskin7405315 .da-box .ba-list ul { list-style-type:none; margin-left:14px; } body div#devskin7405315 .da-box .ba-list ul li::before { content:' '; display:block; float:left; background:#2864ff; height:8px; width:8px; margin:6px 6px 0 -14px; } body div#devskin7405315 .da-box .ba-arrow .button a { background:#2864FF; color:#FFFFFF; display:inline-block; height:40px; line-height:40px; padding:0 10px 0 10px; position:relative; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin7405315 .da-box .ba-arrow .button a::after { content:' '; background:transparent; border-top:solid transparent 20px; border-right:none; border-bottom:solid transparent 20px; border-left:solid #2864FF 20px; position:absolute; right:-20px; } body div#devskin7405315 .da-box .ba-arrow .button a:hover { background:#183d99; text-shadow:none; } body div#devskin7405315 .da-box .ba-arrow .button a:hover::after { border-left:solid #183d99 20px; } /* -- Shapes -- */ body div#devskin7405315 .no-box { background:transparent; text-shadow:none; } body div#devskin7405315 .no-box .shapes { position:relative; } body div#devskin7405315 .no-box .shapes .square, body div#devskin7405315 .no-box .shapes .rectangle, body div#devskin7405315 .no-box .shapes .rounded, body div#devskin7405315 .no-box .shapes .circle, body div#devskin7405315 .no-box .shapes .oval, body div#devskin7405315 .no-box .shapes .triangle, body div#devskin7405315 .no-box .shapes .candy, body div#devskin7405315 .no-box .shapes .diamond, body div#devskin7405315 .no-box .shapes .star8, body div#devskin7405315 .no-box .shapes .star12, body div#devskin7405315 .no-box .shapes .asterisk, body div#devskin7405315 .no-box .shapes .star6, body div#devskin7405315 .no-box .shapes .crescent-moon, body div#devskin7405315 .no-box .shapes .heart, body div#devskin7405315 .no-box .shapes .hexagon { background:MediumVioletRed; margin:0 auto; } body div#devskin7405315 .no-box .shapes .square { height:100px; width:100px; } body div#devskin7405315 .no-box .shapes .rectangle { height:100px; width:300px; } body div#devskin7405315 .no-box .shapes .rounded { border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; height:100px; width:300px; } body div#devskin7405315 .no-box .shapes .circle { border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; height:100px; width:100px; } body div#devskin7405315 .no-box .shapes .oval { border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; height:100px; width:300px; } body div#devskin7405315 .no-box .shapes .trapezoid { background:none; border-top:none; border-right:100px solid transparent; border-bottom:100px solid MediumVioletRed; border-left:50px solid transparent; width:100px; position:relative; left:200px; } body div#devskin7405315 .no-box .shapes .triangle { background:none; border-top:none; border-right:100px solid transparent; border-bottom:100px solid MediumVioletRed; border-left:100px solid transparent; display:inline-block; position:relative; left:200px; } body div#devskin7405315 .no-box .shapes .candy { height:50px; width:50px; position:relative; } body div#devskin7405315 .no-box .shapes .candy::before { content:' '; border-top:25px solid transparent; border-right:25px solid MediumVioletRed; border-bottom:25px solid transparent; border-left:25px solid MediumVioletRed; position:absolute; left:-50px; } body div#devskin7405315 .no-box .shapes .candy::after { content:' '; border-top:25px solid transparent; border-right:25px solid MediumVioletRed; border-bottom:25px solid transparent; border-left:25px solid MediumVioletRed; position:absolute; right:-50px; } body div#devskin7405315 .no-box .shapes .diamond { height:100px; width:100px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); } body div#devskin7405315 .no-box .shapes .star8 { height:100px; width:100px; } body div#devskin7405315 .no-box .shapes .star8::before { content:' '; display:block; background:MediumVioletRed; height:100px; width:100px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); } body div#devskin7405315 .no-box .shapes .star12 { height:100px; width:100px; position:relative; } body div#devskin7405315 .no-box .shapes .star12::before { content:' '; display:block; background:MediumVioletRed; height:100px; width:100px; transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); } body div#devskin7405315 .no-box .shapes .star12::after { content:' '; display:block; position:absolute; top:0; background:MediumVioletRed; height:100px; width:100px; transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); } body div#devskin7405315 .no-box .shapes .slices { background:transparent; display:block; position:relative; left:240px; height:220px; overflow:hidden; } body div#devskin7405315 .no-box .shapes .slices .slice1, body div#devskin7405315 .no-box .shapes .slices .slice2, body div#devskin7405315 .no-box .shapes .slices .slice3, body div#devskin7405315 .no-box .shapes .slices .slice4 { height:100px; width:100px; display:inline-block; position:absolute; } body div#devskin7405315 .no-box .shapes .slices .slice1 { background:MediumVioletRed; border-radius:100px 0 0 0; -moz-border-radius:100px 0 0 0; -webkit-border-radius:100px 0 0 0; top:0; left:0; } body div#devskin7405315 .no-box .shapes .slices .slice2 { background:#7717e5; border-radius:0 100px 0 0; -moz-border-radius:0 100px 0 0; -webkit-border-radius:0 100px 0 0; top:0px; left:100px; } body div#devskin7405315 .no-box .shapes .slices .slice3 { background:#17aee5; border-radius:0 0 100px 0; -moz-border-radius:0 0 100px 0; -webkit-border-radius:0 0 100px 0; top:110px; left:110px; } body div#devskin7405315 .no-box .shapes .slices .slice4 { background:#17e525; border-radius:0 0 0 100px; -moz-border-radius:0 0 0 100px; -webkit-border-radius:0 0 0 100px; top:100px; left:0; } body div#devskin7405315 .no-box .shapes .asterisk { height:100px; width:20px; position:relative; } body div#devskin7405315 .no-box .shapes .asterisk::before { content:' '; display:block; background:MediumVioletRed; height:100px; width:20px; transform:rotate(60deg); -moz-transform:rotate(60deg); -webkit-transform:rotate(60deg); -ms-transform:rotate(60deg); -o-transform:rotate(60deg); } body div#devskin7405315 .no-box .shapes .asterisk::after { content:' '; display:block; position:absolute; top:0; background:MediumVioletRed; height:100px; width:20px; transform:rotate(-60deg); -moz-transform:rotate(-60deg); -webkit-transform:rotate(-60deg); -ms-transform:rotate(-60deg); -o-transform:rotate(-60deg); } body div#devskin7405315 .no-box .shapes .star6 { background:transparent; border-top:none; border-right:40px solid transparent; border-bottom:65px solid MediumVioletRed; border-left:40px solid transparent; display:inline-block; position:relative; left:260px; } body div#devskin7405315 .no-box .shapes .star6::before { content:' '; background:transparent; border-bottom:none; border-right:40px solid transparent; border-top:65px solid MediumVioletRed; border-left:40px solid transparent; display:block; position:absolute; top:20px; left:-40px; } body div#devskin7405315 .no-box .shapes .crescent-moon { border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; height:100px; width:100px; position:relative; transform:rotate(-30deg); -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); } body div#devskin7405315 .no-box .shapes .crescent-moon::after { content:' '; background:url(https://i451.photobucket.com/albums/qq231/pica-ae/img_background.jpg) #f2f2f2; border-radius:50px; -moz-border-radius:50px; -webkit-border-radius:50px; display:inline-block; height:100px; width:100px; position:absolute; right:-20px; } body div#devskin7405315 .no-box .shapes .heart { background:MediumVioletRed; position:relative; height:80px; width:80px; transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; } body div#devskin7405315 .no-box .shapes .heart::before, body div#devskin7405315 .heart::after { background:MediumVioletRed; width:80px; height:80px; border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px; position:absolute; } body div#devskin7405315 .no-box .shapes .heart::before { content:' '; left:-40px; } body div#devskin7405315 .no-box .shapes .heart::after { content:' '; top:-40px; } body div#devskin7405315 .no-box .shapes .hexagon { height:100px; width:60px; position:relative; } body div#devskin7405315 .no-box .shapes .hexagon::before { content:' '; border-top:50px solid transparent; border-right:30px solid MediumVioletRed; border-bottom:50px solid transparent; position:absolute; left:-30px; } body div#devskin7405315 .no-box .shapes .hexagon::after { content:' '; border-top:50px solid transparent; border-bottom:50px solid transparent; border-left:30px solid MediumVioletRed; position:absolute; right:-30px; } body div#devskin7405315 .attention .border-frame { background:white; height:100px; width:200px; margin:0 auto; border-top:10px solid blue; border-right:10px solid red; border-bottom:10px solid yellow; border-left:10px solid green; } /* -- Journal break-down Part II - thumbs -- */ body div#devskin7405315 .thumb-structure, body div#devskin7405315 .thumb-default, body div#devskin7405315 .thumb-styled { text-align:center; } body div#devskin7405315 .thumb-structure .shadow-holder, body div#devskin7405315 .thumb-structure .shadow-holder .shadow, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img, body div#devskin7405315 .thumb-structure a.embedded-deviation, body div#devskin7405315 .thumb-structure a.embedded-deviation img, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img.lit, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong { background:transparent; border:1px solid #a6b3a6; font-family:'Inconsolata', monospace; font-size:11px; margin:20px!important; padding:0; position:relative; } body div#devskin7405315 .thumb-structure .shadow-holder { box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow { } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb { display:block; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img { } body div#devskin7405315 .thumb-structure a.embedded-deviation { } body div#devskin7405315 .thumb-structure a.embedded-deviation img { width:93%; float:left; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb.lit { width:350px; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img.lit { } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap { } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q { display:block; font-family:Verdana; padding:0 0 0 20px; width:280px; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong { display:block; font-family:Verdana; font-weight:normal; margin:20px 10px 10px 0!important; padding:10px; } body div#devskin7405315 .thumb-structure .shadow-holder::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img::before, body div#devskin7405315 .thumb-structure a.embedded-deviation::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong::before, body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb.lit::before { background:#1717e5; color:#FFFFFF; height:16px; line-height:16px; padding:0 2px; position:absolute; top:2px; left:2px; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::after, body div#devskin7405315 .thumb-structure a.embedded-deviation::after { background:#1717e5; color:#FFFFFF; height:16px; line-height:16px; padding:0 2px; position:absolute; top:22px; left:22px; } body div#devskin7405315 .thumb-structure .shadow-holder::before { content:'.shadow-holder'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow::before { content:'.shadow'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::before { content:'a.thumb'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb::after { content:'img'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb img::before { content:'img'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb.lit::before { content:'a.thumb.lit'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb wrap::before { content:'wrap'; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q::before { content:'q'; font-family:'Inconsolata', monospace; } body div#devskin7405315 .thumb-structure .shadow-holder .shadow a.thumb .wrap q strong::before { content:'strong'; font-family:'Inconsolata', monospace; } body div#devskin7405315 .thumb-structure a.embedded-deviation::before { content:'a.embedded-deviation'; } body div#devskin7405315 .thumb-structure a.embedded-deviation::after { content:'img'; } body div#devskin7405315 .thumb-default .shadow-holder { background:transparent; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; display:inline-block; margin:0; padding:0; vertical-align:baseline; } body div#devskin7405315 .thumb-default .shadow-holder .shadow { background:transparent; background-position:center center; background-repeat:no-repeat; display:block; padding:3px 4px 5px; text-align:center; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb img { position:static !important; max-width:100%; vertical-align:baseline; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit { background:url('https://dl.dropboxusercontent.com/u/22307794/css/tricks/thumb-lit-bg.png') repeat-x; border:1px solid #FFFFFF; box-shadow:#c1c1c1 0px 1px 2px; -moz-box-shadow:#c1c1c1 0px 1px 2px; -webkit-box-shadow:#c1c1c1 0px 1px 2px; color:#222222 !important; display:inline-block; height:125px; margin:auto; overflow:hidden; position:relative !important; text-align:left; text-decoration:none !important; width:150px; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit img.lit { left:0 !important; position:absolute !important; top:0 !important; max-width:100%; vertical-align:baseline; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.lit img.journal { margin:4px 0 0 4px; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit wrap { display:block; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit .wrap q { cursor:pointer; font-family:Verdana; font-size:12px; left:26px; line-height:1.2em; min-height:0; padding-top:3px; position:absolute; right:4px; top:0; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit .wrap q strong:first-child { display:block; padding-bottom:6px; } body div#devskin7405315 .thumb-default .shadow-holder .shadow a.thumb.lit img:hover { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin7405315 .thumb-styled .shadow-holder, body div#devskin7405315 .thumb-styled a.embedded-deviation { background:deepskyblue; border:1px solid powderblue; box-shadow:0px 1px 4px #526166; -moz-box-shadow:0px 1px 4px #526166; -webkit-box-shadow:0px 1px 4px #526166; margin:10px; padding:5px; vertical-align:middle; transition:all 0s; -moz-transition:all 0s; -webkit-transition:all 0s; -ms-transition:all 0s; -o-transition:all 0s; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow { } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb { } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb img, body div#devskin7405315 .thumb-styled a.embedded-deviation img { vertical-align:middle; } body div#devskin7405315 .thumb-styled .shadow-holder:hover, body div#devskin7405315 .thumb-styled a.embedded-deviation:hover { background:steelblue; border:1px solid steelblue; box-shadow:0px 1px 8px #526166; -moz-box-shadow:0px 1px 8px #526166; -webkit-box-shadow:0px 1px 8px #526166; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit { height:150px; width:200px; margin:-5px; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit img { display:none; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit .wrap { } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit .wrap q { color:#FFFFFF; font-family:Lato; font-size:13px; line-height:15px; margin:0; padding:5px; position:absolute; right:0; left:0; } body div#devskin7405315 .thumb-styled .shadow-holder .shadow a.thumb.lit .wrap q strong:first-child { display:block; background:powderblue; color:white; font-size:16px; line-height:20px; margin:-5px; padding:5px; margin-bottom:10px; } body div#devskin7405315 .thumb-styled .shadow-holder:hover .shadow a.thumb.lit .wrap q strong:first-child { background:steelblue; } /* -- Issues with sta.sh writer and preview -- */ body div#devskin7405315 .title-issue, body div#devskin7405315 .title-solved { background:white; margin:0 40px; padding-bottom:1px; } body div#devskin7405315 .title-issue .text, body div#devskin7405315 .title-solved .text { margin:40px; padding:0px; } body div#devskin7405315 .title-issue .title { margin:0; padding:0; position:relative; } body div#devskin7405315 .title-issue .title::before { display:block; content:'80px'; color:blue; border-bottom:1px solid; width:80px; text-shadow:none; position:absolute; top:40px; text-align:center; opacity:0.1; filter:alpha(opacity=10); _zoom:1; } body div#devskin7405315 .title-issue .title:hover::before { opacity:1; filter:alpha(opacity=100); _zoom:1; } body div#devskin7405315 .title-issue .title h2, body div#devskin7405315 .title-issue .title h2 a { background:url('https://fc07.deviantart.net/fs70/f/2015/044/4/c/swirl_pattern_edit_by_pica_ae-d8ht7p7.png'); color:teal; font-family:'Abril Fatface', cursive; font-size:24px; margin:0; padding:40px!important; text-shadow:dimgrey 0px 1px 0px; text-transform:uppercase; } body div#devskin7405315 .title-issue .title h2 a:hover { color:royalblue; } body div#devskin7405315 .title-solved .title h2 { background:url('https://fc07.deviantart.net/fs70/f/2015/044/4/c/swirl_pattern_edit_by_pica_ae-d8ht7p7.png'); padding:40px!important; } body div#devskin7405315 .title-solved .title h2, body div#devskin7405315 .title-solved .title h2 a { color:teal; font-family:'Abril Fatface', cursive; font-size:24px; text-shadow:dimgrey 0px 1px 0px; text-transform:uppercase; } body div#devskin7405315 .title-solved .title h2 a:hover { color:royalblue; } body div#devskin7405315 .title-solved .title { position:relative; } body div#devskin7405315 .title-solved .title::before { display:block; content:'40px'; color:blue; border-bottom:1px solid; width:40px; text-shadow:none; position:absolute; top:40px; text-align:center; opacity:0.1; filter:alpha(opacity=10); _zoom:1; } body div#devskin7405315 .title-solved .title:hover::before { opacity:1; filter:alpha(opacity=100); _zoom:1; } /* -- what is CSS and HTML anyway? -- */ body div#devskin7405315 .basics1, body div#devskin7405315 .basics2 { background:ivory; font-family:Roboto, Sans-serif; font-size:13px; margin:0; padding:20px; line-height:15px!important; text-shadow:none; } body div#devskin7405315 .basics1 h1, body div#devskin7405315 .basics1 h3, body div#devskin7405315 .basics2 h1, body div#devskin7405315 .basics2 h3 { color:crimson; font-family:Roboto, Sans-serif; } body div#devskin7405315 .basics h1 { font-size:24px; } body div#devskin7405315 .basics1 p, body div#devskin7405315 .basics2 p { color:dimgrey; } body div#devskin7405315 .basics1 h3, body div#devskin7405315 .basics2 h3 { color:limegreen; font-size:18px; margin-top:15px; } body div#devskin7405315 .basics2 .box { background:grey; margin-top:20px; padding:20px; } body div#devskin7405315 .basics2 .box h3 { color:deepskyblue; margin-top:0px; } body div#devskin7405315 .basics2 .box p { color:white; }

This has been done before by many others I don't want to step on anyone's toes, I just wanted to give this a go myself

If you still write CSS NOT using gruze … stop that! Start using gruze. Just do it!
There are a few "hacks" that you will need to make it work totally under your control, but there's always help with those

Well, here comes help with those hacks (I gotta give GinkgoWerkstatt credit for some of it, go hug her! That's an order )

At the end of this CSS Trick I will provide you with a template, that I use myself, as a base for creating new skins. It will only contain the basic classes of the journal deviation, from which it is made up of, the basic HTML, without any content.

Beforehand explanation
Now, I know you will say: but that is not the default skin! That is not how journals without CSS look like! And you are right. But. There is always a but. But the default journal skin for coders is not the same as an unskinned journal entry.

While when journals were changed to behave like deviations, they also got a new look. While it uses some of the same classes as the previous skin,  there are some changes, especially the time stamp, that have happened. But this was not implemented for journal skins, they still rely on the previous journal styling.



You achieve this look by simply entering one line of code into the CSS field; this could be for example a comment: /* default skin */ like this.

There are two reasons to do this: a) because you feel a little nostalgic and want things to look like "in ye goode ol' days" or b) because you want to create a new journal skin and need to figure out what classes are provided by dA for you to style new.

I am obviously more the b) type person and I want to show you how to figure out the default dA journal HTML and provide a template for you to create new skins.

Now that we cleared this up, let's get started with breaking down the journal

The structure of a journal deviation
By structure I mean HTML layout: it defines the elements a journal is made up from. You can style most of the HTML elements a journal consists of and thus create your own skin.

You can divide a journal into 3 parts:

  • The overall journal box
  • The top, including the title and timestamp
  • The body, including the part for your content and the link to the comments

Alltogether there are 17 classes.

I strongly recommend to create your own basic template for journal skins with all the classes of a journal deviation. You can either save it as a .txt file locally to your computer or actually save it as a skin in sta.sh (writer). Copy the template everytime you create a new skin.


It would be crazy to try and remember all the classes and making your own template is not "against the rules". Let me tell you something: everyone who writes CSS is "cheating" with cheat sheets like this all the time

In detail
Let's get down to business now. This is how the default jorunal skin looks like. (also known as "Deviant Green".)
Well, okay, this is how it looks with colorful overlays that I added to show where all the elements are



Visual guide to the different HTML elements of a default journal.



This should help you identify all the elements a journal is made up from. I took into account margins and paddings and sizes provided in the source code of this.

.negate-box-margin {}

.gr-box {}

ioverall journal, top and body



  .gr1 {}

journal cornersi



  .gr2{}

journal cornersi



  .gr3 {}

journal cornersi



  .gr-top {}

contains the title and timestamp of the journali



     .gr-top .tri {}

downward pointing trianglei



     .gr-top .gr {}

makes room for the journal iconi



        .gr-top .gr h2 {}

journal titlei



           .gr-top .gr h2 img {}

journal iconi



           .gr-top .gr h2 a {}

journal title linki



        .gr-top .gr span {}

timestampi



  .gr-body {}

contains content and commentslinki



     .gr-body .gr {}

        .gr-body .gr .grf-indent {}

           .gr-body .gr .grf-indent .text {}

contenti



           .gr-body .gr .grf-indent .bottom {}

contains commentslinki



              .gr-body .gr .grf-indent .bottom a {}

commentslinki


The indentation is only there to indicate the stacking of the elements. Same indentation means same stacking level.



The three classes .negate-box-margin, .gr-body .gr, and .gr-body .gr .grf-indent have no styling, their only function is to contain other elements.

How to optimize the basic layout
When you are creating a journal from scratch, it makes sense to get rid of all elements that your design does not use. Usually this is about classes that create the look of the unskinned journal.

Get rid of the elements you don't want to use!
We start by kicking out the rounded corners around the journal, the icon next to the title and the little triangle, which points down towards the content. Kicking out in this case means hiding them. We cannot actually kick them out, as we have no control over the HTML provided by dA.

.gr1, .gr2, .gr3, .gr-top .tri, .gr-top .gr h2 img {

display: none;


}
That's five down

Do NOT do this with .negate-box-margin, .gr-body .gr, and .gr-body .gr .grf-indent! If you do that, the whole journal or parts of it, will not be visible. If you don't want them in the code, just delete them from the code. Simple as that.



Adjusting for the not displayed journal icon
The journal icon is not part of the CSS, but part of the journal HTML structure. Therefore by setting it to display: none; it will leave an odd empty space, which is created inside the surrounding elements. In order to have everything flush left nicely, we have to get rid of some padding.

.gr-top .gr {

padding-left: 0!important;


}

Reset all styling!
Now comes a little trick to get rid of all styling all at once: *. We will use the universal selector aka the asterisk to clear the CSS.
The main concern here is about backgrounds, borders, margin and padding. We just want to remove them all at once and save us the hassle of figuring out which class has which border and background color and margin and padding only to get rid of it.

* {

background: transparent;


border: none;


margin: 0;


padding: 0;


}

Optimise the title styling.
The title of a journal is a h2 headline that contains a link. Not styling the link will make the headline the default dA link color, no matter what color you tell the h2 to have. Not styling the headline may cause issues while writing a new journal entry, as the title is a text field and not a link at that point.

However we do need to enter all styling that refers to the position, size or background of the title into it's own line, so values are not added up and possibly double resulting in headaches for why something doesn't work.

Anything regarding the title text should be defined in the combined selectors.

.gr-top .gr h2{}

.gr-top .gr h2, .gr-top .gr h2 a {}



Optimise the body styling.
One thing that changed with the introduction of gruze was the behaviour of the top and body of the journal. The body is always located under the top in gruze, which means, it can cover parts of the body. For example a box-shadow applied to the body won't be visible on the top of the box, because the top is always over it (even if the top has a transparent background.)

.gr-body .gr {

overflow: visible!important;


position: static!important;


}

Limit the text width for better readability!
What you also want to do, is limit the text width. I have explained why that is necessary before and it makes a lot of sense to put this into the template you are going to base your new skins on.

.gr-body .gr .grf-indent .text {

max-width: 500px;


}

Alternatively you can also change the maximum width of the whole journal. To keep the journal horizontally centered, you have to write one more line of code, to keep everything in place.

.gr-box {

max-width: 500px;


margin: 0 auto;


}

No matter how wide you want your journal to be, it is necessary to set at least a max-width for the .text to make it easy for people to read the journal!



Remember the :hover effects!
The title and comment count are both links, and you should always remember to style their hover effects, so users know they can click them. So, stick those lines into your template and it will remind you to style :hover effects.

.gr-top .gr h2, .gr-top .gr h2 a {}
.gr-top .gr h2 a:hover {}

.gr-body .gr .grf-indent .bottom a {}
.gr-body .gr .grf-indent .bottom a:hover {}

Grab the Template
Simply copy paste the following CSS code and use it as a template for future Journal Skins.

* {

background: transparent;


border: none;


margin: 0;


padding: 0;


}

.gr1, .gr2, .gr3, .gr-top .tri, .gr-top .gr h2 img {

display: none;


}

.negate-box-margin {}

.gr-box {}

.gr-top {}

.gr-top .gr {

padding-left: 0!important;


}

.gr-top .gr h2{}

.gr-top .gr h2, .gr-top .gr h2 a {}
.gr-top .gr h2 a:hover {}

.gr-top .gr span {}

.gr-body {}

.gr-body .gr {

overflow: visible!important;


position: static!important;


}

.gr-body .gr .grf-indent {}

.gr-body .gr .grf-indent .text {

max-width: 500px;


}

.gr-body .gr .grf-indent .bottom {}

.gr-body .gr .grf-indent .bottom a {}
.gr-body .gr .grf-indent .bottom a:hover {}

Okay, so this is our blank dA Skin CSS template. Copy paste it as you like and enter your own styling into this to create new custom skins.


This is how the journal will look like, when you apply the template CSS as Journal Skin. (The background is the color of the page, the skin background itself is transparent.)



And that's it. Became a bit longer than I figured it would, but I thought when I am already at it, I may cover it as good as I can and in as much detail as I can

Do not hesitate to ask me questions if you don't understand anything or want clarification!

I don't generally bite

Coming up?
Since this is really just the bare minimum of how the journal HTML is built up, there are a few more things you want to style: links, headlines, blockquotes, paragraphs, lists, thumbs and so on.
Most of these elements are regular HTML elements, except for deviation thumbs. They are a custom class created by dA and work more complicated that just simple image links.

Have a suggestion?
Let me know in a comment or a note. I'd love to hear what you want to know and learn. With your input and suggestions this series can continue and grow.


Previous CSS Tricks
Limiting .text width Responsive dA? Background Images Article Layout Fonts and Text Basics Lists ::before and ::after Journal Breakdown Deviations in Journals

Related content

pica-ae - Happy Holidays!

[ TEXT ]


pica-ae - CSS Tricks: Journal title styling issue

pica-ae - My dA Transit Map [DD]

pica-ae - Hot Chocolate Journal Skin

pica-ae - Advanced Moleskine Skin

pica-ae - Simple Moleskine Skin

pica-ae - Don't Panic Skin

pica-ae - Box Icons

pica-ae - Creepy Neighbourhood [DD]

pica-ae - Paperbag Icons

pica-ae - Moleskine Icons
Comments: 78

Echo-Peak [2018-08-23 21:11:27 +0000 UTC]

Hi is there any way to remove the timestamp? It doesn't seem to display the right time for me so if you can't delete it completely if there is some way to change the timezone or something that would be awesome because it really bugs me.

Thanks for your time~

👍: 0 ⏩: 1

ryeokii In reply to Echo-Peak [2019-05-03 23:25:23 +0000 UTC]

They've replied in a previous comment
Yes, that is possible. Anywhere in the CSS you have to add this line:
.gr-top .gr span {display: none;}The span element contains the time stamp. If you write it like this, it just won't show up. 

👍: 0 ⏩: 0

Jahpan [2018-05-13 08:21:35 +0000 UTC]

How do you make those buttons under your "Previous CSS Tricks" title, along with the hover code?

👍: 0 ⏩: 0

craaziifox [2017-11-07 10:57:02 +0000 UTC]

just a quick question
how do i get the negate box underneath the like title and timestamp etc.?

👍: 0 ⏩: 0

Nathaniel98643 [2017-10-08 00:16:09 +0000 UTC]

How do i have the body have multiple sections with different colors like i see some people they section different topics off with different colors. like for example this user:

[CLOSED] FAKEMON/MONSTER ART COMMISSIONSLast updated: September 16, 2017
Hello everyone, I've decided to open up commissions and I'll only be accepting 5 slots at the moment. I may accept more after finishing up some so I'll keep you updated. So if you are interested in commissioning me, then continue reading on. Read carefully and if you have any questions, please ask. Thank you! ☺
Fakemon/Monster Art and Design Commission Info
Below are info and pricing regarding Fakemon/monster artwork and design commissions. Have your monster design drawn in my style. I accept both original (fan-made) and canon designs. Custom design options available!
Pricing
Listed below are the prices of commissions by tier. Please carefully read everything.
Tier 1     $8 USD
+4 per additional design
You will receive:
• Clean and refined sketch
• High-resolution transparent .PNG file
Tier 3     $20 USD

👍: 0 ⏩: 0

HANIICU [2017-09-30 08:54:35 +0000 UTC]

I've been able to edit some code thanks to this tutorial but I'm wondering if you could help me out with something? I don't know if this may seem weird or not but is there any way at all to remove the .journal-footer (where a.comments, span.date, a.more, a.faves) is displayed? 

I've tried several things but nothing seems to work. I don't even know if it's possible at all. I'd really appreciate your help! 

👍: 0 ⏩: 0

duncundog [2017-08-23 17:51:46 +0000 UTC]

OH MY GEESENESS, I LOVE YOU.

I have been trying to figure this stuff out, but every tutorial I find is obviously aimed at people who have some previous experience with coding, because I can't understand any of it. (I'm an excellent BB coder, but that is way easier than this stuff.)

This was so helpful to me, thank you so much. <33

👍: 0 ⏩: 0

LilMobear [2017-05-29 03:50:40 +0000 UTC]

Is there a special coding for making your whole journal width smaller?

👍: 0 ⏩: 0

BIacat [2017-01-04 01:53:48 +0000 UTC]

Hello !!! First of, I would like to thank you for this wonderful journal !
Now, I've got a little problem, and maybe you could help me ? ;o;

My problem is that blockquotes, aswell as (<-hr>) lines are not appearing in my journal...
PS, here's the CSS of my journal ! Journal CSS

👍: 0 ⏩: 0

JordiMoonfall [2016-09-07 19:04:44 +0000 UTC]

I've been looking at so many different tutorials, and everything so far has just confused me. But THIS, this I can actually understand! I'm actually going to try and start making journal skins now. Thank you so much for sharing!

👍: 0 ⏩: 0

MudPuddIe [2016-08-12 21:13:42 +0000 UTC]

Is there any way of removing the timestamp? I really need to know, thanks for this btw!

👍: 0 ⏩: 1

pica-ae In reply to MudPuddIe [2016-08-13 10:24:01 +0000 UTC]

Yes, that is possible. Anywhere in the CSS you have to add this line:
.gr-top .gr span {display: none;}The span element contains the time stamp. If you write it like this, it just won't show up. 

👍: 0 ⏩: 1

MudPuddIe In reply to pica-ae [2016-08-13 15:01:21 +0000 UTC]

This did not seem to work. Would it be okay if I messaged you my coding? Maybe you can see what's wrong with it.

👍: 0 ⏩: 1

pica-ae In reply to MudPuddIe [2016-08-13 16:14:28 +0000 UTC]

Sure, no problem.
If you have a journal with the skin in sta.sh I can look at it there, too.

👍: 0 ⏩: 1

MudPuddIe In reply to pica-ae [2016-08-13 16:17:31 +0000 UTC]

I do! Here you go!


Welcome To My DA!

👍: 0 ⏩: 1

pica-ae In reply to MudPuddIe [2016-08-13 17:38:42 +0000 UTC]

Ah, the skin is still using the old element names, that's why my line didn't work. 

This way may work, now:
.journaltop span {display: none;}

It may not work, in which case a different approach might be better, but more complicated:

.journaltop {color: transparent;}
.journaltop h2 {color: #88bfff ;}

That way sets the text color of the header transparent, but you do need to separately set a color for the h2 or it won't be visible, too.
The h2 seem to already have a color value, so just setting the text color transparent should definitely do the trick.

👍: 0 ⏩: 1

MudPuddIe In reply to pica-ae [2016-08-13 18:27:08 +0000 UTC]

Where in the code do I place these?

👍: 0 ⏩: 1

pica-ae In reply to MudPuddIe [2016-08-13 19:32:53 +0000 UTC]

That depends on the skin. You can go look for .journaltop in the CSS that you have and paste it right after that, or you can just add those two lines at the very end of the CSS. 

👍: 0 ⏩: 1

MudPuddIe In reply to pica-ae [2016-08-13 20:11:23 +0000 UTC]

There's a couple things that say that.

👍: 0 ⏩: 1

pica-ae In reply to MudPuddIe [2016-08-13 20:54:43 +0000 UTC]

Then it is easiest to just copy/paste it at the end of the CSS.

👍: 0 ⏩: 1

MudPuddIe In reply to pica-ae [2016-08-13 21:01:16 +0000 UTC]

Oh my gosh it worked!!!!!! Thank you so muchhhhhHhhhhhhhhhhhhhhh!

👍: 0 ⏩: 0

paintausea [2016-04-17 11:44:42 +0000 UTC]

Hello..!
Is there a way to disable the comment section and visibility of the journal skin?

Nevermind! I found a way to cheat around it
Thank you anyways though! '◡'

👍: 0 ⏩: 0

AterLux [2016-02-10 21:41:05 +0000 UTC]

pastebin.com/Jix7sGwM I would like to ask how with my code I would make an image overlay the body  over the text cause it always ends up being behind the text

👍: 0 ⏩: 0

ttobserve [2016-02-04 13:55:50 +0000 UTC]

THANK you for sharing your expertise! I’ve faved this one, and  CSS Tricks: Before and After!No, this is not about a tv show in which I take a CSS and make it prettier
It is about the pseudo-elements ::before and ::after.
They are similiar for example to the :hover element, meaning that it is not necessary (or possible) to add them to the HTML, but can be controlled purely by writing CSS. They are always there, but whether they are visible depends on whether you code them or not.
::before and ::after are almost self-explanatory pseudo-elements. They define what happens either before or after a regular HTML element. They can be applied to any element.
Let's get right going!
So in the first simple example we are going to add guillemets, also known as French quotation marks, to direct speech in our text. The usefulness of this may stand to debate, you could easily just type it out, but it is a nice and easy way to get started with explaining ::before and ::after.
We will take advantage of the i HTML class fo also.

But,     how did you get so much formatting into these tuts, given that they are not journal entries?

👍: 0 ⏩: 1

pica-ae In reply to ttobserve [2016-04-20 15:45:18 +0000 UTC]

I am glad it is helpful

I usually create these tutorials in sta.sh writer, when submitting you should be able to pick Literature and other text deviations, such as tutorials, as categories to submit to.
It may not work if you are using html to insert images into the text, though. At least that is an issue I used to have. 

👍: 0 ⏩: 1

ttobserve In reply to pica-ae [2016-04-21 11:42:10 +0000 UTC]

  ...an issue I used to have...

Yes; DA software is getting gradually more inclusive.
For years, I’ve been posting literature as “Journal Entries”
simply because the Journal Entry category allows me to do more formatting.

👍: 0 ⏩: 1

pica-ae In reply to ttobserve [2016-04-23 15:05:13 +0000 UTC]

I've worked around that by entering the images via CSS (or adding them with html after submission)

Yeah, literature did only allow the same formatting as comments, but it's better now. 

👍: 0 ⏩: 0

My7hicR4r3 [2015-11-17 22:03:48 +0000 UTC]

Thanks for sharing your CSS tricks! I've been wanting to style my own journal for a while now but was clueless on where to start because I didn't know what DA marked as a class or ID in their html with respect to journals. I know that you mentioned some CSS 3 features like box-shadow, but do you know if journals will let me alter opacity on some of the elements? Or is there a reference that I could look at that will tell me what CSS 3 features that da journals can use? 

👍: 0 ⏩: 1

pica-ae In reply to My7hicR4r3 [2016-05-03 12:20:21 +0000 UTC]

I am glad it is helpful
Unfortunately DA does not provide the information as to what CSS3 features are possible and what not. You can only try and see if it works. 

👍: 0 ⏩: 1

My7hicR4r3 In reply to pica-ae [2016-05-18 18:30:44 +0000 UTC]

Yeah, that's what I've been doing. 

👍: 0 ⏩: 0

CodeRichard [2015-04-21 19:05:28 +0000 UTC]

Thanks for this very useful resource! The list of classes and the hierarchy is very useful to have.

👍: 0 ⏩: 1

pica-ae In reply to CodeRichard [2015-06-08 08:40:20 +0000 UTC]

I am glad it is Thanks! 

👍: 0 ⏩: 0

Razata [2015-03-30 19:33:57 +0000 UTC]

This is probably a super noob question, but is there a way to stretch the background to fit the text? I'll sometimes test a really long journal and the text will just go off the bottom and overlap with the mood stuff?

Is there also a way to add a kinda text-box background thing? Like a content-holder box in the journal skin?

👍: 0 ⏩: 1

pica-ae In reply to Razata [2015-03-31 10:08:59 +0000 UTC]

It's alright, I was a noob once, too  

That sounds a bit odd, to be honest, because the journal should always be at least as long as its content, so that may be an issue with the skin you are using. I'd have to see an example to really know what's going on to cause that. If the journal has a max-height somewhere, that could cause it. 

You can create custom containers in a skin/journal entry. I am explained it with background images in this tutorial: CSS Tricks: Background Images , but it does not specifically talk about custom boxes. (I am planning a tutorial that does explain it, it just isn't done yet )

Basically what you need is a custom class in the CSS, something like
.text-box {}
and then the HTML in the journal text

…

And whatever styling you add in the CSS, like background images, will show up in the HTML. It's important to do this in stash writers HTML mode.

I hope his helps

👍: 0 ⏩: 1

Razata In reply to pica-ae [2015-04-05 22:27:10 +0000 UTC]

Thanks so much!

👍: 0 ⏩: 1

pica-ae In reply to Razata [2015-04-07 08:17:16 +0000 UTC]

No problem  

👍: 0 ⏩: 0

TheMaidenInBlack [2014-11-30 16:21:49 +0000 UTC]

This article is really amazing, but there's one thing I don't understand. What is this? 

.negate-box-margin {}

You mention not to take it out at anytime, but not really explain why.

One other thing: where you list all the element of the gruze style journal, and under the image explain that the indent is to show the stacking of the elements, I thought that with "indent" you were referring to the word "indent" present in some of the classes (which by the way, those aren't explained either and I have no idea what they are I will test them to see what they change, but I think it might be useful for readers in general to know it since you're mentioning them). That could be clarified. (:

Thank you for this incredible resource.

👍: 0 ⏩: 2

pica-ae In reply to TheMaidenInBlack [2014-12-01 10:56:32 +0000 UTC]

As for .negate-box-margin it's what ginkgografix said it's a "new" class, that covers the whole journal. I have used it in my skins when I wanted to have an extra background image as journal skins on dA do not allow more than one background per class (as opposed to regular CSS).
And by "taking out" I meant if you don't want to style the class, you don't have to do anything with it. But if you add "display: none;" the whole journal will disappear indeed. 

As for extra classes, that I don't mention, lots of them are called .gr and don't really have any styling and sometimes refuse to be styled. For example if you add a background image to .gr-box .gr it conflicts with background images in .gr-box. Those classes can't do any harm to a skin, and as such can easily be neglected. Same thing with all the .grf-indent classes, they don't have to be styled, but at the same time that should not be set to "display: none;".

And yeah, I should have maybe said indentation, instead of indent. Less confusing then Luckily I can edit the deviation

Thank you ^^

👍: 0 ⏩: 1

TheMaidenInBlack In reply to pica-ae [2014-12-04 13:51:49 +0000 UTC]

yeah, that isn't something I would want to do.

Very nice explanation, thank you.

yes, indentation works!

Thank you for this useful resource!

👍: 0 ⏩: 1

pica-ae In reply to TheMaidenInBlack [2014-12-07 12:12:03 +0000 UTC]

no problem ^^ 

I have proofreaders, but sometimes I am too excited and publish something before they can check it  

 

👍: 0 ⏩: 1

TheMaidenInBlack In reply to pica-ae [2014-12-09 14:43:12 +0000 UTC]

I totally understand.

👍: 0 ⏩: 1

pica-ae In reply to TheMaidenInBlack [2014-12-10 13:55:58 +0000 UTC]

 

👍: 0 ⏩: 0

GinkgoWerkstatt In reply to TheMaidenInBlack [2014-12-01 08:26:26 +0000 UTC]

.negate-box-margin is a general wrapper of the journal skin, all journal elements are part of it. If you use 'display: none;' there, your journal will vanish

👍: 0 ⏩: 1

TheMaidenInBlack In reply to GinkgoWerkstatt [2014-12-01 08:55:19 +0000 UTC]

TOTAL DESTRUCTION.

👍: 0 ⏩: 1

GinkgoWerkstatt In reply to TheMaidenInBlack [2014-12-01 09:22:19 +0000 UTC]

👍: 0 ⏩: 0

Astrikos [2014-06-19 18:06:34 +0000 UTC]

This is awesome!  
Very comprehensive and nicely laid out!

👍: 0 ⏩: 1

pica-ae In reply to Astrikos [2014-06-20 07:46:20 +0000 UTC]

Thank you  

👍: 0 ⏩: 0

GinkgoWerkstatt [2014-06-18 18:08:08 +0000 UTC]

I like this, but I got no hugs
And those hover effects where you explain all the single classes/elements are sexy, as is the whole box! Personally I am not a fan of *{...} because especially for lists it's annoying if you have to style them completely. I just rest a few classes completely.


"But the default journal skin for coders is not the same as the an unskinned journal entry" <- you might need to remove either 'the' or 'an' here.


Oh... and of course we always remember everything and write it from scratch! *cough*

👍: 0 ⏩: 3

TheMaidenInBlack In reply to GinkgoWerkstatt [2014-11-30 16:12:46 +0000 UTC]

HERE, I WAS ORDERED.

👍: 0 ⏩: 1

GinkgoWerkstatt In reply to TheMaidenInBlack [2014-12-01 08:24:39 +0000 UTC]

👍: 0 ⏩: 0


| Next =>