MyProfile Designer

 
Contents

- Page
- Text Link
- Text Hover
- Main Surroundings
- Main Body
- Top Header
- Main Header
- Main Menu Bar Background
- Main Menu
- Main Menu Text Link
- Main Menu Hover
- Main Menu Hover Text Link
- Main Menu Hover Text Link Hover
- Sections
- My Details Title
- Section Title Bars

Tips:

Making Contact Panel Menu Icons
- When making / changing contact panel menu icons, remember to set the width and height of the icon.

e.g.

.cntcsendmsg {

background: transparent url(http://coolwurkz.com/icons/mail.gif);

width: 30px;

height: 30px;

}

Setting your background to transparent
- Changing the background to transparent is easy, just set the background property of the "Main Body" and "Main Surroundings" profile parts.

Guidelines:


Page – This part defines the style of the page, used mostly for background settings like image background or background color.

Example:

/* ### - Page - ###*/

body {

background: url(http://coolwurkz.com/skins/Newday/style/bg.jpg) repeat-x fixed;

color:#000000;

text-align:center;

margin-left:auto;

margin-right:auto;

font-size:8pt;

font-family:verdana, arial, helvetica, sans-serif;

margin-bottom:0px;

margin-top:0px;

}

>> back to top


Text Link – Make your hyperlinks text colorful and eye catching with this settings.

Example:

/* ### - Text Link - ###*/

a {

color:#FF3300;

text-decoration:none;

}

>> back to top


Text Hover – This style makes the effects when the mouse hover over the hyperlink text.

Example:

/* ### - Text Hover - ###*/

a:hover {

color:#FF3300;

text-decoration:underline;

}

>> back to top


Main Surroundings – You can make borders around your main body or other style that will make your main body surroundings stylish.

Example:

/* ### - Main Surroundings - ###*/

#outer {

width:800px;

background:transparent;

border-left:4px #FFB514 solid;

border-right:4px #FFB514 solid;

margin-left:auto;

margin-right:auto;

font-size:8pt;

text-align:left;

}

>> back to top


Main Body – Create different styles to your profile's main body, this settings is often used when you want to create a transparent background or background color to your profile's main body background.

Example:

/* ### - Main Body - ###*/

#main {

background:#FE9F1D;

font-size:8pt;

color:#FFFF00;

border-left:1px #FFB514 solid;

border-right:1px #FFB514 solid;

}

>> back to top


Top Header – Take total control on your headers. Set the background color or image.

Example:

/* ### - Top Header - ###*/

#top {

background: url(http://coolwurkz.com/skins/Newday/style/hd-top.jpg);

width:100%;

border-left:1px #FFB514 solid;

border-right:1px #FFB514 solid;

color:#FFFF00;

}

>> back to top


Main Header – This style setting can make your header banner more trendy.

Example:

/* ### - Main Header - ###*/

.top2 {

background:#663300;

}

>> back to top


Main Menu Bar Background – Change the background color or your main menu's background image.

Example:

/* ### - Main Menu Bar Background - ###*/

#outer2 {

background:#2C3346 url(http://coolwurkz.com/skins/Newday/style/menu.jpg) repeat-x;

border-left:1px #FFB514 solid;

border-right:1px #FFB514 solid;

text-align:center;

}

>> back to top


Main Menu – This settings includes the background, color, height and width of your main menu.

Example:

/* ### - Main Menu - ###*/

.menu {

background: url(http://coolwurkz.com/skins/Newday/style/menu.jpg) repeat-x;

height:30px;

padding-left:5px;

padding-right:5px;

cursor:pointer;

color:#FF3300;

font-size:7pt;

text-decoration:none;

font-weight:bold;

}

>> back to top


Main Menu Text Link – You can change the color, font size and font decoration of the main menu text.

Example:

/* ### - Main Menu Text Link - ###*/

.menu a {

color:#FF3300;

font-size:7pt;

text-decoration:none;

font-weight:bold;

}

>> back to top


Main Menu Hover – Make some cool effects on your main menu hover mode.

Example:

/* ### - Main Menu Hover - ###*/

.menu2 {

background: url(http://coolwurkz.com/skins/Newday/style/menu.jpg) repeat-x;

height:30px;

padding-left:5px;

padding-right:5px;

cursor:pointer;

color:#2C3346;

font-size:7pt;

text-decoration:none;

font-weight:bold;

}

>> back to top


Main Menu Hover Text Link – Use this style to change your menu text effect.

Example:

/* ### - Main Menu Hover Text Link - ###*/

.menu2 a {

color:#11141A;

font-size:7pt;

text-decoration:none;

font-weight:bold;

}

>> back to top


Main Menu Hover Text Link Hover – This setting is often used to change the mouse over effect on your menu text.

Example:

/* ### - Main Menu Hover Text Link Hover - ###*/

.menu2 a:hover {

color:#11141A;

font-size:7pt;

text-decoration:underline;

font-weight:bold;

}

>> back to top


Sections – Create some cool styles on your about, music, books, movies, turn ons, turn offs and hobbies section.

Example:

/* ### - Sections - ###*/

.border2 { border:1px #FF3300 solid; background:#FDE378; color:#663300; }

>> back to top


My Details Title – Change the background settings on your “my details” captions.

Example:

/* ### - My Details Title - ###*/

.border13 { background:#FFB514; color:#FFFFFF; }

>> back to top


Section Title Bars – You can use this style to modify your title bars' colors, backgrounds and text style.

Example:

/* ### - Section Title Bars - ###*/

.mainmenu5 {

background:#2C3346 url(http://coolwurkz.com/skins/Newday/style/bar.jpg);

font-size:7pt;

color:#FFFFFF;

}

>> back to top

Developed By: Coolwurkz