Custom codes to pimp your Profile Page [colors, style and images]

[VDJ Radio]

PIMP PROFILE FULL EXAMPLES BELOW IN THIS THREAD


This thread will give some examples of style code to use in your profile page , if you want to "pimp it" to look better
Others with CSS skills and examples, can post in this thread too


Some general info for those who want to make their own without using examples below :

Color codes to use can be found here:
http://www.quackit.com/html/html_color_codes.cfm

Image host for images can be found here:
http://www.tinypic.com

General info about CSS codes can be found here:
http://htmlhelp.com/reference/css/properties.html

For profile page background, you can use a solid color, a picture or a texture picture...
For texture pictures, look here:
http://images.google.com/images?um=1&hl=en&client=firefox-a&rls=org.mozilla%3Anb-NO%3Aofficial&q=texture+backgrounds&btnG=Search+Images


To change your profile, go to your profile page and choose "My personal Profile" at the bottom menu
All the CSS style code goes into the box CUSTOMIZATIONS at bottom of your Profile Page edit view

TIPS
- If you use Firefox, download the Firebug plugin, and then you will be able to rigth-click elements in your profile page to see what name they have, to use for CSS codes. For example .windowbg2 for the comment area of your profile etc.
You can also change code with Firebug, to test what happens (without this being saved to your profile)

[VDJ Radio]

Some general purpose code for your profile page here 
For those who want to make their own style from scratch

All style code must start with a <style> tag, and end with a </style> tag.
Your CSS code, goes in between this tag.

Profile page background color CSS
body {background:colorcode;}
for example body {background:red;}

