Add a Custom Cursor to your Profile

Adding a custom cursor to you profile is pretty easy.

In you custom css section, look for the block of code that starts with "body {". The exact code will vary, but will look a little something like this:

body {
  background-color:black;
  font-family:-webkit-pictograph;
  font-weight:400;
  font-style:oblique;
  font-size:17px;
}

You will want to add your cursor code to that section. So make another line between those brackets ({ }), and paste the following code:

cursor:url(Image_url_goes_here),auto;

Just make sure to replace the "Image_url_goes_here" with the url to the image you want to use as your cursor.

So now your block of code will look something like this:

body {
  background-color:black;
  font-family:-webkit-pictograph;
  font-weight:400;
  font-style:oblique;
  font-size:17px;
  cursor:url(Image_url_goes_here),auto;
}

Here's a collection of different cursors, just right click on them and copy the image url (if using firefox, right click and copy the "image location"):

FREE Tagger Art Layout

This summary is not available. Please click here to view the post.

CSS Maker

I just wanted to recommend an awesome tool to help you customize your css codes.
It's called CSS 3.0 Maker and it has tools to let you modify colors, borders and radius, text and box shadows, transitions, animations, and more.

I use it all of the time when editing profiles.

Fade and Slide in Effect for Avatars

This effect was inspired from Wild4KittenTK 

Want your avatar to slide in upon your profile page loading like this...?

well here's how you do it...

FREE Black and Pink Custom Galleries CSS Code

For anyone who wants their galleries like this...

Just copy n' paste this to your custom css code:

/* Gallery */
.photo_gallery_preview {
  color:#FFCCFF;
  width:100px;
  height:150px;
  padding:3px;
  font-weight:bold;
  text-shadow:-4px 8px 9px #000;
  font-size:12px;
  background:rgba(0,0,0,1);
  outline:1px solid #000 -webkit-transition:all .5s ease;
  -moz-transition:all .5s ease;
  -o-transition:all .5s ease;
  transition:all .5s ease;
}

.photo_gallery_preview:hover {
  font-weight:bold;
  font-style:none;
  color:#FFF;
  padding:5px;
  background:rgba(204,0,102,1);
  -webkit-box-shadow:inset 0 10px 10px 0 #000;
  -moz-box-shadow:inset 0 5px 5px 0 #000;
  box-shadow:inset 0 5px 5px 0 #000;
  text-shadow:-4px 8px 9px #000;
  font-size:12px;
  position:relative;
  -moz-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  -webkit-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  -o-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
  -ms-box-shadow:0 18px 10px -9px rgba(0,0,0,0.7);
}

img {
  outline:1px solid #728F8F;
}

.photo_gallery_preview .photo_gallery_count {
  font-size:15px;
}

.photo_gallery_preview a,.photo_gallery_preview a:link,.photo_gallery_preview a:active,.photo_gallery_preview a:hover,.photo_gallery_preview a:visited {
  color:#FCFCFC;
  text-decoration:none;
  white-space:nowrap;
}

Custom Border Colors for MFC Galleries

For anyone who wants borders that change color on hover like this...

Here's a few different colors to choose from, just copy n' paste the code for the one that you want in your custom css, that's it!
 

Pink

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #FF0066;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Red

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #FF0000;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Light Blue

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #00FFFF;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Dark Blue

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #0000FF;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Green

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #00FF00;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Yellow

.photo_gallery_image {
  width:70px;
  height:70px;
  border:6px solid #000;
  border-radius:8px;
  borderradius:8px;
  -moz-border-radius:8px;
  -moz-border-radius:8px;
  margin:0 10px 4px -6px;
  -webkit-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 200ms cubic-bezier(0.250,0.250,0.750,0.750);
}

.photo_gallery_image:hover {
  border:6px solid #FFFF00;
  -webkit-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -moz-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -ms-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  -o-transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
  transition:all 50ms cubic-bezier(0.250,0.250,0.750,0.750);
}

Editing Halloween Profile (part 2)

Floating Ghosts:

