My Layout Quick Codes

This is mainly for me to quickly grab from, but it'd be cool if anyone found my collection useful. The code is in blue, but I add comments below on how to edit.

Beginner code tip: There's an order to how your code needs to be written. Don't ask me what it is, because I'm new too, but if it doesn't work at first, fuck around with the order. Also, mess with the sizes of stuff, your images likely won't fit naturally. I use this site to preview my work!

Make Layout Wider:

}

.container {

width: 90%;

max-width: 1600px;

}

To change width, decrease "1600px"

Change Background:

}
body {
background-image: url("LINK");
background-attachment: fixed;
}

For Single Color BG:

}

body {

background-color: COLOR/HEXCODE !important;

}

Online Image:

}
.online { visibility: hidden; } .online img { content: url("LINK"); animation-name: none; visibility: visible; height: 20px; width: 90px; }

}

Contacting Icons:

}
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;

}
    .contact .inner a img {
        font-size: 0;
    }
    .contact .inner a img:before {
        font-size: 1em;
        display: block
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
        /* add to friends */
        content: url("LINK")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
        /* add to favorites */
        content: url("LINK")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
        /* send Message */
        content: url("LINK")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
        /* forward to friend */
        content: url("LINK")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
        /* instant message */
        content: url("LINK")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
        /* block user */
        content: url("LINK")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
        /* add to group */
        content: url("LINK")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
        /* report user */
        content: url("LINK")
    }

URL Info:

}
.profile .url-info{
background: url('LINK');
}
.url-info p{ opacity: 0.0; }
}

to remove it:

}

.profile .url-info{
display: none;

}

Profile Info/Friend Box

}

.profile-info {
display: flex;
align-items: center;
justify-content: center;
background-image: url('LINK');
}
.profile-info a{ opacity: 0.0; }
}

to remove it:

}

.profile-info {

display: none;

}

TV/Screen Lines:

body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

Image Above Blurbs:

.profile .blurbs:before {
      background-image: url('LINK');
      display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 200px;
      background-size: cover;
      margin: 10px 0px;

Scroll Box for Comments:

}
table.comments-table{
display: block;
height: 390px!important;
overflow-y: scroll;
}

7 Kudos

Comments

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

✽Juniper✽

1733170407

these are good codes!!!!! Thank you for posting them!!!!!!

Report Comment