Miix Profile Customization

Add custom styles here to customize your profile's backgrounds, wallpaper, colors. This textbox can be used for standard Cascading Style Sheets (CSS) to be added in to your profile. A list of some of the common styles can be found at the bottom of the page.

<style>

</style>



Where can I find free backrounds, free images, free graphics, free avatars, free wallpapers you can use to customize your profile? There are plenty of free photoshop, graphic, and image libraries available online.


Here is a list of some of the common CSS classes you can override. You can copy and paste pieces of blue code into the form above and submit to see how your profile will change colors, backgrounds, wallpapers etc. Don't hate me for the example palette I chose. ;)

WARNING: The are a lot more customization options available, you will need to dig around the code of a profile to see a full list of all available CSS classes etc. Please note that their names may change before we go into an Open Beta state.. anything I list here will not change however.

Wallpapers, Backgrounds, Borders
body, #mbody - Use these to set wallpaper, colors, font styles etc.
body, #mbody {
     background-color:Beige;
}
#page - Sets the background and fonts for the main profile page.
#page {
     border: none;
     background: none;
}
.moduleOuterBorder - Sets the background and border for the outer border of content modules.
.moduleOuterBorder {
    background: none;
    border: none;
}
.moduleHeader - Sets the background, border, and color for the content module header.
.moduleHeader {
    background-color: Yellow;
}
.moduleInnerBorder - Sets the background and border for the inner border of content modules.
.moduleInnerBorder {
    border: dashed 4px Purple;
    background-color: Salmon;
}
You can now set individual styles for the moduleInnerBorder which will override the global setting. The following are available:

.moduleBgDailyMiix - Daily Miixin'
.moduleBgAboutMe - About Me
.moduleBgMyDetails - My Details
.moduleBgMyMetrics - Profile Metrics - (ie. # of profile views etc)
.moduleBgPostedComment - Comments I've Made
.moduleBgMyPhotos - My Photos
.moduleBgMyFriends - My Friends
.moduleBgMyTags - My Tags
.moduleBgComment - My Friend's Comments

Examples:
.moduleBgMyMetrics{background:none;border:none;}

.moduleBgMyTags {
    background-image: url('http://www.miix.com/photo/ps/1710.jpg');
}
Default Profile Photo, My Photos, My Friends
.defaultImage - Sets the border and background for the default profile photo.
.defaultImage 
{
    border: dashed 1px red;
    background-image: url('../img/bg-psd.png');
}
.defaultImageTimeStamp - Sets the style of the default photo timestamp.
.defaultImageTimeStamp
{
    color:#red;
    font-style:italic;
}
.photoThumb - Sets the style of the My Photos thumbnails.
.photoThumb
{
    border: solid 4px Aqua;
    background-color:Maroon;
}
.photoThumbLink - Sets the style of the link effects for thumbnails. You don't need to add all of this, but if you do it makes a pretty cool effect. Check it out! :)
.photoThumbLink .photoThumb {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    -moz-opacity: 0.5;
}

.photoThumbLink:hover .photoThumb {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;
}

.photoThumbLink.photoThumb {
    border: 1px solid Black;
}

.photoThumbLink:hover .photoThumb {
    border: 1px solid White;
}

.photoThumbLink:hover{color: red;}
.friendThumb - Sets the style of the My Friends thumbnails.
.friendThumb
{
    border: solid 4px Aqua;
    background-color:Maroon;
}
.friendThumbLink - Sets the style of the link effects for thumbnails. Same as .photoThumbLink, try it... coding is the coooolest! :)
.friendThumbLink .friendThumb {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    -moz-opacity: 0.5;
}

.friendThumbLink:hover .friendThumb {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;
}

.friendThumbLink.friendThumb {
    border: 1px solid Black;
}

.friendThumbLink:hover .friendThumb {
    border: 1px solid White;
}