For those of you who don't want to use the entire FREE Halloween profile layout I made, but would still like to use the floating ghosts, just ad the code below to your custom css section. (Click on any of the URLs to see what image they represent. Feel free to delete one or two of them from the code if the original is a bit too flashy for you.)

 .profile_section_content {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurlfBkEkEzP82eJdWp5viZA30xwgcaw3Y5V-anzwY-lLFmQRuGsm-xW54dSBr41_L1lazEO9hpQU7cBLT39WtCU7MN2KgjNCCYylDb_K4p8MJxl3dgClYq5fz1hZbdsrtmMOiy6MUXvI/s1600/ghost1.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFaHSXg7cXTnauEWJgcu_v65aAA8yWVyuNj4PwMu9osGWGZD4jhuo9d6CpPpCr5DFNhSpt6uVMausLtDdTq4P_FDgAJ6WtrokUBKXGJt0vi2Be5-kfKNwDK1oWw7ZcDfbGNeRwpz7WFxE/s1600/ghost2.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiacwef3GHbEKjkFSVeV61Q3cNUAjKKHU3mPVUgkdrS4VWlCrTZ6KdF7p61Mp2PIAy4qeTSmVCkO4Oni_WGItPql9rPVO01prrrxTxSWco3atbLXqqydsinaxIuAC840Y4CmeVjip300A4/s1600/ghost3.png);
  -webkit-animation:ghosts 20s linear infinite;
  -moz-animation:ghosts 20s linear infinite;
  -ms-animation:ghosts 20s linear infinite;
  animation:ghosts 20s linear infinite;
 }

@keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-moz-keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-webkit-keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  50% {
    background-color:rgba(0,0,0,0.7);
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
    background-color:rgba(0,0,0,0.8);
  }
}

@-ms-keyframes ghosts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

Answers to FAQs Section

I just made a new FAQs section with cute little effects.
Here's some screen shots:

To see it in action click here.

You can make your own images and adjust the codes to fit your profile if you'd like.

Here's the HTML code:

<div id="casinorules"></div>

<div id="faqs"><div id="analq"></div><div id="phoneq"></div><div id="squirtq"></div></div></a></div>
<a><div id="faqs1"><div id="fistq"></div><div id="pokerq"></div><div id="favsq"></div></div></a></div>


Here's the CSS code:

#casinorules {
  display:block;
  position:relative;
  margin-left:-50px;
  height:84px;
  width:1110px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNV3nLhzH9HFaxquvsnEkoGqelWinOlnc5f09X1c5ss39HRCpABD5gpI60JrLAXOQaJZGRFRmdMBWDliPW5v2C-7zUa-HBMTAAOVW0QLApvPiVSpqqprG-m_uWu-c5dCihj0RFNLl_p7Xg/s1600/LPr3l0UBslft.png) no-repeat top;
  overflow:hidden;
}


#faqs {
  display:inline-block;
  width:950px;
  height:170px;
  overflow:hidden;
  margin-left:30px;
  border-bottom:0 solid #000;
  -webkit-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  -moz-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
}

#analq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/iLHCZGY6rQ1A0.jpg) center top no-repeat;
}

#analq:hover {
  background-image:url(http://i.minus.com/ibaMlqI3jx0Zq5.jpg);
}

#phoneq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/ibNqPWWSzX2MF.jpg) center top no-repeat;
}

#phoneq:hover {
  background-image:url(http://i.minus.com/ib1p0meJIPqYaJ.jpg);
}

#squirtq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/iXQUIx7pp0D6D.jpg) center top no-repeat;
}

#squirtq:hover {
  background-image:url(http://i.minus.com/ir3q4j0t4DBQB.jpg);
}

#faqs1 {
  display:inline-block;
  width:950px;
  height:170px;
  overflow:hidden;
  margin-left:30px;
  border-bottom:0 solid #000;
  -webkit-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  -moz-box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
  box-shadow:0 28px 11px -7px rgba(50,50,50,0.0);
}

#fistq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/im7MhKv5J9lzQ.jpg) center top no-repeat;
}

#fistq:hover {
  background-image:url(http://i.minus.com/ibp193FjAEuxmV.jpg);
}

#pokerq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/i18qIzAKBvRTy.jpg) center top no-repeat;
}

#pokerq:hover {
  background-image:url(http://i.minus.com/iJiuRriyRen2e.jpg);
}

#favsq {
  width:308px;
  height:176px;
  float:left;
  display:block;
  background:transparent url(http://i.minus.com/iSaSDIi82bQ8e.jpg) center top no-repeat;
}

#favsq:hover {
  background-image:url(http://i.minus.com/iCNVB8kO58GM6.jpg);
}

FREE Floating Hearts Valentine's Day Effect

Inspired from css-mfc-pro's (Dan) falling snow flake effect for the holiday season.

I made a floating hearts effect to add to your profile for the month of February to celebrate Valentine's Day. 