Profile page background image CSS
body {background.url(http://www.website.com/image.jpg)}

Hint: A good host for images, is www.tinypic.com

Color code for the profile boxes title area
.titlebg {background:colorcode;}
change color or colorcode for your likings

You can also change fonts (the text size, looks and color) for this and other areas of your profile by adding a font element
For example
.titlebg {font-size:16px; font-family:Verdana, Arial, Helvetica, sans-serif; color:green;}

Color code for the profile boxes content area
.windowbg {background:colorcode;}
for example .windowbg {background:green;}

Colorcode for the area around the boxes:
table#profile_info {background:colorcode;}
for example table#profile_info {background:green;}

Color code for the area outer area of your profile
#content {background-color:yellow;}
change color or colorcode for your likings

Color code for your profile page border color (the whole page)
#wrapper {background-color:yellow;}
change color or colorcode for your likings

Color code for the comment text area
.windowbg2 {background:green;}

[Dimenshia]

Awesome. This helps a lot. I'll let you know when I "Pimp" mine and you can see how it looks hehe

[VDJ Radio]

EXAMPLE : RETRO STYLE





Code for the customization box

<style>

/* set background image */
body {
background-image:url(http://i36.tinypic.com/29pqek8.png);
}

/* set border color of page */
#wrapper {background-color:#cbdaca;}

/* set color of boxes */
.windowbg {background:#8fae8d;}

/* border color for boxes and add size */
.bordercolor {background-color:#cbdaca;padding: 5px;}

/* set color text in boxes */
.windowbg {color:#383838;}

/* set color title box for boxes */
.titlebg{background:#cbdaca;}

/* set color for text in title box */
.titlebg{color:black;}

/* set color comment text area & text color */
.windowbg2 {background:#6d716d; color:white;}

/*set color for inner background */
#content {background-color:#484848;}


/* comment pages bar */
.catbg3 {background:#484848;}

/* set top menu colors */
maintab_back a, .maintab_back a:visited {
color:gray;
}

/* set link colors */
.windowbg a {color:#cbdaca;}
.windowbg a:visited {color:#cbdaca;}
.windowbg a:hover {color:yellow;}

/* set color for links in title box  that has link */
.titlebg a:link, .titlebg a:visited {
background-color:#cbdaca;
color:black;
}

/* Hides the login box */
#header_r  {display:none;}

</style>

[VDJ Radio]

EXAMPLE : PITCH BLACK





<style>body {background:black;}
.windowbg {background:black;}
#profile_right img {filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
.bordercolor {background-color:gray;}
#profile_right img:hover {filter:alpha(opacity=100);
opacity: 1.0;
-moz-opacity:1.0;
}

.catbg3 {background:black;}

.windowbg2 {background:black;}

#wrapper {background-color:black;}

maintab_back a, .maintab_back a:visited {
color:orange;
}

/* Hides the login box */
#header_r  {display:none;}


</style>

[VDJ Radio]

Awesome. This helps a lot. I'll let you know when I "Pimp" mine and you can see how it looks hehe

Cool   look forward to see that

[VDJ Radio]

EXAMPLE : AQUARIUS





<style>

/* set background image */
body {
background-image:url(http://www.freecaliforniawallpaper.com/images/textures/water1.jpg);
}

/* set border color of page */
#wrapper {background-color:#247184;}

/* set color of boxes */
.windowbg {background:#4aaeb0;}

/* border color for boxes and add size */
.bordercolor {background-color:#247184;padding: 5px;}

/* set color text in boxes */
.windowbg {color:black;}

/* set color title box for boxes */
.titlebg{background:black;}

/* set color for text in title box */
.titlebg{color:white;}

/* set color comment text area & text color */
.windowbg2 {background:##4AAEB0 ; color:white;}

/*set color for inner background */
#content {background-color:#0F0F0F;}


/* comment pages bar */
.catbg3 {background:black;}

/* set top menu colors */
maintab_back a, .maintab_back a:visited {
color:gray;
}

/* set link colors */
.windowbg a {color:gray;}
.windowbg a:visited {color:gray;}
.windowbg a:hover {color:gray;}

/* set color for title that has link in the title text */
.titlebg a:link, .titlebg a:visited {
background-color:black;
color:white;
}

/* Hides the login box */
#header_r  {display:none;}

</style>

[VDJ Radio]

EXAMPLE : PINK LOVE






<style>

/* set background image */
body {
background-image:url(http://i33.tinypic.com/2s1prig.jpg);
}

/* set border color of page */
#wrapper {background-color:#c06586;}

/* set color of boxes */
.windowbg {background:#e190b0;}

/* border color for boxes and add size */
.bordercolor {background-color:#c06586;padding: 5px;}

/* set color text in boxes */
.windowbg {color:black;}

/* set color title box for boxes */
.titlebg{background:black;}

/* set color for text in title box */
.titlebg{color:white;}

/* set color comment text area & text color */
.windowbg2 {background:#c06382; color:black;}

/*set color for inner background */
#content {background-color:##0F0F0F;}


/* comment pages bar */
.catbg3 {background:black;}

/* set top menu colors */
maintab_back a, .maintab_back a:visited {
color:#dd4d81;
}

/* set link colors */
.windowbg a {color:#dd4d81;}
.windowbg a:visited {color:#dd4d81;}
.windowbg a:hover {color:#dd4d81;}

/* set color for title that has link in the title text */
.titlebg a:link, .titlebg a:visited {
background-color:black;
color:white;
}

/* Hides the login box */
#header_r  {display:none;}

</style>

[//\\// ‖Ξ /∆]

Check mine out 
http://radio.virtualdj.com/forum/profile/neo

Code:

<div style="background:url('http://cdn.nextsmallthings.com/coolchaser.com/image-1348391.jpg');font-family:Cursive;color:FFFFFF;text-align:center">

<!--<div style="background-color:white;color:black;"><p>Make sure you checkout the page in both IE and Firefox! Different features in different browsers ;)</p></div>-->

<style type="text/css">
  p { font: 12pt cursive}
.bordercolor {background:none;}
.windowbg {background:black;}
.titlebg{background:none;background-image:url("http://www.signspecialist.com/lettering/green-yellow.jpg");
background-repeat:repeat-x;}
</style>

<style>body { background: url('http://radio.virtualdj.com/forum/profile_pictures/373_1217007290.png'); }

#profile_right img {filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}

#profile_right img:hover {filter:alpha(opacity=100);
opacity: 1.0;
-moz-opacity:1.0;
}
</style>

<!--<div style="background:url('http://cdn.nextsmallthings.com/coolchaser.com/image-1348391.jpg');" />-->

<style>
.maintab_back a {color:yellow;}
.maintab_back a:visited {color:yellow;}
.maintab_back a:hover {color:green;}
.maintab_back a:active{color:red;}
#wrapper {background-color:green;cursor:url("http://www.123cursors.com/freecursors/2211.ani")};
A:hover{cursor: url("http://www.123cursors.com/freecursors/2212.ani")};
.bordercolor {background-color:black;}
.windowbg {background:black; filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity:0.7;}

.windowbg:hover {filter:alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0);
opacity: 1.0;
-moz-opacity:1.0;
}
</style>

HINT: Also view in Internet Explorer to see how some of the code only works for IE.

Okay I admit.. not the cleanest code ever 

[VDJ Radio]

Neo's page is damn cool 


Here is a varation to show how to hide the background of a page to show wallpaper, and only show boxes


EXAMPLE : RED HOT FIRE






<style>

/* set background image */
body {
background-image:url(http://i37.tinypic.com/21t0cl.jpg);
}

/* hide page background */
#wrapper {background-color:transparent;}
#page_bg {background-color:transparent;}
#content {background-color:transparent;}

/* border color for boxes and add size */
.bordercolor {background-color:#c33102;padding: 2px;}

/* set color of boxes */
.windowbg {background:#5e0000;}


/* set color for title background and text  */
.titlebg, .titlebg a:link, .titlebg a:visited {
background: #5e0000;
color:black;
}

/* comment pages bar */
.catbg3 {background:#5e0000;}

/* set color comment text area & text color */
.windowbg2 {background:#5e0000; color:white;}

/* set link colors */
.windowbg a {color:yellow;}
.windowbg a:visited {color:yellow;}
.windowbg a:hover {color:yellow;}

/* set color for links in title box  that has link */
.titlebg a:link, .titlebg a:visited {
background-color:#5e0000;
color:black;
}

/* set top menu colors */
maintab_back a, .maintab_back a:visited {
color:red;
}

/* Hides the login box */
#header_r  {display:none;}

/* change profile member name */
.membername {font-size:20px;color:yellow;}


</style>

[DJ Norman Beats]

Make the profile page TRANSPARENT body and CLEAN top menu


/* Transparent simpler top menu */
#menu {background:none;}
#page_bg {background:none;}
div.seperator {background:none;}
.maintab_active_back a {background:none;}

/* Set website body color  */
#wrapper {background:none;}
#content  {background:none;}

/* Top Meny Link Colors */
.maintab_back a, .maintab_back a:visited {
color:white;
}
.maintab_active_back a, .maintab_active_back a:visited {
color:white;
}
.maintab_back  a:hover{
color:orange;
background:none;
}