Report Blog Entry
Okay, so I would play around with this code one piece at a time, so you can get used to how it works. anything between { } is one piece. (dont forget the word or letters in the same line but before the {.
Each line within piece ends with a ; if it's in the style tags (style tags are <style> & </style>).
So, let's get started. All of this will go in your "About Me" section when you edit your profile.
If you copy/paste the whole thing, that's okay. Comments between /* comment */ or <!-- comment --> won't mess with the code. The compiler will just ignore it. I’ll put comments in a different color. You don’t have to copy them into your code unless you want to. I would leave most out... You still have to get rid of the square brackets in red in the actual code!!
SITES TO USE
colors: https://www.color-hex.com
default web fonts: https://www.w3schools.com/cssref/css_websafe_fonts.php
cursor
designs: https://cur.cursors-4u.net
<style>
body{
/* This will be the full page background. The skinnier box in the middle is something else. You can use gifs, colors, or still images. Images/Gifs WILL be tiled, so keep that in mind. */
background: /* erase this and put one of the following. If you want an image or gif, use “url([image url])” without the quotes or square brackets. If you want to use a color, use “#[hexCode]” without the quotes or square brackets. A hex code should be 6 characters. */ ;
/* example background codes:
background:#c4b1f2;
or
background:url(https://wallpapers.com/images/hd/neon-fuck-off-baddie-q2h0ua6yocx4u7s8.jpg);
*/
/* This will change your cursor if you want to… Replace [cursor url] with the cursor url. You don’t need the square brackets.*/
cursor: url([cursor url]), auto !important;
/* The beginning and end curly brackets are super important, so don’t forget to close out each section of code. */
}
/* profile background Yet again, you can use an image, gif, or color in the same way as before. */
.profile{
background: [img, gif, color];
}
/* Username at the top, above your profile pic */
h1{
color: #[hexCode];
font-family: “[family name]”;
background: transparent or #[hexCode];
padding: 5px;
/* text alignment. pick one. I recommend center. */
text-align: left or right or center;
border: 3px;
/* border style. I like ‘em all for various reasons. but pick one*/
border-style: sold or dashed or dotted or inset or outset or double or transparent
/* border radius is how curved you want the border to be. if you want a rectangle, leave this out. you can also use “border-radius-top-left” or “border-radius-top-right” or “border-radius-bottom-left” or “border-radius-bottom-righ”t to curve specific corners.*/
border-radius: [I recommend 25px];
}
/* navigation stuff. “nav .top” is where the search bar is. “nav .links” are the links like home, bulletins, blogs, forums, etc. */
nav .top{
background: [same as before];
font-family: “[family name]”
/* so while background changes the background color (duh), color changes the font color. */
color: #[hexCode]
border-radius: [however many pixels if wanted];
}
nav .links{
background: [];
border: [I recommend transparent for this one];
border-radius: [];
font-family: “[]”;
}
/* if you would like to change the little lines between the top links and footer links to something else (including emojis), use this snippet. */
nav .links li: not(:last-child)::after, footer . links li:not(:last-child)::after{
content: “[the character/symbol you want]”;
color: #[font color];
font-size: [probably 12-24px];
}
/* if you would like to change the opacity of the logo to make it better match your design, I’d recommend the following, but you can change the percent. */
nav img.logo{
filter: brightness(50%);
}
/* change the search bar and button… */
.search-wrapper input[type=text]{
background: [you can use transparent if you’d like];
border: 2px;
border-style: [same as before];
border-color:#[];
color: #[remember, this is font color];
}
button{
border-radius: [];
/* this is just my suggestion, but you can make a border by changing the number of px and adding the whole border-color and border-style. just make sure to add “padding:3px;” somewhere in this section. */
border:0px;
font-family: “[]”;
background: [];
color: #[font color];
}
/* links */
a {
font-family: “[]”;
color: #[];
}
a :hover{
color:#[];
}
/* the other headers. you can change the style of each separately if you would like. just put h2, then copy the whole block for h3, h4, and/or h5 */
h2, h3, h4, h5{
font-family: “[]”;
color: #[];
text-align: [center, left, right];
}
/* if you want to add a line to break a set of paragraphs up, you use a horizontal line. you can change the design here. */
hr{
height: 2px;
background: [];
border: [];
}
/* borders and backgrounds for various things (you can look at your profile to see what goes where. as with the headers, you can separate these at the commas to style different sections differently. */
.blurbs, .friends, .profile .table, .profile .table-section, .mood, .contact{
background: [];
border: [];
border-radius: [];
}
/* interests and comments tables */
/* this is the space between the boxes for your interests */
td{
background:transparent;
}
/* ngl, I have no clue what these next ones do… */
.table-section{
border: [];
border-radius: [];
}
.heading{
background: [];
color: #[];
/* you know how there’s an annoying white line between your profile and the top links? this is how to get rid of it. or you can change it to a different color or image. up to you. */
main{
background: transparent;
}
/* edit where it says to edit your profile or where it would say “[profile] is your friend */
.profile-info{
background: [];
border: [];
border-radius: [];
}
/* you can also customize what shit says */
/* “I’d like to meet…” */
.blurbs .inner .section:nth-child(2) h4 { font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{
content: “[what you want it to say]”;
font-size: 0.8rem;
}
/* “friends” */
.friends .heading {font-size:0; }
.friends .heading:before{
content: “[]”;
font-size:0.8rem;
}
/* where it says “say hello” or whatever under your profile picture */
.contact .heading{ font-size:0 }
.contact .heading:before{
content: “[]”;
font-size:0.8rem;
}
/* miscellaneous stuff */
/* if you would like to center your friends list */
.friends-grid{
text-align: center;
}
/* paragraph style */
p{
color: [];
font-family: “[]”;
}
</style>
<!-- put your actual about me here. I’ll put some example things you can do in addition to just typing your stuff… -- >
<img src= “[img url to add an img/gif]”>
<hr> <!-- adds a line between paragraphs -->
<br> <!-- creates a new paragraph. good to put between pictures you want on different lines -->
<center>[centers text between the tags]</center>
<iframe [insert iframe information. you can get this by clicking “embed” when you try to share a youtube video or playlist and in various other sites that I don’t know off the top of my head]></iframe>
And of course, you can just type paragraphs like this. No tags needed.
Comments
Displaying 0 of 0 comments ( View all | Add Comment )