.friendThumbLink:hover{color: red;}
.friendNameLink - Sets the link color of Friend's names. By not setting this it will rely on the global link color (which you can set below using .gLink)
a:link.friendNameLink, 
a:visited.friendNameLink, 
a:active.friendNameLink {font-size:1em;color:Purple;}
a:hover.friendNameLink {color:#000000;}
Daily Miix
.dailyRowOdd - Sets the style for 'day' rows.
.dailyRowOdd {background-color:aqua;}
.dailyRowEven - Sets the style for alternating day rows.
.dailyRowEven {background-color:#00FF00;}
.dailyLink - Sets the color and effects for all links within the Daily Miixin' area. By not setting this it will rely on the global link color (which you can set below using .gLink)
a:link.dailyLink, 
a:visited.dailyLink, 
a:active.dailyLink {font-size:1em;color:Purple;}
a:hover.dailyLink {color:#000000;}
.dailyDate - Sets the text style for main dates.
.dailyDate {color:Red;}
.dailyDateTime - Sets the text style for date time stamp.
.dailyDateTime {color:Red;}
.dailyText - Sets the text style for daily miix entries.
.dailyText {color:Black;}
.dailySeparator - Sets the text style for separating daily miix records.
.dailySeparator {border-bottom: dashed 1px #DDDDDD;}
.dailyDateSeparator - Style for separating datetime stamps.
.dailyDateSeparator {text-align:right;border-bottom: dashed 1px #DDDDDD;}
My Posted Comments - (aka "Comments I've Made")
.postedCommentHeader - Sets the style for your Posted Comments header.
.postedCommentHeader {
    background-color:#FFFFFF;
    border-top:dashed 1px Orange;
}
.postedCommentRowOdd - Sets the style for comment rows.
.postedCommentRowOdd {padding:5px;background:none;border-top:dashed 1px Orange;}
.postedCommentRowEven - Sets the style for alternating comment rows.
.postedCommentRowEven {padding:5px;background:#FFFFFF;border-top:dashed 1px Orange;}
.postedCommentLink - Sets the color and effects for all links within the Posted Comments area. By not setting this it will rely on the .commentLink color and then the global link color (which you can set below using .gLink).
a:link.postedCommentLink, 
a:visited.postedCommentLink, 
a:active.postedCommentLink {font-size:1em;color:Purple;}
a:hover.postedCommentLink {color:#000000;}
Friend's Comments
.commentHeader - Sets the style for the Friend's Comments header.
.commentHeader
{
    color:Black; background-color:Red;
    border-bottom:solid 1px red;
}
.commentRowUnRead - Sets the style for unread comments (only you can see this style).
.commentRowUnRead {background-color: #FFFFDD;}
.commentRowOdd - Sets the style for comment rows.
.commentRowOdd {background-color:orange;}
.commentRowEven - Sets the style for alternating comment rows.
.commentRowEven {background-color:Yellow;}
.commentLink - Sets the color and effects for all links within the Friend's Comments area. By not setting this it will rely on the global link color (which you can set below using .gLink)
a:link.commentLink, 
a:visited.commentLink, 
a:active.commentLink {font-size:1em;color:Purple;}
a:hover.commentLink {color:#000000;}
Text - Fonts, Styles, Colors
.moduleTitle - Sets the style for all my module titles (ie. My Details, Comments I've Made, My Photos, etc).
.moduleTitle {
    color: Orange;
    font-weight:bold;
    font-style:italic;
}
.moduleExtra - Sets the style for extra module text (ie: John has 7 friends).
.moduleExtra {color:Black;}
.headLine - Sets the style for your Miix Headline at the top of your profile.
.headLine {color:Purple;}
.asl - Sets the style for your age, sex, location details.
.asl {color:Purple;}
.lastActiveOnline - Sets the style for your last active time when you are Online.
.lastActiveOnline {color:Green;}
.lastActiveOffline - Sets the style for your last active time when you are Offline.
.lastActiveOffline {color:Black;}
.txtAboutMe - Sets the style for 'About Me' text.
.txtAboutMe {color:Red;}
.txtMyDetails - Sets the style for 'My Details' text.
.txtMyDetails {color:Red;}
.txtMyDetailsValue - Sets the style for values of 'My Details' (ie. 5'11" (180 cm))
.txtMyDetailsValue {
    color:Black;
    font-weight:bold;
}
.txtMyMetrics - Sets the style for the block of text that tells you your profile views.
.txtMyMetrics {color:Red;}
.bDays - Sets the style for the upcoming birthdays.
.bDays {color:Red;}
.bDaysCount - Sets the style for the days until a birthday.
.bDaysCount {color:Red;}
.bDaysToday - Sets the style for any birthday today.
.bDaysToday {color:green;font-weight:bold;}
.bDaysTomorrow - Sets the style for any birthday tomorrow.
.bDaysTomorrow {color:orange;font-weight:bold;}
.tagTitle - Sets the style for Tag Titles (ie: Likes, Dislikes, General Tags) .
.tagTitle {color:Salmon;}
.txtPhotoTitle - Sets the style for titles of photos.
.txtPhotoTitle {color:Green;}
.txtPhotoDescription - Sets the style for description of photos.
.txtPhotoDescription {color:Green;}
.dailyDate - Sets the text style for main dates in the Daily Miix.
.dailyDate {color:Red;}
.dailyDateTime - Sets the text style for date time stamp in the Daily Miix.
.dailyDateTime {color:Red;}
.dailyText - Sets the text style for daily miix entries in the Daily Miix.
.dailyText {color:Black;}
.txtFriendComment - Sets the style for Comment text posted by Friends.
.txtFriendComment {color:Green;}
.commentDateTime - Sets the style for a comment's date and time.
.commentDateTime {color:Navy;}
Link Colors
.hLink - Sets the link color for the header links in the profile (ie. Search, Browse, My Profile etc).
a:link.hLink, a:visited.hLink, a:active.hLink {
    font-size:1em;color:#222222; text-decoration:none;
}
a:hover.hLink {color:#FFFFFF;background-color:#000000;}
.hPipe - Sets the color of the '|' symbol between header links.
.hPipe {color:White;}
.gLink - Sets the global link color for the profile.
a:link.gLink, a:visited.gLink, a:active.gLink {font-size:1em;color:#D64032;}
a:hover.gLink {color:#000000;}
.tag - Sets the link color for profile tags.
a:link.tag, a:visited.tag, a:active.tag {
    font-size:1.10em;
    color:Green;
    text-decoration:none;
}
a:hover.tag {
    color:White;
    text-decoration:none;
    background-color:#000000;
}
.friendNameLink - Sets the link color of Friend's names. By not setting this it will rely on the global link color (Note... this is defined in the My Friends area above, but have it added it here also)
a:link.friendNameLink, 
a:visited.friendNameLink, 
a:active.friendNameLink {font-size:1em;color:Purple;}
a:hover.friendNameLink {color:#000000;}
.commentLink - Sets the color and effects for all links within the Friend's Comments area. By not setting this it will rely on the global link color (Note... this is defined in the Comments area above also)
a:link.commentLink, 
a:visited.commentLink, 
a:active.commentLink {font-size:1em;color:Purple;}
a:hover.commentLink {color:#000000;}