Report Blog Entry
Anything and everything code - I will keep updating
Remember to paste any codes for layout design under <style> and above </style>
Have fun customizing :)
• • • • • • • • • • • • • • •
Understanding root
logo-blue: navigation header background color
darker-blue: links
lighter-blue: navigation link background & contact/interest/url header/border color
even-lighter blue: interest category background color
lightest-blue: interest text background
dark-orange: title color for blurb, about me, who i'd like to meet, friends, and comments
light-orange: background color for blurb, friend title, comments title, & friends images in comments
even-lighter-orange: background color for comments
Understanding simple html whatevers
font-family: the font you want to use - if you're not picky, go for the classics like arial, times new roman, verdana, georgia, trebuchet ms, helvetica, courier
font-size: usually 8-11, just make sure you type 'px' after the number
font-style: to make something italic
font-weight: bold or normal
font-color: #colorcode;
background-color: #colorcode;
text-transform: uppercase or lowercase
letter-spacing: to space out your letters - start with 1 and work your way up until you're satisfied
text-align: left, center, right, or justify if you're OCD
line-height: distance between lines in a paragraph
padding: distance between the content and its surroundings
margin-top: moves everything up when the number is negative, brings everything down when the number is positive
margin-bottom: shortens the distance below the content when number is negative, there's more space below the content when number is positive
border: solid, dotted, or dashed along with #px for how thick you'd like the border
border-radius: rounds the edges
border-color: #colorcode;
background-repeat: repeat or no-repeat
background-size: 100% stretches the background to fit the whole page
background-attachment: fixed if you don't want the background to scroll with you
Adjust everything to your liking
Refer back to this section if something's confusing
• • • • • • • • • • • • • • •
Customization for the whole page
body {
background: #colorcode;
background-image: url("image url here");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
font-family: arial;
font-size: 11px;
text-transform: lowercase;
text-align: justify;
}
Images
simple image
<img src="your image url here">
if you'd like to adjust the size of the image
<img src="your image url here" width="#" height="#">
to shift the image to either left or right & have text wrap
<img src="your image url here" align="choose left or right">
Scrollbox
a simple scrollbox: change the height, background color, and font to your fitting
<div style="width: 100%; height: 50px; background-color: transparent; font-size: 11px; overflow: auto;">your text or images here</div>
comment scrollbox: adjust the height number to your liking
table.comments-table {
display: block;
height: 400px!important;
overflow-y: scroll;
}
Links
direct link to a different website
<a href="your website url here">your text here</a>
image with a link
<a href="your link here"><img src="your image url here"></a>
Cursor
you can start by looking here or other sites that offer the html code of cursors
tips for new coders: body is for the whole page, hover is for when your mouse browses over links
a:hover{cursor: url('your cursor url here'), auto;}
body {cursor: url('your cursor url here'), auto;}
Online icon
find an image or gif to replace your online now status
adjust height and width numbers to your liking
adjust margin-left lower to shift it left, higher to shift it right
.online {visibility: hidden;}
.online img {
content: url("your image/gif here");
animation-name: none;
visibility: visible;
margin-left: 31px;
height: 20px;
width: 100px;
}
For a cleaner look
this removes the blog section
div.blog-preview {display:none;}
this removes "about me" and "who i'd like to meet" headings
.right .section h4{display:none !important;}
this removes the url section
.url-info{display:none !important;}
this removes the blurb heading above blog entries
.blurbs .heading{display:none !important;}
this removes the "___ is your friend" section
.profile-info {display:none !important;}
this removes the interest category titles
.details-table td:first-child{display:none;}
this removes the link table
.table-section:last-of-type {display:none;}
this removes the entire friends and comment section
.friends {display: none;}
this removes the list/grid of friends
.friends-grid {visibility:hidden; display:none;}
Clean up your navigation
nav {
margin-bottom: 10px;
border-radius: 10px;
color: #colorcode;
text-align: center;
overflow: hidden;
border: dotted 1px;
border-color: #colorcode!important;
}
Clean up your footer
footer {
border-radius: 10px;
border: dotted 1px;
border-color: #colorcode;
background: #colorcode url("or image url here")!important;
}
Curved images
.profile .friends .person img {border-radius: 500px;}
Profile name customization
h1 {
background: url("image url here");
font-size: 20px!important;
font-family: arial;
font-weight:bold;
font-style: italic;
text-transform: lowercase;
letter-spacing: 5px;
text-align: center;
line-height: 39px!important;
color: #000000;
padding: 10px;
margin-top: -10px!important;
margin-bottom: -10px!important;
}
Profile photo border
here is an example of a border image i went with before: click me.
adjust the padding higher (to make your profile photo smaller) or lower (to make it bigger) to better fit inside the border image you decide on
.profile-pic{
background-image: url('your image url here');
background-size: 100%;
background-repeat: no-repeat;
}
.profile-pic img {
padding:20px;
border-radius: 500px;
background-size: contain;
opacity: 0.0;
}
Fun text effects
moving text to the left
<marquee behavior="scroll" direction="left">your text here</marquee>
moving text to the right
<marquee behavior="scroll" direction="right">your text here</marquee>
bouncing text
<marquee behavior="alternate">your text here</marquee>
blinking text
<blink>your text here</blink>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )