Description
/* ------------------------------ INSTRUCTIONS ------------------------------ */
/* DO NOT EDIT THIS! UNDER NO CIRCUMSTANCE APPLY CHANGES TO THE CSS IN HERE, THE HEADER OR FOOTER! */
/* ----- Check out the full instructions: https://sta.sh/0h0h2gr62n9 ----- */
/* -----Week title ----- */
/* Put Art History Week
at the beginning of the text, NOT into the header, it will show up on the board */
/* Last edit: 09.07.2014 pica-ae */
/* ------------------------------ CSS ------------------------------ */
body div#devskin12325835 * {
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#devskin12325835 .gr-top h2 img, body div#devskin12325835 .tri , body div#devskin12325835 .gr1, body div#devskin12325835 .gr2, body div#devskin12325835 .gr3, body div#devskin12325835 .list {
display:none!important;
}
body div#devskin12325835 a, body div#devskin12325835 a.external, body div#devskin12325835 .user-symbol {
color:#B73E62;
text-decoration:none;
}
body div#devskin12325835 a:hover, body div#devskin12325835 a.external:hover, body div#devskin12325835 .username-with-symbol:hover .user-symbol {
color:#E43A5D;
text-decoration:none;
transition:color 0.5s ease;
-moz-transition:color 0.5s ease;
-webkit-transition:color 0.5s ease;
-ms-transition:color 0.5s ease;
-o-transition:color 0.5s ease;
}
body div#devskin12325835 .user-symbol, body div#devskin12325835 a.external:after {
font-size:8px;
padding:2px;
position:relative;
top:-4px;
}
/* ------------------------------ GR-BOX ------------------------------ */
body div#devskin12325835 .negate-box-margin {
font-size:16px;
line-height:20px;
margin:0 auto;
max-width:1000px;
padding:10px;
}
body div#devskin12325835 .gr-box {
background:#dae4d9 url('https://fc08.deviantart.net/fs71/f/2014/184/2/d/bggrad_by_pica_ae-d7p0s6p.png') 0px 0px repeat-x;
border:1px solid #a6b2a6;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow:0px 1px 5px #8c9688;
-moz-box-shadow:0px 1px 5px #8c9688;
-webkit-box-shadow:0px 1px 5px #8c9688;
color:#5d625d;
font-family:Verdana, sans-serif;
font-size:14px;
line-height:20px;
overflow:visible;
margin-top:174px;
padding:220px 30px 30px 30px;
position:relative;
}
body div#devskin12325835 .gr-genericbox {
}
/* ------------------------------ GR-TOP ------------------------------ */
body div#devskin12325835 .gr-top {
background:#bcc8ba;
border:solid #a6b2a6;
border-width:1px 1px 0 1px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow:inset 0 1px 0px #8b958b, inset 0px -1px 0px #f9fbf9, inset 0px 0px 60px #bcc8ba;
-moz-box-shadow:inset 0 1px 0px #8b958b, inset 0px -1px 0px #f9fbf9, inset 0px 0px 60px #bcc8ba;
-webkit-box-shadow:inset 0 1px 0px #8b958b, inset 0px -1px 0px #f9fbf9, inset 0px 0px 60px #bcc8ba;
height:100px;
margin:0 20px 0 95px;
padding:20px;
position:relative;
text-align:center!important;
}
body div#devskin12325835 .gr-top::after {
content:'';
border-top:10px solid transparent;
border-right:10px solid #bcc8ba;
border-bottom:10px solid transparent;
position:absolute;
top:35px;
left:-10px;
}
body div#devskin12325835 .gr-top::before {
content:'';
border-top:10px solid transparent;
border-right:10px solid #f9fbf9;
border-bottom:10px solid transparent;
position:absolute;
top:36px;
left:-10px;
}
body div#devskin12325835 .gr-top .gr {
padding-left:0!important;
}
body div#devskin12325835 .gr-top .gr h2, body div#devskin12325835 .gr-top .gr h2 a {
color:#3d4d3d;
font-size:28px;
font-weight:bold;
text-shadow:0 1px 0px #8b958b, 0px -1px 0px #f9fbf9;
transition:color 0.5s ease;
-moz-transition:color 0.5s ease;
-webkit-transition:color 0.5s ease;
-ms-transition:color 0.5s ease;
-o-transition:color 0.5s ease;
}
body div#devskin12325835 .gr-top .gr h2 a:hover {
color:#E43A5D;
}
body div#devskin12325835 .gr-top .gr span {
}
body div#devskin12325835 .gr-top .author {
font-size:0;
}
body div#devskin12325835 .gr-top .author .username-with-symbol {
font-size:0;
}
body div#devskin12325835 .gr-top .author .username-with-symbol .user-symbol {
display:none;
}
body div#devskin12325835 .gr-top .author .avatar {
background:transparent url('https://fc03.deviantart.net/fs71/f/2014/184/f/e/avatar_by_pica_ae-d7p0s6t.png') no-repeat center;
display:block!important;
padding:15px;
position:absolute;
top:-10px;
left:-110px;
}
/* ------------------------------ GR-BODY ------------------------------ */
body div#devskin12325835 .gr-body {
overflow:visible!important;
position:static!important;
}
body div#devskin12325835 .gr-body .gr {
}
body div#devskin12325835 .gr-body .gr .grf-indent {
}
body div#devskin12325835 .gr-body .gr .grf-indent .text {
max-width:860px;
margin:0 auto;
padding:40px 0;
}
/* ------------------------------ BOTTOM ------------------------------ */
body div#devskin12325835 .gr-body .gr .grf-indent .bottom {
position:absolute;
right:6px;
bottom:16px;
color:#DAE4D9!important;
z-index:99;
padding:0px 0px 0px 0px!important;
height:27px;
font-size:0px;
}
body div#devskin12325835 .gr-body .gr .grf-indent .bottom a {
font-size:0px;
background:url('https://fc00.deviantart.net/fs71/f/2014/184/7/c/comment_by_pica_ae-d7p0s66.png') top no-repeat;
color:#DAE4D9!important;
text-decoration:none!important;
padding:0px;
margin:0px 15px 0px 10px;
text-align:center;
width:24px!important;
height:24px!important;
display:block;
transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-webkit-transition:opacity 0.5s;
-ms-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
}
body div#devskin12325835 .gr-body .gr .grf-indent .bottom a:hover {
opacity:0.5;
filter:alpha(opacity=50);
_zoom:1;
}
/* ------------------------------ CUSTOM ------------------------------ */
body div#devskin12325835 .text h1, body div#devskin12325835 .text h2, body div#devskin12325835 .text h3, body div#devskin12325835 .text h4, body div#devskin12325835 .text h5, body div#devskin12325835 .text h6 {
font-family:'Ubuntu', 'Open Sans', 'Trebuchet MS', Arial, Helvetica, sans-serif;
color:#E4375B;
font-weight:500;
letter-spacing:0.02em;
line-height:20px;
}
body div#devskin12325835 .text .white h1, body div#devskin12325835 .text .white h2, body div#devskin12325835 .text .white h3, body div#devskin12325835 .text .white h4, body div#devskin12325835 .text .white h5, body div#devskin12325835 .text .white h6 {
color:#f3f3f3!important;
display:block;
font-family:'Ubuntu', 'Open Sans', 'Trebuchet MS', Arial, Helvetica, sans-serif;
letter-spacing:0.02em;
font-weight:bold;
text-shadow:#333333 0px 1px 4px;
}
body div#devskin12325835 .text h1 {
font-size:32px;
line-height:40px;
}
body div#devskin12325835 .text h2 {
font-size:28px;
line-height:40px;
}
body div#devskin12325835 .text h3 {
font-size:24px;
}
body div#devskin12325835 .text h4 {
font-size:21px;
}
body div#devskin12325835 .text h5 {
font-size:18px;
}
body div#devskin12325835 .text h6 {
font-size:14px;
}
body div#devskin12325835 .text blockquote {
border-bottom:1px solid;
font-family:Tinos, Georgia;
font-size:21px;
font-style:italic;
line-height:28px;
margin:20px 40px;
padding:0 40px 20px 40px;
position:relative;
text-align:center;
}
body div#devskin12325835 .text blockquote i {
font-size:14px;
position:absolute;
right:0;
bottom:-30px;
}
body div#devskin12325835 .text p, body div#devskin12325835 .text .dark {
background:#bcc8ba;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
margin:20px 0;
padding:20px;
}
body div#devskin12325835 .text p strong {
display:block;
font-family:'Ubuntu', 'Open Sans', 'Trebuchet MS', Arial, Helvetica, sans-serif;
color:#E4375B;
letter-spacing:0.02em;
font-size:120%;
margin:10px 0;
}
body div#devskin12325835 .text .indent {
background:transparent;
margin:0;
padding:0 40px;
}
body div#devskin12325835 .text ul, body div#devskin12325835 .text ol {
list-style-position:outside;
margin-left:30px;
}
body div#devskin12325835 .text ul li {
list-style-image:url('https://fc04.deviantart.net/fs70/f/2014/184/7/4/bullet_by_pica_ae-d7p0s6d.png');
margin-bottom:10px;
}
body div#devskin12325835 .text ol li {
margin-bottom:10px;
}
body div#devskin12325835 .text ul li ul {
list-style-type:none;
margin:10px 0 10px 20px;
}
body div#devskin12325835 .text ul li ul li {
list-style-image:none;
}
body div#devskin12325835 .text ul li ul li::before {
content:' ';
display:block;
float:left;
background:#f05473;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:#FFFFFF 0px 1px 0px, #a6b1a6 0px -1px 0px;
-moz-box-shadow:#FFFFFF 0px 1px 0px, #a6b1a6 0px -1px 0px;
-webkit-box-shadow:#FFFFFF 0px 1px 0px, #a6b1a6 0px -1px 0px;
height:5px;
width:5px;
margin:7px 6px 0 -14px;
}
body div#devskin12325835 .text ul li ul li ul {
list-style-type:none;
margin:10px 0 10px 20px;
}
body div#devskin12325835 .text ul li ul li ul li {
list-style-image:none;
}
body div#devskin12325835 .text ul li ul li ul li::before {
content:' ';
display:block;
float:left;
background:#5d625d;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:#FFFFFF 0px 1px 0px, #a6b1a6 0px -1px 0px;
-moz-box-shadow:#FFFFFF 0px 1px 0px, #a6b1a6 0px -1px 0px;
-webkit-box-shadow:#FFFFFF 0px 1px 0px, #a6b1a6 0px -1px 0px;
height:5px;
width:5px;
margin:7px 6px 0 -14px;
}
body div#devskin12325835 .text ul li ul li ul li ul {
list-style-type:none;
margin:10px 0 10px 20px;
}
body div#devskin12325835 .text ul li ul li ul li ul li {
list-style-image:none;
}
body div#devskin12325835 .text ul li ul li ul li ul li::before {
content:' ';
display:block;
float:left;
background:transparent;
border:1px solid #5d625d;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:#FFFFFF 0px 1px 0px, #a6b1a6 0px -1px 0px;
-moz-box-shadow:#FFFFFF 0px 1px 0px, #a6b1a6 0px -1px 0px;
-webkit-box-shadow:#FFFFFF 0px 1px 0px, #a6b1a6 0px -1px 0px;
height:3px;
width:3px;
margin:7px 6px 0 -14px;
}
body div#devskin12325835 .text hr {
border-top:1px dotted #8b958b;
border-bottom:1px dotted #f9fbf9;
}
body div#devskin12325835 .button a {
background:#B73E62;
box-shadow:inset 0 1px 0 #F77992, inset 0 20px 10px -10px #c23e66, 0 1px 3px 0 #6C7C6E;
-moz-box-shadow:inset 0 1px 0 #F77992, inset 0 20px 10px -10px #c23e66, 0 1px 3px 0 #6C7C6E;
-webkit-box-shadow:inset 0 1px 0 #F77992, inset 0 20px 10px -10px #c23e66, 0 1px 3px 0 #6C7C6E;
border:1px solid #AE1837;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
padding:10px 20px;
text-shadow:none;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
}
body div#devskin12325835 .button a:hover {
background:#E43A5D;
box-shadow:inset 0 1px 0 #F47C94, inset 0 20px 10px -10px #E43A5D, 0 1px 5px 0 #6C7C6E;
-moz-box-shadow:inset 0 1px 0 #F47C94, inset 0 20px 10px -10px #E43A5D, 0 1px 5px 0 #6C7C6E;
-webkit-box-shadow:inset 0 1px 0 #F47C94, inset 0 20px 10px -10px #E43A5D, 0 1px 5px 0 #6C7C6E;
text-shadow:#AE1837 0px -1px 0px, #ED6581 0px -1px 0px;
}
body div#devskin12325835 .note {
background:#ffe566;
box-shadow:#bcc8ba 0px 2px 4px, inset #fff6cc 0px 1px 3px;
-moz-box-shadow:#bcc8ba 0px 2px 4px, inset #fff6cc 0px 1px 3px;
-webkit-box-shadow:#bcc8ba 0px 2px 4px, inset #fff6cc 0px 1px 3px;
margin:20px;
padding:20px;
position:relative;
}
body div#devskin12325835 .columns, body div#devskin12325835 .columns-p {
display:block;
overflow:hidden;
}
body div#devskin12325835 .columns p, body div#devskin12325835 .columns .half {
background:transparent;
display:inline-block;
float:left;
margin-right:1%;
padding:0 0 10px 0;
width:48%;
}
body div#devskin12325835 .columns-p p {
display:inline-block;
float:left;
padding:20px;
max-width:420px;
}
body div#devskin12325835 .columns-p p:first-of-type {
margin:0 20px 0 0;
}
body div#devskin12325835 .columns-p p:last-of-type {
margin:0 0 0 0;
}
body div#devskin12325835 .columns .half ul, body div#devskin12325835 .columns .half ol {
margin-left:20px;
}
body div#devskin12325835 .interview {
display:block;
font-family:Tinos, Georgia;
font-size:18px;
font-style:italic;
margin:0;
padding:0;
position:relative;
}
body div#devskin12325835 .interview .avatar {
float:left;
margin-top:25px;
}
body div#devskin12325835 .interview p .avatar {
float:none;
margin-top:0;
}
body div#devskin12325835 .interview p {
background:#FFFFFF;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 4px #6C7C6E;
-moz-box-shadow:0 2px 4px #6C7C6E;
-webkit-box-shadow:0 2px 4px #6C7C6E;
display:block;
font-family:Verdana, sans-serif;
font-size:14px;
font-style:normal;
margin:15px 0px 0px 70px;
padding:15px 15px 15px 30px;
position:relative;
}
body div#devskin12325835 .interview p::before {
content:' ';
display:block;
background:#dae4d9;
box-shadow:inset 0 2px 4px #6C7C6E;
-moz-box-shadow:inset 0 2px 4px #6C7C6E;
-webkit-box-shadow:inset 0 2px 4px #6C7C6E;
position:absolute;
top:30px;
left:-10px;
height:20px;
width:20px;
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
body div#devskin12325835 .interview p::after {
content:' ';
display:block;
background:#dae4d9;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
position:absolute;
top:26px;
left:-20px;
height:28px;
width:20px;
}
/* ------------------------------ THUMBS ------------------------------ */
body div#devskin12325835 .shadow-holder {
margin:5px;
vertical-align:middle;
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-ms-transition:background 1s;
-o-transition:background 1s;
}
body div#devskin12325835 .shadow-holder:hover {
box-shadow:0 0 4px #B8D1B6;
-moz-box-shadow:0 0 4px #B8D1B6;
-webkit-box-shadow:0 0 4px #B8D1B6;
}
body div#devskin12325835 .shadow-holder a.lit {
background:#E0E8DC;
border:1px solid #FFFFFF;
width:170px;
height:150px;
}
body div#devskin12325835 .shadow-holder .wrap q, body div#devskin12325835 p .shadow-holder .wrap q {
background:#E7EDE6;
font-family:Tinos, Georgia, serif;
font-size:14px;
font-style:italic;
font-weight:normal;
padding:10px;
position:absolute;
right:0;
left:0;
}
body div#devskin12325835 .shadow-holder .wrap q strong {
margin-bottom:10px;
}
body div#devskin12325835 p .shadow-holder .wrap q strong {
color:#5d625d;
font-family:Tinos, Georgia, serif;
font-size:14px;
margin:0 0 10px 0;
}
body div#devskin12325835 .embedded-deviation {
vertical-align:middle;
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-ms-transition:background 1s;
-o-transition:background 1s;
}
/* thumbs in feat */
body div#devskin12325835 .feat .shadow-holder, body div#devskin12325835 .feat .embedded-deviation {
background:#E4375B;
box-shadow:inset 0 1px 0 #F77992, inset 0 20px 10px -10px #E85A78, 0 1px 3px 0 #6C7C6E;
-moz-box-shadow:inset 0 1px 0 #F77992, inset 0 20px 10px -10px #E85A78, 0 1px 3px 0 #6C7C6E;
-webkit-box-shadow:inset 0 1px 0 #F77992, inset 0 20px 10px -10px #E85A78, 0 1px 3px 0 #6C7C6E;
border:1px solid #AE1837;
margin:5px;
padding:5px;
vertical-align:middle;
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-ms-transition:background 1s;
-o-transition:background 1s;
}
body div#devskin12325835 .feat .shadow-holder:hover, body div#devskin12325835 .feat .embedded-deviation:hover {
background:#E74B6C;
box-shadow:inset 0 1px 0 #F47C94, inset 0 20px 10px -10px #ED6581, 0 1px 5px 0 #6C7C6E;
-moz-box-shadow:inset 0 1px 0 #F47C94, inset 0 20px 10px -10px #ED6581, 0 1px 5px 0 #6C7C6E;
-webkit-box-shadow:inset 0 1px 0 #F47C94, inset 0 20px 10px -10px #ED6581, 0 1px 5px 0 #6C7C6E;
}
body div#devskin12325835 .shadow-holder .mild .thumb img, body div#devskin12325835 .shadow-holder a.lit, body div#devskin12325835 .feat .shadow-holder .mild .thumb img, body div#devskin12325835 .feat .embedded-deviation img, body div#devskin12325835 .feat .shadow-holder a.lit {
vertical-align:middle;
}
body div#devskin12325835 .feat .shadow-holder a.lit {
background:transparent;
border:none;
width:170px;
height:150px;
}
body div#devskin12325835 .feat .shadow-holder a.lit img, body div#devskin12325835 .shadow-holder a.lit img {
display:none;
}
body div#devskin12325835 .feat .shadow-holder .wrap q {
background:transparent;
color:#FFFFFF;
font-family:Tinos, Georgia, serif;
font-size:14px;
font-style:italic;
font-weight:normal;
margin:0;
padding:5px;
position:absolute;
right:0;
left:0;
}
body div#devskin12325835 .feat .shadow-holder .wrap q strong {
margin-bottom:10px;
}
body div#devskin12325835 .feat {
text-align:center;
background:transparent;
padding:0;
margin:0;
}
body div#devskin12325835 .embedded-deviation {
width:inherit;
}
/* ------------------------- FOOTER ------------------------- */
body div#devskin12325835 .buttons {
position:absolute;
left:20px;
bottom:16px;
color:#DAE4D9!important;
z-index:99;
padding:0px 0px 0px 0px!important;
height:27px;
font-size:0px;
}
body div#devskin12325835 .buttons a {
transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-webkit-transition:opacity 0.5s;
-ms-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
}
body div#devskin12325835 .buttons img {
padding-right:8px;
}
body div#devskin12325835 .buttons a:hover {
opacity:0.5;
filter:alpha(opacity=50);
_zoom:1;
}
/* ------------------------- HEADER ------------------------- */
body div#devskin12325835 .header {
background:transparent;
height:375px;
position:absolute;
top:-174px;
right:0;
left:0;
}
body div#devskin12325835 .header br {
display:none;
}
body div#devskin12325835 .header .pe-regular a {
display:block;
background:url('https://fc03.deviantart.net/fs71/f/2014/184/5/9/pe_regular_by_pica_ae-d7p0s4d.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin12325835 .header .pe-art-history a {
display:block;
background:url('https://fc08.deviantart.net/fs70/f/2014/184/e/a/pe_art_history_by_pica_ae-d7p0s4y.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin12325835 .header .pe-community-week a {
display:block;
background:url('https://fc09.deviantart.net/fs71/f/2014/184/3/a/pe_community_week_by_pica_ae-d7p0s4o.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin12325835 .header .pe-handy-hints-tricks a {
display:block;
background:url('https://fc04.deviantart.net/fs71/f/2014/184/3/1/pe_handy_hints_tircks_by_pica_ae-d7p0s4j.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin12325835 .header .pe-anime-manga a {
display:block;
background:url('https://fc02.deviantart.net/fs70/f/2014/184/9/5/pe_anime_manga_week_by_pica_ae-d7p0s54.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin12325835 .header .pe-artist-toolbox a {
display:block;
background:url('https://fc04.deviantart.net/fs70/f/2014/329/6/6/pe_artist_toolbox_by_pica_ae-d87mgu2.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin12325835 .header .pe-senior a {
display:block;
background:url('https://fc04.deviantart.net/fs70/f/2014/329/e/8/pe_senior_by_pica_ae-d87mgn0.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin12325835 .header .board {
background:url('https://fc05.deviantart.net/fs71/f/2014/184/8/6/board_by_pica_ae-d7p0s6j.png') top right no-repeat;
height:217px;
width:360px;
margin:0 auto;
padding:0;
position:relative;
top:-30px;
}
body div#devskin12325835 .header .board .stamp {
position:absolute;
top:60px;
left:25px;
}
body div#devskin12325835 .header .board .stamp .avatar {
box-shadow:#331f14 0px 1px 2px;
-moz-box-shadow:#331f14 0px 1px 2px;
-webkit-box-shadow:#331f14 0px 1px 2px;
transition:all 0.7s;
-moz-transition:all 0.7s;
-webkit-transition:all 0.7s;
-ms-transition:all 0.7s;
-o-transition:all 0.7s;
}
body div#devskin12325835 .header .board .stamp .avatar:hover {
box-shadow:#000000 0px 1px 6px;
-moz-box-shadow:#000000 0px 1px 6px;
-webkit-box-shadow:#000000 0px 1px 6px;
}
body div#devskin12325835 .week {
color:#f3f3f3;
display:block;
font-family:'Ubuntu', 'Open Sans', 'Trebuchet MS', Arial, Helvetica, sans-serif;
letter-spacing:0.02em;
font-size:24px;
line-height:28px;
font-weight:bold;
height:60px;
text-shadow:#331f14 0px 1px 4px;
position:relative;
top:-285px;
max-width:300px;
margin:0 auto;
margin-bottom:-120px;
text-align:center;
z-index:99;
}
body div#devskin12325835 .week:hover {
color:#fdfdfd;
text-shadow:#331f14 0px 1px 4px;
}
/* ------------------------- CALENDAR ------------------------- */
body div#devskin12325835 .calendar {
}
body div#devskin12325835 .calendar i {
color:#333333;
display:inline-block;
font-size:24px;
font-style:normal;
font-weight:bold;
height:60px;
line-height:20px;
width:60px;
position:relative;
text-align:center;
background:#FFFFFF;
box-shadow:0 2px 4px #6C7C6E;
-moz-box-shadow:0 2px 4px #6C7C6E;
-webkit-box-shadow:0 2px 4px #6C7C6E;
display:inline-block;
position:relative;
}
body div#devskin12325835 .calendar i b {
background:#E4375B;
color:#FFFFFF;
display:block;
font-size:8px;
height:20px;
line-height:20px;
margin:0 0 10px 0;
text-align:center;
text-transform:uppercase;
}
body div#devskin12325835 .calendar i:last-of-type {
margin-left:30px;
}
body div#devskin12325835 .calendar i:first-of-type::after {
content:' ';
position:absolute;
bottom:10px;
right:-20px;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid #333333;
}
body div#devskin12325835 .calendar h2 {
color:#333333;
display:inline-block;
margin-left:20px;
}
body div#devskin12325835 .schedule {
margin-left:190px;
}
body div#devskin12325835 .schedule ul {
}
body div#devskin12325835 .schedule ul li {
list-style-type:none;
list-style-image:none;
line-height:25px;
margin-bottom:20px;
position:relative;
}
body div#devskin12325835 .schedule ul li b {
display:block;
position:absolute;
left:-50px;
top:-5px;
color:#FFFFFF;
font-size:18px;
font-weight:bold;
text-shadow:#8c9688 0px 1px 3px;
padding:0;
width:40px;
text-align:right;
}
body div#devskin12325835 .schedule ul li b sup {
font-size:10px;
font-weight:normal;
margin:0 0 0 2px;
}
/* ------------------------------ MOBILE ------------------------------ */
@media only screen and (max-width: 767px) {
body div#devskin12325835 .header, body div#devskin12325835 .gr-top::after, body div#devskin12325835 .gr-top::before, body div#devskin12325835 .gr-top .author, body div#devskin12325835 .gr-top .gr .timestamp {
display:none;
}
}
@media only screen and (max-width: 767px) {
body div#devskin12325835 .gr-box {
margin-top:0;
padding:90px 30px 30px 30px;
position:relative;
}
}
@media only screen and (max-width: 767px) {
body div#devskin12325835 .gr-top {
margin:0;
}
}
@media only screen and (max-width: 767px) {
body div#devskin12325835 .gr-body .gr .grf-indent .text {
margin-top:-120px;
}
}
@media only screen and (max-width: 767px) {
body div#devskin12325835 .week {
height:50px;
font-size:20px!important;
line-height:25px!important;
position:relative;
top:-130px!important;
left:120px;
padding-right:120px;
max-width:none!important;
margin:0;
text-align:left!important;
vertical-align:middle;
}
}
@media only screen and (max-width: 767px) {
body div#devskin12325835 .schedule {
margin-left:20px;
}
}
@media only screen and (max-width: 767px) {
body div#devskin12325835 .calendar h2 {
display:block;
margin-top:20px;
margin-left:0;
}
}
body div#devskin12325835 .mobile-header {
display:none;
position:absolute;
top:20px;
}
@media only screen and (max-width: 767px) {
body div#devskin12325835 .mobile-header {
display:block;
}
}
@media only screen and (max-width: 767px) {
body div#devskin12325835 .mobile-header .avatar {
box-shadow:#331f14 0px 1px 2px;
-moz-box-shadow:#331f14 0px 1px 2px;
-webkit-box-shadow:#331f14 0px 1px 2px;
transition:all 0.7s;
-moz-transition:all 0.7s;
-webkit-transition:all 0.7s;
-ms-transition:all 0.7s;
-o-transition:all 0.7s;
}
}
@media only screen and (max-width: 767px) {
body div#devskin12325835 .mobile-header .avatar:hover {
box-shadow:#000000 0px 1px 6px;
-moz-box-shadow:#000000 0px 1px 6px;
-webkit-box-shadow:#000000 0px 1px 6px;
}
}
Community Week
Hello!
I'm UszatyArbuz and today I want to explain some basic features that DeviantArt provides for anyone to use in the journal. However they are really simple HTML, people keep asking me from time to time on how to do more complicated things with them.
Even though you can use more features, I am going to explain the features that are provided on top bar of "Write a journal entry" page only, in both Rich text and HTML editing modes, and how to adjust them to your needs.
Let's get it started 
How does it look like?To see the bar, you can either go to your "Write a journal entry " page, or "Sta.sh Writer " page. On Sta.sh writer page, part of the bar is moved to the next line, however the features and their order doesn't change.
Description: A bar on "Write a journal entry " page.
1. MenuWhen you hover this icon, a "Sta.sh menu" will appear. It doesn't add any feature for the text that you write, so I won't go into details.
2. Undo and Redo option
There two icons allow you to undo your last action(s), such as writing text or removing a thumbnail, or redo them.
The Undo icon is on the left, and it works exactly like CTRL+Z on your keyboard.
The Redo icon is on the right and works exactly like CTRL+Y on your keyboard.
3. "File" menuWhen you click this icon, the new actions will appear as a drop-down list:
a) Last Autosave
This is not an icon, however it's a useful little thing that tells you the last time when the draft was saved by the site.
b) New Draft...
This option allows you to create a new journal entry. Please be very cautious with this option, because when you click it, it will create an empty draft directly on the page that you are on, and it can overwrite the content that you have already added. You can right-click this option, and choose "Open in a new tab", to add a new, empty draft in the new tab of your browser.
c) Open Draft...
After clicking this option, a new pop-up will appear. You will be presented with your Sta.sh content, and you will be able to choose any literature draft or deviation for future editing.
d) Save Draft
With this option, you can manually save your draft.
4. "Edit" menuWhen you click this icon, the new actions will appear as a drop-down list:
a) Always Add Full Size Images
On default, this checkbox is checked. You can disable this option while clicking on it.
b) Switch to HTML mode
This is an important option that we will be using today for this guide. It allows you to switch to HTML mode.
Now, every option that appears as an icon on the bar is added as a code between text content to give additional effect to the text. At this moment you can only see the final effect that will be added to the text. When you choose this option, you will be presented with the journal content as it looks with the particular codes.
If you click it, journal content will change, adding codes and removing features, unless you haven't chose any yet. When you hover over this menu again, you will be presented with the option "Switch to Rich Editing Mode" instead, which allows you to go back to previous state:
5. Bold, Italic, UnderlineThese are basic text formatting options presented by DeviantArt. There is more of them, most working in journals as well.
a) B - bold
Makes your text bold.
Click and drag over the text to highlight it, and then click the icon to make the text bold.
To make your text bold in HTML mode, add you text between and :
your text here
b) I - italic
Makes your text italic.
Click and drag over the text to highlight it, and then click the icon to make the text italic.
To make your text italic in HTML mode, add you text between and :
your text here
c) U - underline
Makes your text bold.
Click and drag over the text to highlight it, and then click the icon to make the text italic.
To make your text underlined in HTML mode, add you text between and :
your text here
6. HeadersAfter clicking this icon, a drop-down list will appear. This feature allows you to add text in different sizes (and weight), to emphasize the content.
The image itself is self-explanatory, whoever using headers is a bit tricky.
To make text a header, simply click and drag over the text to highlight it, and then click this drop down menu and choose the header of your liking.
If you go to new line and chose a header, all the text you will be writing in this line will be formatted to this header. If you already have a text in the line, all the line will be formatted to this header effect.
If you want to make multiple lines of text in the header with enter key, you need to go to HTML mode that we were discussing about earlier. Here, you are allowed to add enters inside the header code. Otherwise, the code may not work right.
7. Unordered listThis option allows you to create unordered lists. Simply click on the icon, and a dot will appear. To make a new item on the list, hit enter once. To finish writing the list, hit enter twice.
In HTML mode, the code for unordered (and ordered) list is a bit tricky. Let's see the example:
List title- cookies
- milk
- chocolate
The code in HTML mode looks like this:
List title- cookies
- milk
- chocolate
It's easy to see that all the list is between (unordered list). Inside this code, you add new items on the list with and . No spaces or enters are needed.
8. Ordered listOrdered list is similar to Unordered list, however here the items on the list will have numbers instead of dots. Moreover, the code changes a bit:
List titlecookiesmilkchocolateThe code in HTML mode looks like this:
List title- cookies
- milk
- chocolate
Here instead of we use
(ordered list).
9. QuoteThis feature is used by many deviants, and at the same time, it's almost impossible to manage in Rich Editing Mode with a lot of different formatted content. It's really easy to do that in HTML mode, though!
To have you text in the quote box (aka block quote), simply click and drag over the text to highlight it, and then click the icon to put it in the box.
In the HTML mode, you will be presented with this code for block quote:
a text in blockquote
It looks very simple yet it's important to notice the opening and close of the code, for future part of this guide.
10. Text aligningThese three icons allows you align the text in your journal on thee different ways.
Left icon is aligning your text to the left, icon in the middle will center your text, and icon on the right is aligning your text to the right.
Simple as that 
The codes in HTML mode looks as follows:
text on the left
text on the center
text on the right
11. Adding a linkThis is my favorite feature in Rich Editing option. It allows you to add links to your journal in most easiest way. When you click on this icon, a drop-down box will appear:
Simply, add URL address to the top text box, and the text that will appear in the journal and click OK to generate link.
In HTML mode the code looks a bit complicated. Example:
My profile
changes to:
My profile
In the first part of the code, between " and " add the URL that you want to create link to. Then, you have to add the name for the link as presented above.
12. Preview and Submit buttons (Write a Journal only)Lastly, on the very right side fo the bar, you have two buttons that will allow you to preview the journal entry, and to submit it to your Journal.
How to mix them together?Now, when we know how to manage the text editing features a bit more, and how works HTML mode of writing journals, we can mix features together to create more complex text edits.
It is very important to notice that every code that we saw today has their "opening" and "close" tags. In HTML, usually the closing code looks like opening code, but with additional backslash / right after the "less than" symbol < (Please note that not all HTML codes have the same syntax). It is very important to not to mix the codes while we are creating a complex one.
It's actually a very easy explanation on one of the basic stuff in HTML coding, so, there you go 
As an example I will use Quote for the content base, and elements inside it, because as far as I noticed, it's the most used feature and hardest to manage in Rich editing text mode. I'm also going to include an image with no journal skin, because even our journal skin affects the code.
What we want to create :
How the code looks like:
I colored particular parts of the code to show you where they open and close. I also added new codes in new lines, although it's not necessary most of the time. On the right, with gradients I marked which codes are inside which other codes, and that it's mostly like building a cake with layers or a tree. I hope it's better to understand the opening and closing of the codes, and where they should be.
Last thing, when we aim to create a code where we add multiple text effects, it's always easier to create middle part, and add other that "over wrap" the one that we have already created. This way we can prevent mixing codes together a bit more.
In conclusion
I hope you enjoyed this article, and as you see the basic knowledge it brings can be used in creating not only journal entries, but also for things such as custom boxes.
As I mentioned, the effects / features that DeviantArt provides on the bar on the top of "Write a Journal" page are not all that you can use on DeviantArt. If you want to try more of them, you can read about them in this article, or this one , or find article of your liking by your own - there is a plenty of them over DA!.
Thanks, and see you next time!
Comments: 62
fireytika [2016-09-29 12:24:20 +0000 UTC]
Wooow awesome info! Thank you very much! This is super helpful~
You did a great job to create this article!
And...... we can save our draft? I just know about this, now! I'm not sure, should i be happy or sad? TT^TT
π: 0 β©: 1
fireytika In reply to UszatyArbuz [2016-09-30 14:14:30 +0000 UTC]
yeahh that's a good thing XD
π: 0 β©: 0
Thystyn [2016-09-28 12:59:36 +0000 UTC]
Thanks.Β Β
π: 0 β©: 1
Iduna-Haya [2016-09-28 08:42:20 +0000 UTC]
Thank you! This is really helpful ^^ htmlΒ always gives me an immediate headache, haha
π: 0 β©: 1
LualaDy [2016-09-28 06:40:55 +0000 UTC]
I hate rich editing, it always adds so many span things
everything line
gets a span
drives me insane!!!
π: 0 β©: 1
LualaDy In reply to UszatyArbuz [2016-09-28 08:36:27 +0000 UTC]
EXACTLY OMG!!!!!!!!
like WTF
π: 0 β©: 0
| Next => 
UszatyArbuz β Writing journals in Rich and HTML modes
