I have seen people ask about this before, so here is a simple tutorial to replace the usercp sprites with individual images of your own.
In usercp.css
Find:
Replace with:
Now create your images with the respective names, upload them and you are good to go!
Or download the images below:
![.zip]( "Zip File")
usercp.zip (Size: 40.23 KB / Downloads: 0)
In usercp.css
Find:
Code:
.usercp_nav_item {
display: block;
padding: 1px 0 1px 23px;
background-image: url(images/usercp_sprite.png);
background-repeat: no-repeat;
}
.usercp_nav_composepm {
background-position: 0 0;
}
.usercp_nav_pmfolder {
background-position: 0 -20px;
}
.usercp_nav_sub_pmfolder {
padding-left: 40px;
background-position: 0 -40px;
}
.usercp_nav_trash_pmfolder {
padding-left: 40px;
background-position: 0 -60px;
}
.usercp_nav_pmtracking {
background-position: 0 -80px;
}
.usercp_nav_pmfolders {
background-position: 0 -100px;
}
.usercp_nav_profile {
background-position: 0 -120px;
}
.usercp_nav_email {
padding-left: 40px;
background-position: 0 -140px;
}
.usercp_nav_password {
padding-left: 40px;
background-position: 0 -160px;
}
.usercp_nav_username {
padding-left: 40px;
background-position: 0 -180px;
}
.usercp_nav_editsig {
padding-left: 40px;
background-position: 0 -200px;
}
.usercp_nav_avatar {
padding-left: 40px;
background-position: 0 -220px;
}
.usercp_nav_options {
background-position: 0 -240px;
}
.usercp_nav_usergroups {
background-position: 0 -260px;
}
.usercp_nav_editlists {
background-position: 0 -280px;
}
.usercp_nav_attachments {
background-position: 0 -300px;
}
.usercp_nav_drafts {
background-position: 0 -320px;
}
.usercp_nav_subscriptions {
background-position: 0 -340px;
}
.usercp_nav_fsubscriptions {
background-position: 0 -360px;
}
.usercp_nav_viewprofile {
background-position: 0 -380px;
}
.usercp_nav_home {
background-position: 0 -400px;
}Replace with:
Code:
.usercp_nav_item {
display: block;
padding: 1px 0 1px 23px;
background-repeat: no-repeat;
}
.usercp_nav_composepm {
background-image: url('images/usercp/composepm.png');
}
.usercp_nav_pmfolder {
background-image: url('images/usercp/pmfolder.png');
}
.usercp_nav_sub_pmfolder {
padding-left: 40px;
background-image: url('images/usercp/sub_pmfolder.png');
}
.usercp_nav_trash_pmfolder {
padding-left: 40px;
background-image: url('images/usercp/trash_pmfolder.png');
}
.usercp_nav_pmtracking {
background-image: url('images/usercp/pmtracking.png');
}
.usercp_nav_pmfolders {
background-image: url('images/usercp/editfolders.png');
}
.usercp_nav_profile {
background-image: url('images/usercp/profile.png');
}
.usercp_nav_email {
padding-left: 40px;
background-image: url('images/usercp/email.png');
}
.usercp_nav_password {
padding-left: 40px;
background-image: url('images/usercp/password.png');
}
.usercp_nav_username {
padding-left: 40px;
background-image: url('images/usercp/username.png');
}
.usercp_nav_editsig {
padding-left: 40px;
background-image: url('images/usercp/editsig.png');
}
.usercp_nav_avatar {
padding-left: 40px;
background-image: url('images/usercp/avatar.png');
}
.usercp_nav_options {
background-image: url('images/usercp/options.png');
}
.usercp_nav_usergroups {
background-image: url('images/usercp/usergroups.png');
}
.usercp_nav_editlists {
background-image: url('images/usercp/editlists.png');
}
.usercp_nav_attachments {
background-image: url('images/usercp/attachments.png');
}
.usercp_nav_drafts {
background-image: url('images/usercp/drafts.png');
}
.usercp_nav_subscriptions {
background-image: url('images/usercp/subscriptions.png');
}
.usercp_nav_fsubscriptions {
background-image: url('images/usercp/fsubscriptions.png');
}
.usercp_nav_viewprofile {
background-image: url('images/usercp/viewprofile.png');
}
.usercp_nav_home {
background-image: url('images/usercp/home.png');
}Now create your images with the respective names, upload them and you are good to go!
Or download the images below:
usercp.zip (Size: 40.23 KB / Downloads: 0)