CSS Layout Snippets

/* This was made by awkward.violence, feel free to add me on mySpace ^^ */


/* This changes the background image of your page */
body{
    background-image:url(https://64.media.tumblr.com/68a2699dafeab7d8401f874f85ef2574/tumblr_pwgdd8hVGf1yt0azko1_400.gifv); /* URL can be customized */
    }


/* This changes the color of the "About me" and "Who I'd like to meet" headings */
h4{
    color:rgba(0,255,0,1); /* Font color */
    }


/* This changes the colors of the box headings, e.g.: "Username's blurbs" and "Username's fwiends space" */
div.rightHead, div.boxHead{
    background:rgba(0,255,0,1); /* Background color */
    color: black; /* Font color */
    }


/* This changes the background color and the font color of text boxes */
.short, .box, div.topLeft>div, .blogTitle > h2{
    background:rgba(0,0,0,0.8); /* Background color */
    color: white; /* Font color */
    }
div.box.comments div.box.blog, div.box.comments div.box.comments{
    background:none; /* This fixes an issue where the background would be rendered multiple times on the "blogs" page */
    }


/* This changes the background of your profile and blog comments */
.tableLeft{
    background:url(https://i10.glitter-graphics.org/pub/481/481810guaa5hwxt9.png); /* --- CUSTOMIZABLE BACKGROUND IMAGE --- */
    }
.tableRight{
    background:url(https://i10.glitter-graphics.org/pub/481/481810guaa5hwxt9.png); /* --- CUSTOMIZABLE BACKGROUND IMAGE --- */
    }


/* This changes the color of clickable links, e.g.:"[view more]" */
a:link, a:visited{
    color: white; /* Font color */
    }


/* This changes the font on your profile */
body, div#header{
    font-family: courier; /* Go here for font help: https://www.w3schools.com/cssref/css_websafe_fonts.asp */
    }


/* This changes the color and font of the "Home | My Fwiends etc." link bar */
div#hSub{
    font-family: courier; /* Font */
    color: white; /* Font color */
    }


/* This changes the text alignment of the right hand side of your profile */
.topRight{
    text-align: center;
    }


/* This replaces the text that says "Username is in your extended network" */
div.extended.box>a>h3{
    font-size: 0px;
    }
div.extended.box>a>h3:after{
    display: block;
    font-size: 22px;
    margin-block-start: 16px;
    margin-block-end: 16px;
    font-weight: bold;
    content: "---YOUR TEXT---";
    }


/* This adds a textbox on the left side below your profile info and your mp3 */
div.topLeft{
    position: relative;
    }
div.topLeft:after{
    content: "--- CUSTOMIZABLE TEXT ---";
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
    position: absolute;
    left: 10px;
    right: 10px;
    background-color: rgba(0,0,0,0.8); /* --- CUSTOMIZABLE BACKGROUND COLOR --- */
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    }


/* This hides the report button */
#report{
    display: none;
    }


/* This hides the block button */
#block{
    display: none;
    }


/* This changes the icon of the add button and allows for custom text */
#add{
    font-size: 0px;
    background-image:url(https://iconsplace.com/wp-content/uploads/_icons/00ff00/256/png/two-hearts-icon-3-256.png); /* Custom icon */
    background-size: contain;
    }
#add:after{
    content:"Add to fwiends"; /* Text can be customized */
    font-size: small;
    color:white; padding-left: 10px;
    }


/* This changes the icon of the message button and allows for custom text */
#sMsg{
    font-size: 0px;
    background-image:url(https://iconsplace.com/wp-content/uploads/_icons/00ff00/256/png/two-hearts-icon-3-256.png); /* Custom icon */
    background-size: contain;
    }
#sMsg:after{
    content:"hit me up :3"; /* Text can be customized */
    font-size: small;
    color:white; padding-left: 10px;
    }


/* This hides the URL box */
.url{
    display: none;
    }


/* This replaces the text of your friend counter */
.fwiendCounter{
    font-size: 0px;
    }
.fwiendCounter:after{
    font-size: 15px;
    font-weight: bold;
    content: "I'm everybody's friend :)";
    }