Basics of CSS to modify your profile at M2E

Here is my effort to explain how to use CSS to modify your profile.

For your profile you will like to modify it in two ways either by giving some background image or by giving it some background color.

For background image:

• You can specify maximum two images
  • One that will appear behind Your Profile Name bar
  • Second that will appear behind the rest of your profile
  • You can specify one image to appear behind above both as well
  • So select your image
  • Either upload it to some site like photobucket etc or if it is on some site and you are sure that you can use it from there, save the link with you.

For background color:

• You need hexcode for the color to use.
• A very nice collection of colors can be found at:
  http://www.w3schools.com/css/css_colornames.asp

Now you have the things that we require so lets jump in to CSS. In CSS we define classes that get implemented on different sections of page. We will not go in to CSS details but will look in to CSS that can be used at M2E. In your Edit Profile layout, click any layout other than default and in text box above you will get CSS, lets play with it so that you can have your own look and feel.

Any thing that is written in between /* and */ are comments and don’t affect the layout.

First of all in our CSS we have

body {
background:url(http://www.mysite.com/mypic.jpg) center repeat-y;
/* custom cursor for IE, Firefox */
cursor: url(http://sites.google.com/site/ikbalouch/myself/icur.cur), auto;
/* scrollbar colours */
scrollbar-arrow-color:#43260C;
scrollbar-track-color:#E9E2CF;
scrollbar-shadow-color:#E9E2CF;
scrollbar-face-color:#E9E2CF;
scrollbar-highlight-color:#E9E2CF;
scrollbar-darkshadow-color:#ffffff;
scrollbar-3dlight-color:#ffffff;
padding-top: 0px; /* distance between top of page and content */
padding-bottom: 0px; /* distance between bottom of page and content */
}

body is the main class that get implemented at the whole page,

In above class the important properties is background:

For background if you want to have some color than simply make it:

Background: #FFFFFF     /* Replace FFFFFF with hexcode for your color */

Else if you want some image

background:url(http://www.mysite.com/mypic.jpg) /* Replace image url with url of image u selected */

Other class that we need to look into is:

div.content {
background: url(http://www.mysite.com/mypic2.jpg);
padding: 6px;
}

This class applies to your entire profile except the header bar that contains your Profile Name, so if you want two different images one for profile name bar and other for rest of the profile than in above class give url of the image you want to appear for main profile else if you want to let the image that was specified in body class than make background: transparent;

Other important class is:

div, td {
background: transparent;
font-family: Arial; /* almost global font */
font-size: 11px;
color: #6A6962;
}

In this class make background transparent and you can change the font or size of font or color of font for your profile.

Now we need to look in to:

div.page_header {
background: url(http://www.mysite.com/mypic2.jpg) repeat-x;
text-align: center;
line-height: 42px;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
color: #000000;
background-color: #FFFFFF;
padding: 0px 0px 0px 0px;
}

This class applies to the Profile Name bar, if you want to have different image for it specify it in background property otherwise make it background: transparent;

text-align property let you specify that either you want to see your name in center, left or right side.

You can specify font styles, weight, decoration in above class, background-color will be applied, if for instance the image you specified doesn’t exist than background-color will be visible.

Another class of our interest is:

td.header {
padding: 2px 2px 2px 2px;
border: 1px dotted #000000;
border-bottom: none;
background-image: none;
background-repeat: repeat-x;
color: #FFFFFF;
background: #FFFFFF;
background: url(http://www.mysite.com/mypic2.jpg);
}

This class applies on the titles of boxes that appear under your picture, so if you want to give them some other image as background specify its url in last line otherwise remove this line and specify the background color in the background line above last line.

For the tabs like Profile, Comments, Gifts etc if you want some image to appear in them than set the background property as background:url(http://www.mysite.com/image.jpg); in td.profile, td.profile_tab a, td.profile_tab a:hover and td.profile_tab2 a, td.profile_tab2 a:hover classes. If you want to have some color simply use background: #FFFFF and if nothing than make background: transparent.

td.profile_photo applies to your display image.

I hope I have explained most of the things that you need to customize your profile, if still you find any confusion, post it here or message me or write on my profile, I will surely get you out of it.