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

Astrikos In reply to ??? [2014-06-19 18:05:46 +0000 UTC]

 

👍: 0 ⏩: 1

GinkgoWerkstatt In reply to Astrikos [2014-06-20 07:19:48 +0000 UTC]

👍: 0 ⏩: 0

pica-ae In reply to ??? [2014-06-19 09:54:38 +0000 UTC]

Oh noes, no hugs? Scandalous  here you go 

Thank you

I've not known *{…} for that long, and I read that it may increase loading times of pages, but I figure since it's restricted to the journal by DA anyway, it wouldn't cause too much harm. As for lists, I style them competely anyway now, so I guess I am oblivious to that  

Corrected that, I had no proofreader  

Of course we do  

👍: 0 ⏩: 1

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



Yeah, if you style them completely no matter what, then it makes sense to use it.

👍: 0 ⏩: 0

Kjherstin [2014-06-18 13:58:10 +0000 UTC]

So cool how you wrote this journal

👍: 0 ⏩: 1

pica-ae In reply to Kjherstin [2014-06-19 12:22:29 +0000 UTC]

Thank you  

👍: 0 ⏩: 0

Nichrysalis [2014-06-17 20:32:17 +0000 UTC]

Very very helpful! I started writing up something similar a few days ago for me to reference that has some more for you (it's incomplete, but I intend on completing it here in a week or two; any help with it appreciated! ): sta.sh/0qxt62z8mw9

The newest one I've learned of on that list is .da-media[mobile] which is a neat trick for changing journal CSS to adapt to mobile versions when the normal CSS doesn't translate well to mobile viewing.

I still start from that template you gave me a year or two ago. It was the best thing that happened to me as far as creating skins go was having a place to start. Been meaning to look at creating a template more for myself, which is how that "Master List of Selectors" was born, for me to use as a reference when making it.

👍: 0 ⏩: 2

pica-ae In reply to Nichrysalis [2014-06-18 07:42:19 +0000 UTC]

Cheat sheets are awesome I actually didn't find all the .gb stuff but I didn't notice anything by not doing anything with it  

Yeah, I have used the mobile option, but only on one or two skins so far. I've used it on this skin fav.me/d7j1ih2 to get rid of the background images in smaller resolutions  

 

In my templates, I also have a set of custom classes I created, as well as classes for all kinds of thumbs, and all the text styling you can use, like blockquotes, headlines, paragraphs, lists etc. 
I will try to put all those in the nest tutorial  

👍: 0 ⏩: 1

Nichrysalis In reply to pica-ae [2014-06-18 09:09:33 +0000 UTC]

Awesome!

👍: 0 ⏩: 1

pica-ae In reply to Nichrysalis [2014-06-19 12:33:08 +0000 UTC]

 

👍: 0 ⏩: 0

SimplySilent In reply to Nichrysalis [2014-06-18 04:21:19 +0000 UTC]

I love the mobile trick.

👍: 0 ⏩: 0

marioluevanos In reply to ??? [2014-06-17 17:27:25 +0000 UTC]

 

👍: 0 ⏩: 1

pica-ae In reply to marioluevanos [2014-06-19 11:00:16 +0000 UTC]

 

👍: 0 ⏩: 0

KateStroh90 In reply to ??? [2014-06-17 16:49:04 +0000 UTC]

Thanks for the post. I may want to test this out to come up with something for me.

👍: 0 ⏩: 1

pica-ae In reply to KateStroh90 [2014-06-19 11:00:34 +0000 UTC]

Thank you Cool, let me know how it goes

👍: 0 ⏩: 1

KateStroh90 In reply to pica-ae [2014-06-19 16:58:02 +0000 UTC]

Sure. I'll let you know.

👍: 0 ⏩: 0

gillianivyart In reply to ??? [2014-06-17 16:12:53 +0000 UTC]

         
Oh yea!  Let's boogie!  hahaha.  Great comprehensive walkthrough.  And thanks for adding my resource to the suggestions ;D

👍: 0 ⏩: 1

pica-ae In reply to gillianivyart [2014-06-19 11:01:36 +0000 UTC]

Thank you  

And no worries, I was thinking of submitting the blank template myself, but since you alrady did that, I featured yours instead

👍: 0 ⏩: 1

gillianivyart In reply to pica-ae [2014-06-19 22:16:53 +0000 UTC]

👍: 0 ⏩: 1

pica-ae In reply to gillianivyart [2014-06-20 07:27:54 +0000 UTC]

 

👍: 0 ⏩: 0

KovoWolf In reply to ??? [2014-06-17 14:07:25 +0000 UTC]

Thank you for this!

👍: 0 ⏩: 1

pica-ae In reply to KovoWolf [2014-06-19 11:01:45 +0000 UTC]

 

👍: 0 ⏩: 0

Ikue [2014-06-17 12:27:57 +0000 UTC]

There are technically 2 journal layouts you can skin… Sure if you add a bit of code the skin defaults to the old journal style but there is an even older journal skin style that you can use from when journal skins were first introduced. Depending on the classes you use you can skin either your version of the journal HTML or an even older version of the journal theme. Try adding in something with ".journalbox{ }". There are much fewer classes to deal with/hide.

The journal skin time forgot…

👍: 0 ⏩: 1

pica-ae In reply to Ikue [2014-06-17 12:39:55 +0000 UTC]

Yeah, but I wanted to ignore that one on purpose But seriously, I was just going out from the point of entering one line of CSS or just a comment into the CSS field and the layout you see then. 
And I am all about gruze and I don't even remember those class names  

I just think it's so old by now, (4 years or more?) that it has become obsolete. I know many people still use those classes, but for me, they just don't exist anymore

👍: 0 ⏩: 1

Ikue In reply to pica-ae [2014-06-18 13:43:11 +0000 UTC]

Yeah, I see your point. I like to use the older layout for simpler skins myself. Something about having to hide all those extra classes never sat right with me. UNless you're repurposing those extra classes to make other elements without the need for extra HTML from the user.

Still an excellent article.  

👍: 0 ⏩: 1

pica-ae In reply to Ikue [2014-06-19 10:02:16 +0000 UTC]

It makes sense to want to go for something simpler, but since I use a template anyway, the hiding doesn't take up more time. Of course it would be nice if we didn't have to hide anything, but let's wait for the next DA overall update whenever it may come (on the inside I grin at the drama already think I am actually looking forward to it ) 

(I also totally ignored the mood list… I never code it anymore, cos you can't see it / use it, when writing journals in sta.sh. It's a bit a shame, cos I used to like to fill that out )

Thank you

👍: 0 ⏩: 1

Ikue In reply to pica-ae [2014-06-19 14:47:54 +0000 UTC]

I hate the mood list. XD I always tried to code it out but I find myself forgetting in recent skins. Sometimes users have them saved with defaults so it skews up the skin completely.

👍: 0 ⏩: 0


<= Prev |