tele7angelist's profile picture

Published by

published
updated

Category: Web, HTML, Tech

livespacehey (windows live spaces (2008) theme)

(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;
    }


0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )