(update: changed the data urls to point to my file garden to make the code a little more digestible)
since posting layouts still hasn't been re-implemented and i wanted to make a tbg theme, i'm dumping my live spaces theme here
(please note that this layout is not responsive in the slightest. you'll be best off having a separate theme set with @media only screen and (max-width: whatever;)
if you care about mobile users)
* {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
body {
width: 100%;
background: white;
font-family: Verdana, Arial, sans-serif;
color: #444444;
}
p {
font-size: 11px;
}
a,
a:hover {
color: #0066A7;
}
.container {
width: 100%;
}
nav {
background: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/navShadow.png") repeat-x 0 40px;
}
nav .top {
height: 40px;
padding: 0 12px 0 8px !important;
border-top: solid 1px #999999 !important;
border-bottom: solid 1px #003251 !important;
background: #0066A7 linear-gradient( 0deg,
#ABD0E1 0%, #ABD0E1 4%,
#6BA4C5 4%,
#2B77A8 15%,
#025D97 35%,
#005C96 36%, #005C96 50%,
#3586B9 50%,
#7EB2D2 94%,
#AFCFE3 94%, #AFCFE3 96%,
#005082 96%, #005082 100%);
}
nav .top .left .logo {
width: 39px;
height: 37px;
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/jewel.png");
}
nav .top .left .logo:hover {
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/jewelHover.png");
}
nav .top .left::after {
content: "Windows Live™";
display: block;
font-size: 14px;
transform: translate(40px, -31px);
}
nav .top .center form {
width: 301px;
height: 24px;
margin: auto !important;
margin-top: 20px !important;
border: 1px solid !important;
border-color: #81B4D4 #61A0C9 #5394BD #61A0C9 !important;
position: absolute;
top: -12px;
right: -174px;
bottom: 12px;
left: 174px;
}
nav .center form label {
font-size: 0;
}
nav .center form label::before {
content: "";
font-size: 11px;
}
nav .center form .search-wrapper input {
width: 241px;
height: 22px;
padding: 2px 2px 5px 1px !important;
font-size: 11px;
border: 1px solid !important;
border-color: white white #1C5478 #285E82 !important;
transform: translate(-32px, 0);
}
nav .center form button {
padding: 1px 8px 4px 8px !important;
background: #7EAD67 linear-gradient( 0deg,
white 0%, white 4%,
#4E8F2E 4%,
#41871F 56%,
#7EAD67 56%,
#A7C797 98%,
white 98%, white 100%);
font-size: 0;
color: white;
border: 1px solid !important;
border-color: #CFE3C4 #99C383 #5DA253 #99C383 !important;
transform: translate(120px, -21px)
}
nav .center form button::before {
content: "Spaces";
font-size: 11px;
transform: translate(0, -1px)
}
nav .center form button::after {
width: 59px;
height: 19px;
content: " ";
position: absolute;
top: -2px;
left: -2px;
right: 0;
bottom: 0;
border: 1px solid;
border-color: #43708C #285E82 transparent #8F8F8F;
}
nav .top .right {
font-size: 0;
padding-top: 5px !important;
transform: translate(4px, 0);
}
nav .top .right a {
font-size: 11px;
padding: 1px 4px 2px !important;
}
nav .top .right a[rel=help] {
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/help.png");
transform: translate(0, 6px);
}
.logout-btn {
margin-right: 1px !important;
padding: 1px 4px 2px !important;
font-size: 11px !important;
font-family: Verdana, Arial, sans-serif;
}
nav .links {
width: 1010px;
height: 38px;
margin: auto !important;
padding: 11px 5px 0 14px !important;
background: transparent;
}
nav .links li::after {
display: none;
}
nav .links li a {
margin-right: 2px !important;
padding: 1px 4px 4px 4px !important;
border: 1px inset transparent !important;
outline: 1px inset transparent;
font-size: 11px;
color: black;
text-shadow: none;
}
nav .links li a:hover {
border: 1px solid #D9F7FF !important;
outline: 1px ridge #4F5F64;
background: white linear-gradient(#D5F2FA 30%, #A3E3F5 70%);
color: black;
text-decoration: none;
}
nav .links li.active a {
margin-bottom: 2px !important;
border: 1px solid !important;
border-color: #99B7C0 #B0D2DD #DBF7FF #B0D2DD !important;
outline: 1px groove #4F5F64;
font-weight: normal;
}
nav .links li.active a:has(.icon) {
border: transparent !important;
outline: transparent !important;
}
main {
width: 1000px;
margin: auto !important;
padding: 5px 0 0 0 !important;
color: #444444
}
main .left {
width: 187px !important;
padding-left: 8px !important;
}
main .left > * {
margin: 0 0 8px 0 !important;
padding: 8px !important;
border: 1px solid #e9eaf1 !important;
background-color: #FFFFFF;
}
.general-about .profile-pic {
width: 100%;
height: 102px;
}
.general-about .profile-pic img {
width: 96px;
height: 96px;
margin: 0 21% !important;
padding: 2px !important;
border: 1px solid #3A8AAE !important;
object-fit: cover;
}
.awards p {
margin-top: 4px !important;
}
.awards p a {
font-size: 11px;
color: #0066A7 !important;
}
.profile .mood p b {
font-weight: normal;
}
.profile .contact {
width: 179px;
height: 217px;
padding: 0 !important;
display: block !important;
position: absolute;
top: 83px;
transform: translate(805px, 0);
}
.profile .contact .heading {
display: none;
width: 100%;
margin-bottom: 8px !important;
font-size: 14px;
color: #0066A7;
background: white;
}
.f-row {
display: flex;
flex-direction: column;
}
.f-col {
width: 100%;
padding: 3px 8px 5px 13px !important;
font-weight: normal;
}
/* code yoinked from the fly away theme by leo */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
display: block;
}
.contact .inner .f-row .f-col a:before {
display: inline-block;
transform: translate(3px, 5px);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/profile.gif");
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/blog.gif");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/guestbook.gif");
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/photos.gif");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/lists.gif");
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/music.gif");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group */
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/friends.gif");
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://file.garden/ZHx3ZSN8xl0qbkaI/graphix/livespacehey/files.gif");
}
.profile .url-info {
display: none;
}
/* interests/links table full-width-ening lovingly plucked from cory's xp theme */
.left .table-section .details-table tr {
display: flex;
flex-direction: column;
}
.left .table-section .inner,
.left .table-section .details-table td,
.left .table-section .details-table td:first-child {
width: 100%;
background: white;
}
.profile .table-section .heading {
background: white;
}
.profile .table-section .heading h4 {
font-size: 0;
}
.profile .table-section .heading h4::after {
content: "Important Info";
font-size: 14px;
color: #0066A7;
}
.left .table-section .details-table tr,
.left .table-section .details-table tr:first-child {
padding: 3px 0px 2px 5px !important;
border-top: 1px solid #E9EAF1 !important;
}
.details-table td p {
color: #444444;
}
.details-table td:nth-child(2n-1) p {
font-weight: normal;
color: #0066A7;
}
.profile .blurbs .heading h4,
main .left span,
.profile h1 {
display: none;
}
main .right > *:not(.profile-info) {
width: 614px;
border: 1px solid #e9eaf1 !important;
margin: 0 0 8px 6px !important;
padding: 8px !important;
float: left;
}
.profile-info {
justify-content: left;
width: 614px;
border: 1px solid #e9eaf1 !important;
margin: 0 0 8px 6px !important;
padding: 18px 8px 14px 8px !important;
float: left;
}
.profile-info .inner,
.profile-info .inner h3,
.profile-info .inner h3 a {
color: #444444;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
.blog-preview h4 {
font-size: 0;
}
.blog-preview h4 a::after {
content: "Blog";
display: block;
margin: -3px 0 4px 0 !important;
font-size: 14px;
}
.blog-preview p {
padding: 7px 0 !important;
}
.blog-preview p a {
font-size: 12px;
font-weight: bold;
color: #0066A7;
}
.profile .blurbs .section {
font-size: 12px;
}
.profile .blurbs .section h4 {
color: #0066A7;
}
.profile .blurbs .section:nth-child(2) {
margin-top: 8px !important;
}
.profile .friends .heading {
font-size: 0;
}
.friends .heading a.more {
position: absolute;
width: 100%;
font-size: 14px;
color: transparent
}
.profile .friends p {
height: 17px !important;
}
.friends:not(#comments) {
width: 179px !important;
margin: 0 0 8px 4px !important;
padding-top: 7px !important;
background-color: #FFFFFF;
position: absolute;
float: right;
transform: translate(622px, 225px);
}
.friends:not(#comments) p b {
height: 24px;
font-size: 0;
}
.friends:not(#comments) .count::before {
content: "Friends (";
}
.friends:not(#comments) .count {
height: 24px !important;
font-size: 14px;
color: #0066A7;
}
.friends:not(#comments) .count::after {
content: ")";
}
.friends-grid {
margin: -12px 0 0 8px !important;
}
.profile .friends .person {
width: 73px;
margin-top: 20px !important;
}
.profile .friends .person p,
.profile .friends p:not(.count) {
height: 15px;
color: #444444;
font-size: 11px;
font-weight: normal;
text-align: left;
overflow: hidden;
line-height: 14px;
}
.profile .friends .person p {
margin: 0 0 4px -2px !important;
}
.profile .friends a:hover {
text-decoration: none;
}
#comments {
padding-top: 7px !important;
}
.profile #comments .friends p {
height: 0px !important;
}
.profile .friends .person img:not(.icon),
.comments-table td:first-child img:not(.icon) {
width: 54px;
height: 54px;
margin-top: 4px !important;
padding: 2px !important;
border: 1px solid #3a8aae !important;
object-fit: cover;
}
#comments .inner p {
height: 50px;
}
#comments .inner p b {
font-size: 0;
}
#comments .inner p b a:nth-child(3) {
font-size: 0;
}
#comments .inner p b a:nth-child(3)::after {
content: "Guestbook";
font-size: 14px;
}
#comments .inner p b a:nth-child(4) {
font-size: 0;
}
#comments .inner p b a:nth-child(4)::after {
content: "Thanks for visiting!";
display: inline-block;
position: absolute;
font-size: 11px;
font-weight: normal;
color: #444444 !important;
text-decoration: none;
z-index: 1;
transform: translate(-83px, 26px);
}
.comments-table {
width: 567px !important;
margin: auto !important;
margin-top: 20px !important;
}
.comments-table td {
background: white !important;
}
.comments-table td a img:not(.icon) {
transform: translate(0, 13px);
}
.comments-table td:first-child {
text-align: left;
width: 84px;
}
.comments-table td:nth-child(2) {
padding-top: 20px !important;
}
.comments-table tr {
margin-bottom: 15px !important;
}
.comments-table p:nth-child(2) {
transform: translate(0, -6px);
}
.comments-table td a p {
width: 483px !important;
font-weight: bold !important;
color: #0066A7 !important;
position: absolute;
transform: translate(84px, 16px);
}
.comments-table .report {
margin: 0 !important;
}
.comments-table td br {
display: none;
}
.comments-table td button {
background: white;
font-size: 11px;
color: #0066A7;
}
.awards p a:hover,
.profile .table-section .heading h4:hover::after,
#comments .inner p b a:nth-child(3):hover::after,
.comments-table td a p:hover,
.comments-table td button:hover,
.comments-table td p.report a:hover,
.comment-replies .comment-reply p small a:hover,
.comment-replies .comment-reply p small a b:hover {
text-decoration: underline;
}
#comments .comments-table td p {
height: auto !important;
}
.comment-replies .comment-reply p {
height: auto !important;
margin: 8px 0 0 0 !important;
}
.comment-replies .comment-reply p small {
font-size: 11px;
}
.comment-replies .comment-reply p small a b {
font-size: 11px !important;
}
footer {
border-top: 1px solid #e9eaf1 !important;
padding-bottom: 1px !important;
background-color: white;
}
footer p {
font-size: 0;
}
footer a {
color: #444444 !important;
}
footer ul {
padding: 9px 8px 11px 8px !important;
float: right;
}
footer ul li {
font-size: 11px;
}
footer .copyright {
padding: 9px 8px 11px 8px !important;
font-size: 11px;
text-decoration: none;
float: left;
}
Comments
Displaying 0 of 0 comments ( View all | Add Comment )