Go to my profile to see it in action

If you would like to add this effect to your profile, all you have to do is copy n' paste the code below to your custom css section.

CSS Code:

.profile_section_content {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gJqU_DYZ5HfzjtpL9OP9TalkQHVAOVgN9JYv2VLsUdtURjr9rjNyCVU16ebuBQrHHwavGLX2a4inbxIr6W0bTEl3O1bIvtmoI9-4uBYDeA0WAbgSg2OfBvDRE2edilmM_e_Stv8tjKJZ/s1600/hearts1.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihdH8xiRP_v9ZjKOZ4TAZ3Qrq_6WKgUKzZtS7BTI2Ia6aOtL0RcUhwHnUXvipOwG9myKe73T2n6edY9OekhkSEFyWzMwrp6aNKSDgCQd7KbYd40Vhiorh0-ML0H0R-VmboT-eiVYy2kpr7/s1600/hearts2.png),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyzVTRcUJjY_EOHbc_sFFp-C2_5QhiJlMMPqxvnbFm2kXzCOxTYy6n4Kkau6iwP_KfcoUcez83fei90H5ZixVZkFODWiSZXqfGYvnvO11wudbssiUiaYpjbC0rPYujdAeIz_7cvDrEQHCl/s1600/hearts3.png);
  -webkit-animation:hearts 20s linear infinite;
  -moz-animation:hearts 20s linear infinite;
  -ms-animation:hearts 20s linear infinite;
  animation:hearts 20s linear infinite;
}

@keyframes hearts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-moz-keyframes hearts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }
}

@-webkit-keyframes hearts {
  0% {
    background-position:0 0px,0 0px,0 0;
    background-color:rgba(0,0,0,0.7);
  }
 
  50% {
    background-color:rgba(0,0,0,0.7);
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
    background-color:rgba(0,0,0,0.7);
  }
}

@-ms-keyframes hearts {
  0% {
    background-position:0 0px,0 0px,0 0;
  }
 
  100% {
    background-position:500px 1000px,400px 400px,300px 300px;
  }

Classes used for New and Legacy HTML Layouts on MFC

Links to MFC-CSS-Pro's Forum

Classes used for New HTML Layouts

Classes used for Legacy HTML Layouts

Hide Rate & Admire Section for New HTML Layouts

Here's the CSS code:

div#profile_friends.profile_subsection{display:none}

Hide Titles on MFC Sections

(Must be using the New HTML Layout)
Here's the CSS code:

#five_things_label, #for_fun_label, #craziest_thing_label, #be_anywhere_label, #know_me_label, {display:none;opacity:0}


Thanks for posting this Dan!

Hide Gallery Section for New HTML Layouts

For those of you not using the Legacy formats on MFC.
Here's the CSS code:

div#password_photo_gallery_control.holder, div#profile_password_photo_galleries.profile_section, ul#password_photo_gallery_previews.photo_gallery_previews, li.photo_gallery_preview, div.photo_gallery_name{display:none}

Thank you Dan!

Amazon, Instagram, & Twitter Twirling Transition Effect

If you would just like to use the amazon, instagram, and twitter link effects that are in the last post, but not the whole profile layout; here's where you can find the code...

https://gist.github.com/anonymous/7956163


See it in action here:
http://codepen.io/pokerbabe69mfc/full/zbHxu

Hide your camscore

Here's the css code:

div.content.about_me table tr:nth-child(2) { display: none; }

Add Border around your Schedule

To add a border around your schedule like on my profile, simply add this to your custom css code:

CSS Code:

#schedule { margin-top:376px!important; color:#ef18f2; margin-bottom:231px!important; font-weight:bold!important; font-size:.9em!important; width:510px; background:rgba(0,0,0,.8); border-radius:5px; border:1px solid #f21888; padding:10px!important; height:290px!important; box-shadow:0 0 15px 10px rgba(0,0,0,.6); margin-left:0!important; } #schedule td { height:20px!important; line-height:20px!important; font-weight:bold!important; font-size:.975em!important; } #schedule div { height:20px!important; line-height:20px!important; font-weight:bold!important; font-size:.8em!important; text-align:center!important; } 

Hide the Interests and Hobbies Lable

Just add this code to your custom CSS page:

.interests_info {
  display:none;
}

Hide the Time at the Corner of your Profile

 Hide the time stamp at the corner of your profile simply add this code to your custom css:

.clock,#clock {
  display:none;
}