Charmander's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog

View Profile

Report Blog Entry

code dump

anything and everything code - i will keep updating
remember to paste any codes for layout design under <style> and above </style>
edit your codes here before publishing them
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

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

the numbers i've put down fit perfectly for me in the interest section - change the height to your fitting
<div style="width: 100%; height: 50px; background-color: transparent; font-size: 11px; overflow: auto;">your text or images here</div>

links

simple direct link to a different website
<a href="your website url here">your text 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;}

comment scrollbox

adjust the height number to your liking
table.comments-table {
   display: block;
   height: 400px!important;
   overflow-y: scroll;
}

curved images

.profile .friends .person img {
   border-radius: 500px;
}

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;
}


6 Kudos

Comments

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