Brvnx

CSS Layout Snippets

Sep 25th, 2020 (edited)
6,593
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* This was made by awkward.violence, feel free to add me on mySpace ^^ */
  2.  
  3.  
  4. /* This changes the background image of your page */
  5. body{
  6.     background-image:url(https://64.media.tumblr.com/68a2699dafeab7d8401f874f85ef2574/tumblr_pwgdd8hVGf1yt0azko1_400.gifv); /* URL can be customized */
  7.     }
  8.  
  9.  
  10. /* This changes the color of the "About me" and "Who I'd like to meet" headings */
  11. h4{
  12.     color:rgba(0,255,0,1); /* Font color */
  13.     }
  14.  
  15.  
  16. /* This changes the colors of the box headings, e.g.: "Username's blurbs" and "Username's fwiends space" */
  17. div.rightHead, div.boxHead{
  18.     background:rgba(0,255,0,1); /* Background color */
  19.     color: black; /* Font color */
  20.     }
  21.  
  22.  
  23. /* This changes the background color and the font color of text boxes */
  24. .short, .box, div.topLeft>div, .blogTitle > h2{
  25.     background:rgba(0,0,0,0.8); /* Background color */
  26.     color: white; /* Font color */
  27.     }
  28. div.box.comments div.box.blog, div.box.comments div.box.comments{
  29.     background:none; /* This fixes an issue where the background would be rendered multiple times on the "blogs" page */
  30.     }
  31.  
  32.  
  33. /* This changes the background of your profile and blog comments */
  34. .tableLeft{
  35.     background:url(https://i10.glitter-graphics.org/pub/481/481810guaa5hwxt9.png); /* --- CUSTOMIZABLE BACKGROUND IMAGE --- */
  36.     }
  37. .tableRight{
  38.     background:url(https://i10.glitter-graphics.org/pub/481/481810guaa5hwxt9.png); /* --- CUSTOMIZABLE BACKGROUND IMAGE --- */
  39.     }
  40.  
  41.  
  42. /* This changes the color of clickable links, e.g.:"[view more]" */
  43. a:link, a:visited{
  44.     color: white; /* Font color */
  45.     }
  46.  
  47.  
  48. /* This changes the font on your profile */
  49. body, div#header{
  50.     font-family: courier; /* Go here for font help: https://www.w3schools.com/cssref/css_websafe_fonts.asp */
  51.     }
  52.  
  53.  
  54. /* This changes the color and font of the "Home | My Fwiends etc." link bar */
  55. div#hSub{
  56.     font-family: courier; /* Font */
  57.     color: white; /* Font color */
  58.     }
  59.  
  60.  
  61. /* This changes the text alignment of the right hand side of your profile */
  62. .topRight{
  63.     text-align: center;
  64.     }
  65.  
  66.  
  67. /* This replaces the text that says "Username is in your extended network" */
  68. div.extended.box>a>h3{
  69.     font-size: 0px;
  70.     }
  71. div.extended.box>a>h3:after{
  72.     display: block;
  73.     font-size: 22px;
  74.     margin-block-start: 16px;
  75.     margin-block-end: 16px;
  76.     font-weight: bold;
  77.     content: "---YOUR TEXT---";
  78.     }
  79.  
  80.  
  81. /* This adds a textbox on the left side below your profile info and your mp3 */
  82. div.topLeft{
  83.     position: relative;
  84.     }
  85. div.topLeft:after{
  86.     content: "--- CUSTOMIZABLE TEXT ---";
  87.     overflow: hidden;
  88.     text-overflow: ellipsis;
  89.     white-space: wrap;
  90.     position: absolute;
  91.     left: 10px;
  92.     right: 10px;
  93.     background-color: rgba(0,0,0,0.8); /* --- CUSTOMIZABLE BACKGROUND COLOR --- */
  94.     padding-left: 10px;
  95.     padding-right: 10px;
  96.     padding-bottom: 5px;
  97.     padding-top: 5px;
  98.     }
  99.  
  100.  
  101. /* This hides the report button */
  102. #report{
  103.     display: none;
  104.     }
  105.  
  106.  
  107. /* This hides the block button */
  108. #block{
  109.     display: none;
  110.     }
  111.  
  112.  
  113. /* This changes the icon of the add button and allows for custom text */
  114. #add{
  115.     font-size: 0px;
  116.     background-image:url(https://iconsplace.com/wp-content/uploads/_icons/00ff00/256/png/two-hearts-icon-3-256.png); /* Custom icon */
  117.     background-size: contain;
  118.     }
  119. #add:after{
  120.     content:"Add to fwiends"; /* Text can be customized */
  121.     font-size: small;
  122.     color:white; padding-left: 10px;
  123.     }
  124.  
  125.  
  126. /* This changes the icon of the message button and allows for custom text */
  127. #sMsg{
  128.     font-size: 0px;
  129.     background-image:url(https://iconsplace.com/wp-content/uploads/_icons/00ff00/256/png/two-hearts-icon-3-256.png); /* Custom icon */
  130.     background-size: contain;
  131.     }
  132. #sMsg:after{
  133.     content:"hit me up :3"; /* Text can be customized */
  134.     font-size: small;
  135.     color:white; padding-left: 10px;
  136.     }
  137.  
  138.  
  139. /* This hides the URL box */
  140. .url{
  141.     display: none;
  142.     }
  143.  
  144.  
  145. /* This replaces the text of your friend counter */
  146. .fwiendCounter{
  147.     font-size: 0px;
  148.     }
  149. .fwiendCounter:after{
  150.     font-size: 15px;
  151.     font-weight: bold;
  152.     content: "I'm everybody's friend :)";
  153.     }
RAW Paste Data