Single post in Welcome to the Recode!
Forum Index > Core > Announcements > News Archive > Welcome to the Recode! >
QUOTE originally posted by Sei
For everyone who's using DrWho's about me template, I've fixed* it appropriately so it works with the new width for about me's. Code can be found below
*It uses the colors I've used, however. You're welcome to edit the colors as needed.
DrWho template resize
[style]
.frame {
height: 515px;
width: 318px;
position: relative;
background-color: #3d395e;
}
.cover {
height: 100px;
width: 100%;
position: absolute;
background-image: url("IMG HERE");
opacity: 0.4;
transition: height 0.5s, opacity 0.5s, top 0.5s, opacity 0.5s;
-webkit-transition: height 0.5s, opacity 0.5s, top 0.5s, opacity 0.5s;
-o-transition: height 0.5s, opacity 0.5s, top 0.5s, opacity 0.5s;
-moz-transition: height 0.5s, opacity 0.5s, top 0.5s, opacity 0.5s;
}
.cover:hover {
height: 165px;
z-index: 69;
opacity: 1;
-webkit-box-shadow: 0 5px 5px rgba(0,0,0,0.75);
-moz-box-shadow: 0 5px 5px rgba(0,0,0,0.75);
box-shadow: 0 5px 5px rgba(0,0,0,0.75);
}
.cover:hover ~ .bar {top:200px; height:0px;}
.cover:hover ~ .pic {top: 130px;}
.cover:hover ~ .name {top: 176px;}
.bar {
height: 7px;
width: 100%;
position: absolute;
top: 100px;
background-color: #ffffff;
border: 1px dashed #847aa4;
transition: top 0.5s, height 0.5s;
-webkit-transition: top 0.5s, height 0.5s;
-o-transition: top 0.5s, height 0.5s;
moz-transition: top 0.5s, height 0.5s;
}
.pic {
height: 100px;
width: 100px;
border: 6px solid #ffffff;
border-radius: 100%;
position: absolute;
top: 30px;
left: 30px;
background-image: url("IMG HERE");
transition: top 0.5s;
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
-moz-transition: top 0.5s;
}
.name {
font-size: 20px;
font-family: Georgia, Geneva, sans-serif;
color: white;
position: absolute;
top: 76px;
left: 150px;
transition: top 0.5s;
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
-moz-transition: top 0.5s;
}
.nav1, .nav2, .nav3, .nav4, {
height: 30px;
width: 37px;
position: absolute;
top: 119px;
text-align: center;
font-size: 12px;
text-decoration: underline;
font-family: Georgia;
color: #4f4369;
padding-top: 9px;
cursor: default;
}
.nav1, .nav3, {background-color: #847aa4;}
.nav2, .nav4 {background-color: #b4aac4;}
.nav1 {
left: 143px;
border-top-left-radius: 50%;
}
.nav2{ left:180px;}
.nav3{ left:217px;}
.nav4{
left: 254px;
border-top-right-radius: 50%;
}
.nav2:hover ~ .text2, .text2:hover {z-index:5;}
.nav3:hover ~ .text3, .text3:hover {z-index:5;}
.nav4:hover ~ .text4, .text4:hover {z-index:5;}
.text1, .text2, .text3, .text4, {
height: 345px;
width: 298px;
position: absolute;
top: 149px;
left: 9px;
background-color: #bcaaf4;
padding: 10px 2px 2px 2px;
text-align: center;
font-family: Georgia, Geneva, sans-serif;
color: #4f4369;
overflow: hidden;
}
.text1 > a, .text2 > a, .text3 > a, .text4 > a, > a {
color: #0d425b;
}
.text1{ z-index:3;}
a {
color: #888888;
}
a:link {
color: #616eba;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #593fa7;
font-weight: bold;
text-decoration: underline;
}
.credit { width: 310px; font-size: 8px; color: white; font-family: Georgia, Geneva, sans-serif; position: absolute; top: 505px; text-align: right; padding-right: 9px; }
[/style][styleclass=frame][styleclass=cover][/styleclass][styleclass=bar][/styleclass][styleclass=pic][/styleclass][styleclass=name]Username[/styleclass][styleclass=nav1]nav 1[/styleclass][styleclass=nav2]nav 2[/styleclass][styleclass=nav3]nav 3[/styleclass][styleclass=nav4]nav 4[/styleclass]
[styleclass=text1][h3]Headline 1[/h3]Text 1[/styleclass]
[styleclass=text2][h3]Headline 2[/h3]Text 2[/styleclass]
[styleclass=text3][h3]Headline 3[/h3]Text 3[/styleclass]
[styleclass=text4][h3]Headline 4[/h3]Text 4[/styleclass]
[styleclass=credit]Free to use template by [url=http://pfq.link/@696][color=white]DrWho[/color][/url], code [url=http://pfq.link/~7MLY][color=white]here[/color][/url][/styleclass]
[/styleclass]
Will look like this: