Rollover mod

Subject: Rollover mod Tue Jan 25, 2011 12:55 am

This is off of a few people.

Alright because this is a ID, you'll be using your '#' symbol to declare the command.

Here is an example of a rollover..

The codes are as such..

Code:: #i_icon_mini_index {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_index:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}

#i_icon_mini_search {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_search:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}

#i_icon_mini_portal {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_portal:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}

#i_icon_mini_faq {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_faq:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}

#i_icon_mini_login {
background-image: url(LINK);
width: XXpx;
height:XXpx;
}
#i_icon_mini_login:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}

#i_icon_mini_register {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_register:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}

#i_icon_mini_members {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_members:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}

#i_icon_mini_calendar {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_calendar:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}

#i_icon_mini_logout {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_logout:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_message {
background-image: url(LINK);
width: 80px;
height: 40px;
}
#i_icon_mini_message:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_new_message {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_new_message:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_profile {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_profile:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_groups {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}
#i_icon_mini_groups:hover {
background-image: url(LINK);
width: XXpx;
height: XXpx;
}

Replace LINK with you're direct link to your image for your button. Then Replace 'XX' with your size of your button, make sure your normal button and your hover are the exact same or you'll end up with a contorted button.

Subject: Re: Rollover mod Tue Jan 25, 2011 1:54 am

Realy usefull stoff thnx 4 tha share EE Rep +

Subject: Re: Rollover mod Tue Jan 25, 2011 5:29 am

It should also be noted, that if you do this for your navbar, you have to go into the Admin Panel, go to Pics Management, and for ANY picture that you added a hover to, you have to remove whatever picture is saved for that button, and click the save button. If you have an image listed in Pics Management, it will override the CSS and fuck your whole navbar up (mainly because the navbar image wont change, and if the dimensions are different, it will resize or cutoff the image in the navbar) So any buttons that you add a hover effect to, remove the image link from that button in Pics Management.

Subject: Re: Rollover mod Tue Jan 25, 2011 5:29 pm

I have no idea what this is. Someone please explain, thanks