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: http://sta.sh/0h0h2gr62n9 ----- */
/* -----Week title ----- */
/* Put the week's title
at the beginning of the text, NOT into the header, it will show up on the board */
/* ------------------------------ CSS ------------------------------ */
body div#devskin11346237 * {
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#devskin11346237 .gr-top h2 img, body div#devskin11346237 .tri , body div#devskin11346237 .gr1, body div#devskin11346237 .gr2, body div#devskin11346237 .gr3, body div#devskin11346237 .list {
display:none!important;
}
body div#devskin11346237 a, body div#devskin11346237 a.external, body div#devskin11346237 .user-symbol {
color:#B73E62;
text-decoration:none;
}
body div#devskin11346237 a:hover, body div#devskin11346237 a.external:hover, body div#devskin11346237 .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#devskin11346237 .user-symbol, body div#devskin11346237 a.external:after {
font-size:8px;
padding:2px;
position:relative;
top:-4px;
}
/* ------------------------------ GR-BOX ------------------------------ */
body div#devskin11346237 .negate-box-margin {
font-size:16px;
line-height:20px;
margin:0 auto;
max-width:1000px;
padding:10px;
}
body div#devskin11346237 .gr-box {
background:#dae4d9 url('https://dl.dropboxusercontent.com/u/22307794/css/PE/bggrad.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#devskin11346237 .gr-genericbox {
}
/* ------------------------------ GR-TOP ------------------------------ */
body div#devskin11346237 .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#devskin11346237 .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#devskin11346237 .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#devskin11346237 .gr-top .gr {
padding-left:0!important;
}
body div#devskin11346237 .gr-top .gr h2, body div#devskin11346237 .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#devskin11346237 .gr-top .gr h2 a:hover {
color:#E43A5D;
}
body div#devskin11346237 .gr-top .gr span {
}
body div#devskin11346237 .gr-top .author {
font-size:0;
}
body div#devskin11346237 .gr-top .author .username-with-symbol {
font-size:0;
}
body div#devskin11346237 .gr-top .author .username-with-symbol .user-symbol {
display:none;
}
body div#devskin11346237 .gr-top .author .avatar {
background:transparent url('https://dl.dropboxusercontent.com/u/22307794/css/PE/avatar.png') no-repeat center;
display:block!important;
padding:15px;
position:absolute;
top:-10px;
left:-110px;
}
/* ------------------------------ GR-BODY ------------------------------ */
body div#devskin11346237 .gr-body {
overflow:visible!important;
position:static!important;
}
body div#devskin11346237 .gr-body .gr {
}
body div#devskin11346237 .gr-body .gr .grf-indent {
}
body div#devskin11346237 .gr-body .gr .grf-indent .text {
max-width:860px;
margin:0 auto;
padding:40px 0;
}
/* ------------------------------ BOTTOM ------------------------------ */
body div#devskin11346237 .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#devskin11346237 .gr-body .gr .grf-indent .bottom a {
font-size:0px;
background:url('https://dl.dropboxusercontent.com/u/22307794/css/PE/comment.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#devskin11346237 .gr-body .gr .grf-indent .bottom a:hover {
opacity:0.5;
filter:alpha(opacity=50);
_zoom:1;
}
/* ------------------------------ CUSTOM ------------------------------ */
body div#devskin11346237 .text h1, body div#devskin11346237 .text h2, body div#devskin11346237 .text h3, body div#devskin11346237 .text h4, body div#devskin11346237 .text h5, body div#devskin11346237 .text h6 {
font-family:'Ubuntu', 'Open Sans', 'Trebuchet MS', Arial, Helvetica, sans-serif;
color:#E4375B;
letter-spacing:0.02em;
}
body div#devskin11346237 .text h1 {
font-size:32px;
}
body div#devskin11346237 .text h2 {
font-size:28px;
}
body div#devskin11346237 .text h3 {
font-size:24px;
}
body div#devskin11346237 .text h4 {
font-size:21px;
}
body div#devskin11346237 .text h5 {
font-size:18px;
}
body div#devskin11346237 .text h6 {
font-size:16px;
}
body div#devskin11346237 .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#devskin11346237 .text blockquote i {
font-size:14px;
position:absolute;
right:0;
bottom:-30px;
}
body div#devskin11346237 .text p {
background:#bcc8ba;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
margin:20px 0;
padding:20px;
}
body div#devskin11346237 .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#devskin11346237 .text .indent {
background:transparent;
margin:0;
padding:0 40px;
}
body div#devskin11346237 .text ul, body div#devskin11346237 .text ol {
list-style-position:outside;
margin-left:30px;
}
body div#devskin11346237 .text ul li {
list-style-image:url('https://dl.dropboxusercontent.com/u/22307794/css/PE/bullet.png');
margin-bottom:10px;
}
body div#devskin11346237 .text ol li {
margin-bottom:10px;
}
body div#devskin11346237 .text hr {
border-top:1px dotted #8b958b;
border-bottom:1px dotted #f9fbf9;
}
body div#devskin11346237 .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#devskin11346237 .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#devskin11346237 .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#devskin11346237 .columns {
display:block;
overflow:hidden;
}
body div#devskin11346237 .columns p {
background:transparent;
display:inline-block;
float:left;
margin-right:1%;
padding:0 0 10px 0;
width:48%;
}
body div#devskin11346237 .interview {
display:block;
font-family:Tinos, Georgia;
font-size:18px;
font-style:italic;
margin:0;
padding:0;
position:relative;
}
body div#devskin11346237 .interview .avatar {
float:left;
margin-top:25px;
}
body div#devskin11346237 .interview p .avatar {
float:none;
margin-top:0;
}
body div#devskin11346237 .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#devskin11346237 .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#devskin11346237 .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#devskin11346237 .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#devskin11346237 .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#devskin11346237 .shadow-holder a.lit {
background:#E0E8DC;
border:1px solid #FFFFFF;
width:170px;
height:150px;
}
body div#devskin11346237 .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#devskin11346237 .shadow-holder .wrap q strong {
margin-bottom:10px;
}
body div#devskin11346237 .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#devskin11346237 .feat .shadow-holder, body div#devskin11346237 .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#devskin11346237 .feat .shadow-holder:hover, body div#devskin11346237 .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#devskin11346237 .shadow-holder .mild .thumb img, body div#devskin11346237 .shadow-holder a.lit, body div#devskin11346237 .feat .shadow-holder .mild .thumb img, body div#devskin11346237 .feat .embedded-deviation img, body div#devskin11346237 .feat .shadow-holder a.lit {
vertical-align:middle;
}
body div#devskin11346237 .feat .shadow-holder a.lit {
background:transparent;
border:none;
width:170px;
height:150px;
}
body div#devskin11346237 .feat .shadow-holder a.lit img, body div#devskin11346237 .shadow-holder a.lit img {
display:none;
}
body div#devskin11346237 .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#devskin11346237 .feat .shadow-holder .wrap q strong {
margin-bottom:10px;
}
body div#devskin11346237 .feat {
text-align:center;
background:transparent;
padding:0;
margin:0;
}
/* ------------------------- FOOTER ------------------------- */
body div#devskin11346237 .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#devskin11346237 .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#devskin11346237 .buttons img {
padding-right:8px;
}
body div#devskin11346237 .buttons a:hover {
opacity:0.5;
filter:alpha(opacity=50);
_zoom:1;
}
/* ------------------------- HEADER ------------------------- */
body div#devskin11346237 .header {
background:transparent;
height:375px;
position:absolute;
top:-174px;
right:0;
left:0;
}
body div#devskin11346237 .header br {
display:none;
}
body div#devskin11346237 .header .pe-regular a {
display:block;
background:url('https://dl.dropboxusercontent.com/u/22307794/css/PE/PE-regular.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin11346237 .header .pe-art-history a {
display:block;
background:url('https://dl.dropboxusercontent.com/u/22307794/css/PE/PE-art-history.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin11346237 .header .pe-community-week a {
display:block;
background:url('https://dl.dropboxusercontent.com/u/22307794/css/PE/PE-community-week.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin11346237 .header .pe-handy-hints-tricks a {
display:block;
background:url('https://dl.dropboxusercontent.com/u/22307794/css/PE/PE-handy-hints-tircks.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin11346237 .header .pe-anime-manga a {
display:block;
background:url('https://dl.dropboxusercontent.com/u/22307794/css/PE/PE-anime-manga-week.png') no-repeat center top;
height:188px;
max-width:800px;
margin:0 auto;
text-align:center;
}
body div#devskin11346237 .header .board {
background:url('https://dl.dropboxusercontent.com/u/22307794/css/PE/board.png') top right no-repeat;
height:217px;
width:360px;
margin:0 auto;
padding:0;
position:relative;
top:-30px;
}
body div#devskin11346237 .header .board .stamp {
position:absolute;
top:60px;
left:25px;
}
body div#devskin11346237 .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#devskin11346237 .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#devskin11346237 .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#devskin11346237 .week:hover {
color:#fdfdfd;
text-shadow:#331f14 0px 1px 4px;
}
/* ------------------------- CALENDAR ------------------------- */
body div#devskin11346237 .calendar {
}
body div#devskin11346237 .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#devskin11346237 .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#devskin11346237 .calendar i:last-of-type {
margin-left:30px;
}
body div#devskin11346237 .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#devskin11346237 .calendar h2 {
color:#333333;
display:inline-block;
margin-left:20px;
}
body div#devskin11346237 .schedule {
margin-left:190px;
}
body div#devskin11346237 .schedule ul {
}
body div#devskin11346237 .schedule ul li {
list-style-type:none;
list-style-image:none;
line-height:25px;
margin-bottom:20px;
position:relative;
}
body div#devskin11346237 .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#devskin11346237 .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#devskin11346237 .header, body div#devskin11346237 .gr-top::after, body div#devskin11346237 .gr-top::before, body div#devskin11346237 .gr-top .author, body div#devskin11346237 .gr-top .gr .timestamp {
display:none;
}
}
@media only screen and (max-width: 767px) {
body div#devskin11346237 .gr-box {
margin-top:0;
padding:90px 30px 30px 30px;
position:relative;
}
}
@media only screen and (max-width: 767px) {
body div#devskin11346237 .gr-top {
margin:0;
}
}
@media only screen and (max-width: 767px) {
body div#devskin11346237 .gr-body .gr .grf-indent .text {
margin-top:-120px;
}
}
@media only screen and (max-width: 767px) {
body div#devskin11346237 .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#devskin11346237 .schedule {
margin-left:20px;
}
}
@media only screen and (max-width: 767px) {
body div#devskin11346237 .calendar h2 {
display:block;
margin-top:20px;
margin-left:0;
}
}
body div#devskin11346237 .mobile-header {
display:none;
position:absolute;
top:20px;
}
@media only screen and (max-width: 767px) {
body div#devskin11346237 .mobile-header {
display:block;
}
}
@media only screen and (max-width: 767px) {
body div#devskin11346237 .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#devskin11346237 .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
Your profile page is the first thing people will see when they click on your name, so it's very important to leave a good impression! This article will provide some useful tips and tricks for both premium and non-premium members who want to convert their profile into their own, unique page. First off, some Do's and Don'ts of profile decoration:
Do:
Don't:
- Add so many images that your profile takes forever to load
- Use garish or headache-inducing colors
- Make text difficult to read with dark backgrounds
Non-Premium Widgets
While many widgets are restricted or locked for non-premium members, there are still a variety of great widgets that you can add to your profile, even without a membership.
- Gallery: Featured Deviation*, Newest Deviations*
- Faves: Favorites*
- Prints: Wishlist*, Prints*, Featured Print*, I Just Sold...
- Misc: deviantID*, Critiques*, Donate Points*, Watchers, Friends, Journal, Journal History, Webcam, Groups, Commissions
The widgets marked with a * have a text box that can be customized with thumbs, images, gifs, stamps, plz accounts, and more (all are covered later on in the journal). If you click the pencil in the right hand corner of these widgets, there will be a text box that you can fill up with all sorts of awesome decorations, even if you are a not a premium member!
^ You can fill this text box with whatever content you'd like!
Premium Widgets
Premium Membership Required
Along with all of the widgets mentioned above, premium members can also use the following widgets to decorate their pages. Once again, widgets marked with a * have a textbox that can be used for adding decorations.
- Gallery: Gallery Folder*
- Faves: Collection*
- Misc: Custom*, Delicious Bookmarks*, Polls, Visitors, Twitter, Shoutbox, Forum
Custom Box Backgrounds
Premium Membership Required
One of the great features that comes with a premium membership is the ability to add backgrounds to your custom boxes. Click the little pencil button to edit your custom box, and copy the following into the text area:
TEXT HERE
Background from gasara.deviantart.com/art/Fest… by Gasara
Please note that custom box backgrounds are called that "custom box" for a reason. Backgrounds cannot be added to regular widgets the same way they are for the Custom Box widget. While the custom box background code will work in all widgets, the background will cover the content of your widget (ie. a background added to a Featured Deviation Widget will cover the featured deviation). Learn more about this in my Profile Presentation: Tips and Tricks article.
Links to get started:
Custom Box FAQ:
My background doesn't completely fill my custom box widget. How can I fix that?
This means that your background has too small of a width. You will have to manually fix that by making your background larger using some image software (Photoshop, etc.) or using a different image.
How can I have an animated custom box background?
You can use .png, .jpg, or .gif images for your custom box background. If you want an animated background, make an animated .gif image, and use the same custom box background code explained above to add it to your profile.
Custom Box Resources
Premium Membership Required
Now that we have our backgrounds, the next place we should visit is the Custom Box Resources gallery folder at CustomizeYourProfile . Here you can get all sorts of neat resources such as content holder boxes and customizable buttons. All you have to do is copy and paste the codes into your custom box.
Fonts
Remember that you don't have to stick with the default fonts for your profile. Make your profile more interesting by using different fonts!
To change the size: Text
To change the font: Text
To change the color: fav.me/d6i4keq
You can also use
, , , etc. to make different headings.
More detailed guide to fonts here:
Images and GIFs
To add images to your profile/journals use the following code:
The Image URL can be found by right-clicking over any image on the web and selecting the option that is most similar to "Copy Image URL". Please note that the Image URL is not the URL of the page that the image is on.
Image (not clickable): vs. thumb (clickable):
by miemie-chan3
You can also link images so that they act like buttons. For example, if you want to link an image like the one above to a different page (such as your commission journal), copy and paste the following:
Serves as a button to go to projecteducate
To change the size of your image:
You can change either width or height, or both:
Set only width to 200 pixels:
Set both width and height to 200 pixels:
Stamps
Let people know what kind of person you are by adding some stamps to your page! Just copy the thumb codes (:thumb000000000:) onto your profile/journal.
Links to get started:
Plz Decorations
There are tons of plz accounts for decorating out there, such as those that make borders like these:
These can be used on profiles, journals, and artwork descriptions by both premium and non-premium members. To use these, copy: :iconUSERNAME:
For example, the first divider can be added by typing: :iconbummy1::iconbummy2::iconbummy3:
Links to get started:
Dividers
Just copy the thumb codes (:thumb000000000:) onto your profile/journal.
Links to get started:
Music/Videos
See CypherVisor 's "How to add videos in custombox/journal?" section in his Tips and Tricks tutorial.
Groups
Looking for more resources? Check out the galleries of these groups which focus on collecting decorations for your page!
Now go and make your profile pages shine! 
Good luck, and I'd love to see how you guys decorate your pages! 
Part II: More tips and tricks
Want more decorating tips? Check out the next article for more profile tricks and examples of great design!
Comments: 1372
peachy-sweeties [2020-04-20 04:06:33 +0000 UTC]
is there ANY way to stretch out a custom box background? like make them wider? pretty much every custom box bg ive found is too thin D:
👍: 0 ⏩: 1
romantictheory In reply to peachy-sweeties [2020-05-11 01:40:11 +0000 UTC]
you might have a monitor with a higher resolution. i've had that problem, but slightly different. on my laptop, the bg would look completely fine, but when i used a different, larger monitor the image didnt fill the custom box all the way. so i think its your monitors screen resolution - or having an image with a really small resolution i guess.
i guess you could fix the issues by manually making the background image larger in whatever program you use and re upload it? thats all i can think of
👍: 0 ⏩: 0
SortaKindaPopular [2020-02-25 01:05:37 +0000 UTC]
i know how to do all of this but what are the small grey boxes in the bottom corner on some pagers that stay there while you scroll
👍: 0 ⏩: 0
tiredmoths [2019-12-02 15:15:55 +0000 UTC]
I'm so confused on how to do this still, is there any simpler instruction?
👍: 0 ⏩: 0
PamTheCreator [2019-08-29 00:44:45 +0000 UTC]
i have a question can i use fonts and size of text in the same time to have a beautiful font and big or small size
👍: 0 ⏩: 1
Balloro In reply to PamTheCreator [2019-10-13 17:42:27 +0000 UTC]
use This I Fuse The Codes And It Works !
<#font size="#">Text
👍: 0 ⏩: 2
Balloro In reply to Balloro [2019-10-13 17:43:11 +0000 UTC]
remove the #
👍: 0 ⏩: 0
silvercup24 [2019-07-11 00:47:26 +0000 UTC]
How do you make text bold?
👍: 0 ⏩: 0
averagehooligan [2019-06-29 18:24:42 +0000 UTC]
does anyone know how to copy an image URL? yes, i have read this entire PE but, whenever I try to copy an image's URL...i just get a huge messy URL.
👍: 0 ⏩: 1
The-Cannoli-Munk In reply to averagehooligan [2019-07-21 19:31:37 +0000 UTC]
Right-click on the image and click on "Copy Image URL"
That's the only way it's worked for me
👍: 0 ⏩: 1
averagehooligan In reply to The-Cannoli-Munk [2019-07-21 22:11:07 +0000 UTC]
yes, i'm aware. but, the thing is that the image URL always comes out ridiculously long.
👍: 0 ⏩: 1
PamTheCreator [2019-04-01 23:11:33 +0000 UTC]
i cant copy the right url i mean it cant see my own image
👍: 0 ⏩: 0
PamTheCreator [2019-04-01 23:02:25 +0000 UTC]
where found a url
and whats a css code
👍: 0 ⏩: 0
SameerPrehistorica [2018-12-28 19:57:23 +0000 UTC]
Is there an option to change the background 'green' color ?
👍: 0 ⏩: 1
VanillaPuddingu [2018-12-15 03:26:03 +0000 UTC]
Thank you for this !
👍: 0 ⏩: 0
Vixse [2018-11-29 17:29:30 +0000 UTC]
I have a question? Well a couple...
First alot of people have a customized background with their deviant id that's totally different than the normal one- like one had a oc I'm guessing with animated lightning striking in the back.. (I have core and haven't figured out how they do it.. I know it's coding but damn)
Also for my other question, Some people have... animated widgets on their page- kind of like a interactive picture with clickable text almost like a game for instance I stumbled across one deviant who had a wolf head picture- and beneath it was there texts like one would say, Shake it's paw, pet it's head, or talk to it. and if you click on talk to it and the wolf will change shape/animate based on the choice you did. it'll say "hello!" and you have the option to say "Hello back" or say goodbye. HOW THE HECK DO THEY DO THIS DX
👍: 0 ⏩: 0
kittngore [2018-10-03 21:08:29 +0000 UTC]
idk if theres anything wrong with my profile code ,,, bc it wont work ?? idk why
:thumb68 5223070:
:thumb7372 31565: elliot \ he / they \ gay :thumb 737231565:
:thumb6 83793166: :thumb7573 64724: :thu mb746170939:
these people are gay :
:ico nmossypath: :iconwei che1:
:thumb747 309814:
👍: 0 ⏩: 1
kittngore In reply to kittngore [2018-10-03 21:09:53 +0000 UTC]
without the spaces between things
👍: 0 ⏩: 1
kittngore In reply to kittngore [2018-10-03 21:10:04 +0000 UTC]
and plus your image code thing at the start
👍: 0 ⏩: 1
IceOfWaterflock In reply to kittngore [2018-10-03 22:13:39 +0000 UTC]
(i got the mention from the rabies pride flag adfghj) it seems to be working for me?
👍: 0 ⏩: 1
kittngore In reply to IceOfWaterflock [2018-10-03 22:25:47 +0000 UTC]
aasdhsjdjss ?? idk maybe its just something wrong with my profile ,,,,, i tried another code and it worked so idk
👍: 0 ⏩: 0
KristyArtz [2018-09-05 12:20:12 +0000 UTC]
Thanks! Is there a way I can my Deviant ID like how you set up yours?
👍: 0 ⏩: 0
Zelphire [2018-08-23 14:47:58 +0000 UTC]
I love this
👍: 0 ⏩: 0
the-moist-egg [2018-08-17 00:02:04 +0000 UTC]
how can I fix my commission button? I tried " width="200" and same for height but it didn't show up so I made is 2000 by 1000 which looks weird. also how can I make the button be over top of the background?
👍: 0 ⏩: 0
AlbinoFlight [2018-08-16 03:11:15 +0000 UTC]
what widget would i use for a non core code? would i make a journal and display it?
👍: 0 ⏩: 1
TwiforkedStars [2018-08-12 04:52:15 +0000 UTC]
Hello! I Cannot Edit My Page. Can You Please Help Me?
👍: 0 ⏩: 1
Mertlikatze In reply to TwiforkedStars [2018-08-15 18:16:52 +0000 UTC]
Page decorations are usually only for CORE members, however, there are some non-core one's if you search.
👍: 0 ⏩: 1
ForbiddenMilk [2018-08-09 02:35:41 +0000 UTC]
Everytime I do thumb codes on posts it doesn't work. It just shows the actual code and no image. Can anyone help me??
👍: 0 ⏩: 0
ares12 [2018-08-06 05:01:07 +0000 UTC]
I appreciate the tutorial, but I still don't understand. How do you change the font size again?
👍: 0 ⏩: 1
Saturn-Stardust In reply to ares12 [2018-08-06 19:04:58 +0000 UTC]
From my html knowledge, use
YOUR TEXT
(without the spaces) for large text, and just lower the number for a smaller text
👍: 0 ⏩: 1
ares12 In reply to Saturn-Stardust [2018-08-06 20:06:10 +0000 UTC]
Thanks, but still not working for me.
👍: 0 ⏩: 0
lvnd [2018-08-04 17:52:33 +0000 UTC]
Is there any way to add an image to your page that is not from DeviantArt?
👍: 0 ⏩: 1
Vodd In reply to lvnd [2018-08-05 23:10:43 +0000 UTC]
yes,
👍: 0 ⏩: 1
lvnd In reply to Vodd [2018-08-06 00:29:03 +0000 UTC]
Tysm! Lmao I’ve been confused for so long.
👍: 0 ⏩: 1
Vodd In reply to lvnd [2018-08-06 01:06:02 +0000 UTC]
Yeah no worries my dude lmaoo
👍: 0 ⏩: 0
Freckled-Jellyfish [2018-08-02 11:13:25 +0000 UTC]
does anybody know how to make a background none-moving ?
like you scroll the page but the background stays on the same place ?
It looked pretty cool but I don't know how to do it or if that's even possible on DA
👍: 0 ⏩: 1
Squishtube [2018-07-26 23:39:57 +0000 UTC]
Edit: Never mind I'm an idiot and didn't read the whole thing lol but if any body does have any tips I'd really appreciate it!
👍: 0 ⏩: 0
memelord1337666 [2018-07-08 05:46:25 +0000 UTC]
its the font thing non premium
👍: 0 ⏩: 0
sunsetloving [2018-06-22 21:44:30 +0000 UTC]
whats the code for text?
👍: 0 ⏩: 0
immabawsecat [2018-06-15 08:06:39 +0000 UTC]
Hidden by Commenter
👍: 0 ⏩: 1
ArtemisandRose In reply to immabawsecat [2018-07-23 08:23:00 +0000 UTC]
It doesn't force you, there's easy ways to still make a cool profile, like using the featured widget, which you can use to make a cool profile.
👍: 0 ⏩: 0
| Next => 
SimplySilent — PE: Decorating Your Profile
