Some cool css & html stuff for your MFC Profile

I'm gonna show you how to put some cool effects on your MFC profile using css and html codes.

To make your link image change when you scroll over it with your cursor:

If you look at my MFC profile you'll see that I have a image that links to my amazon wishlist that looks like this,



but when you scroll over it, it changes to this,






What you want to do is add this css code in the "customize profile" section:
(note: I highlighted the parts in red that you need to change if you want to change the link and the images)

.amazonlink{
     width: 500px;
     height:166px;
     display:block;
     background:transparent     url('http://25.media.tumblr.com/143165aafabe89068970153c6a0de7ef/tumblr_mqojnoBvEl1rjl0hwo2_500.jpg') center top no-repeat;
}
.amazonlink:hover {
   background-image:url('http://24.media.tumblr.com/65e9059f9021a11b7177b532881223cd/tumblr_mqojnoBvEl1rjl0hwo1_500.jpg');
}


Then you want to add this html code in the "edit profile" section where ever you want your images to appear on your profile,
(note: the part highlighted in red is where you want to paste your link instead)


'amazonlink' title='amazonlink'>



To make images glow/highlight when you scroll over them:

Again if you look at my profile you'll see that some of my images light up when you scroll over them.
You'll need to put this css code in your customize section:
(Highlighted in red is what you would need to change depending on what color you want. You can find the different codes by going here)

 .highlight {
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border:4px solid rgba(0,0,0, 0.0);
}

.highlight:hover {
    box-shadow: 0 0 10px rgba(255,0,255,1.0);
    -webkit-box-shadow: 0 0 10px rgba(255,0,255,1.0);
    -moz-box-shadow: 0 0 10px rgba(255,0,255,1.0);
    border:4px solid rgba(255,0,255,1.0);
}


Then you want to this to your html image that you want highlighted

< img src="mypicture.jpg" class="highlight"/>
substitute the mypicture.jpg for your images url. The part you want to add is the class="highlight".


Hide the Rate & Admire section:

I can't stand the cheap asses who always say "rated and admired you bb", like that actually does anything to help me. So I just prefer to not have it on there at all.

Just add this css code:

.content {
    padding:4px;
}
.about_me + .heading + .content  tr:nth-child(1) {display: none;}
.about_me + .heading + .content  tr:nth-child(2) {display: none;}
.about_me + .heading + .content  tr:nth-child(3) {display: none;}


So anyways I hope you found this useful. Thank you to Kradek for teaching me how to do this.