MyBB Community Forums

MyBB Community Forums > 1.8 Support > General Support > User CP Menu Icons?
Full Version: User CP Menu Icons?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

SickMelody

2018-05-06, 05:51 PM
Any way to change User CP Menu Icons with custom?

Diamante

2018-05-06, 07:37 PM
Configuration -> Post Icons

SickMelody

2018-05-07, 09:01 AM
What you mean? This is for forum icons.. i want to change Control panel menu icons..

Diamante

2018-05-07, 09:06 PM
I understood differently.

Be more specific so that someone else can help you better.

User 6029

2018-05-07, 09:12 PM
User Cp Items are easy to change as are modcp items, etc..., you simply would need to modify your usercp specific css for individual images and remove the sprites

Lets take a snippet from  How about a classic theme?
/*
* MyBB: Classic Frontend Theme
*
* File: usercp.css File
*
* Author: MrBrechreiz & Vintagedaddyo
*
* MyBB Version: 1.8
*
* Theme Version: 1.0
*
*/

.usercp_nav_item {
    display: block;
    padding: 1px 0 1px 23px;
/*    background-image: url('themes/classic/sprites/usercp_sprite.png');  */ /** for sprite usage **/
    background-repeat: no-repeat;
}

.usercp_nav_composepm {
    background-position: 0 0;   /** for sprite usage **/
    background-image: url('themes/classic/usercp/composepm.png');  /** for individual icon usage **/
}

.usercp_nav_pmfolder {
/*    background-position: 0 -20px;  */ /** for sprite usage **/
   background-image: url('themes/classic/usercp/pmfolder.png');  /** for individual icon usage **/
}

.usercp_nav_sub_pmfolder {
    padding-left: 40px;
/*    background-position: 0 -40px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/sub_pmfolder.png');  /** for individual icon usage **/
}

.usercp_nav_trash_pmfolder {
    padding-left: 40px;
/*    background-position: 0 -60px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/trash_pmfolder.png');  /** for individual icon usage **/
}

.usercp_nav_pmtracking {
/*    background-position: 0 -80px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/pmtracking.png');  /** for individual icon usage **/
}

.usercp_nav_pmfolders {
/*    background-position: 0 -100px; */  /** for sprite usage **/
   background-image: url('themes/classic/usercp/editfolders.png');  /** for individual icon usage **/
}

.usercp_nav_profile {
/*    background-position: 0 -120px;   */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/profile.png');  /** for individual icon usage **/
}

.usercp_nav_email {
    padding-left: 40px;
/*    background-position: 0 -140px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/email.png');  /** for individual icon usage **/
}

.usercp_nav_password {
    padding-left: 40px;
/*    background-position: 0 -160px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/password.png');  /** for individual icon usage **/
}

.usercp_nav_username {
    padding-left: 40px;
/*    background-position: 0 -180px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/username.png');  /** for individual icon usage **/
}

.usercp_nav_editsig {
    padding-left: 40px;
/*    background-position: 0 -200px;   *//** for sprite usage **/
    background-image: url('themes/classic/usercp/editsig.png');  /** for individual icon usage **/
}

.usercp_nav_avatar {
    padding-left: 40px;
/*    background-position: 0 -220px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/avatar.png');  /** for individual icon usage **/
}

.usercp_nav_options {
/*    background-position: 0 -240px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/options.png');  /** for individual icon usage **/
}

.usercp_nav_usergroups {
/*    background-position: 0 -260px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/usergroups.png');  /** for individual icon usage **/
}

.usercp_nav_editlists {
/*    background-position: 0 -280px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/editlists.png');  /** for individual icon usage **/
}

.usercp_nav_attachments {
/*    background-position: 0 -300px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/attachments.png');  /** for individual icon usage **/
}

.usercp_nav_drafts {
/*    background-position: 0 -320px;   */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/drafts.png');  /** for individual icon usage **/
}

.usercp_nav_subscriptions {
/*    background-position: 0 -340px;   */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/subscriptions.png');  /** for individual icon usage **/
}

.usercp_nav_fsubscriptions {
/*    background-position: 0 -360px;   */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/fsubscriptions.png');  /** for individual icon usage **/
}

.usercp_nav_viewprofile {
/*    background-position: 0 -380px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/viewprofile.png');  /** for individual icon usage **/
}

.usercp_nav_home {
/*    background-position: 0 -400px;  */ /** for sprite usage **/
    background-image: url('themes/classic/usercp/home.png');  /** for individual icon usage **/
}

.usercp_notepad {
    width: 99%;
}

.usercp_container {
    margin: 5px;
    padding: 8px;
    border:1px solid #CCCCCC;
}

.pmspace {
    float: right;
    margin: -3px 5px;
}

.pmspace_container {
    background: #fff;
    border: 1px solid #ccc;
    width: 100px;
    display: inline-block;
}

.pmspace_used {
    display: inline-block;
    color: #fff;
    margin: -1px;
}

.pmspace_used.low {
    border: 1px solid #0c5a01;
    background: #167203;
}

.pmspace_used.medium {
    background: #ff862b;
    border: 1px solid #d7611e;
}

.pmspace_used.high {
    background: #e73c3c;
    border: 1px solid #c00;
}

.pmspace_unused {
    display: inline-block;
}

.pmspace_text {
    padding: 1px 5px;
    display: inline-block;
}

* you will need to edit the directory structure of the css file shared for example:
themes/classic/


With your directory existing structure:

Example:

images/usercp/home.png


So, in a nutshell, your end file would look similar to something like this:

/*
* MyBB: Classic Frontend Theme
*
* File: usercp.css File
*
* Author: MrBrechreiz & Vintagedaddyo
*
* MyBB Version: 1.8
*
* Theme Version: 1.0
*
*/

.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');
}

.usercp_notepad {
   width: 99%;
}

.usercp_container {
   margin: 5px;
   padding: 8px;
   border:1px solid #CCCCCC;
}

.pmspace {
   float: right;
   margin: -3px 5px;
}

.pmspace_container {
   background: #fff;
   border: 1px solid #ccc;
   width: 100px;
   display: inline-block;
}

.pmspace_used {
   display: inline-block;
   color: #fff;
   margin: -1px;
}

.pmspace_used.low {
   border: 1px solid #0c5a01;
   background: #167203;
}

.pmspace_used.medium {
   background: #ff862b;
   border: 1px solid #d7611e;
}

.pmspace_used.high {
   background: #e73c3c;
   border: 1px solid #c00;
}

.pmspace_unused {
   display: inline-block;
}

.pmspace_text {
   padding: 1px 5px;
   display: inline-block;
}
* hopefully that makes sense...

Individual "usercp" images:
[attachment=40292]

This will roughly give you an idea on how to remove sprite functionality and added individual image functionality via your css as you see the comments in the example explain commenting out sprites related and adding individual images..., etc..


The same can be done for the modcp..., let us have a look at:

/*
* MyBB: Classic Frontend Theme
*
* File: modcp.css File
*
* Author: MrBrechreiz & Vintagedaddyo
*
* MyBB Version: 1.8
*
* Theme Version: 1.0
*
*/

.modcp_nav_item {
    display: block;
    padding: 1px 0 1px 23px;
/*    background-image: url('themes/classic/sprites/modcp_sprite.png');  */ /** for sprite usage **/
    background-repeat: no-repeat;
}

.modcp_nav_home {
/*    background-position: 0 0;  */ /** for sprite usage **/
    background-image: url('themes/classic/modcp/home.png');  /** for individual icon usage **/
}

.modcp_nav_announcements {
/*    background-position: 0 -20px;  */ /** for sprite usage **/
    background-image: url('themes/classic/modcp/announcements.png');  /** for individual icon usage **/
}

.modcp_nav_reports {
/*    background-position: 0 -40px;   */ /** for sprite usage **/
    background-image: url('themes/classic/modcp/reports.png');  /** for individual icon usage **/
}

.modcp_nav_modqueue {
/*    background-position: 0 -60px;  */ /** for sprite usage **/
    background-image: url('themes/classic/modcp/modqueue.png');  /** for individual icon usage **/
}

.modcp_nav_modlogs {
/*    background-position: 0 -80px;  */ /** for sprite usage **/
    background-image: url('themes/classic/modcp/modlogs.png');  /** for individual icon usage **/
}

.modcp_nav_editprofile {
/*    background-position: 0 -100px;  */ /** for sprite usage **/
    background-image: url('themes/classic/modcp/editprofile.png');  /** for individual icon usage **/
}

.modcp_nav_banning {
/*    background-position: 0 -120px; */  /** for sprite usage **/
    background-image: url('themes/classic/modcp/banning.png');  /** for individual icon usage **/
}

.modcp_nav_warninglogs {
/*    background-position: 0 -140px;  */ /** for sprite usage **/
    background-image: url('themes/classic/modcp/warninglogs.png');  /** for individual icon usage **/
}

.modcp_nav_ipsearch {
/*    background-position: 0 -160px; */  /** for sprite usage **/
    background-image: url('themes/classic/modcp/ipsearch.png');  /** for individual icon usage **/
}

.modqueue_message {
    overflow: auto;
    max-height: 250px;
}

.modqueue_controls {
    width: 270px;
    float: right;
    text-align: center;
    border: 1px solid #ccc;
    background: #fff;
    padding: 6px;
    font-weight: bold;
}

.modqueue_controls label {
    margin-right: 8px;
}

.label_radio_ignore,
.label_radio_delete,
.label_radio_approve {
    font-weight: bold;
}

.modqueue_meta {
    color: #444;
    font-size: 95%;
    margin-bottom: 8px;
}

.modqueue_mass {
    list-style: none;
    margin: 0;
    width: 150px;
    padding: 0;
}

.modqueue_mass li {
    margin-bottom: 4px;
    padding: 0;
}

.modqueue_mass li a {
    display: block;
    padding: 4px;
    border: 1px solid transparent;
}

.modqueue_mass li a:hover {
    background: #efefef;
    border: 1px solid #ccc;
    text-decoration: none;
}


So again we see the basics of what needs to be done to get our desired result found below:


/*
* MyBB: Classic Frontend Theme
*
* File: modcp.css File
*
* Author: MrBrechreiz & Vintagedaddyo
*
* MyBB Version: 1.8
*
* Theme Version: 1.0
*
*/

.modcp_nav_item {
    display: block;
    padding: 1px 0 1px 23px;
    background-repeat: no-repeat;
}

.modcp_nav_home {
    background-image: url('images/modcp/home.png');
}

.modcp_nav_announcements {
    background-image: url('images/modcp/announcements.png');
}

.modcp_nav_reports {
    background-image: url('images/modcp/reports.png');
}

.modcp_nav_modqueue {
    background-image: url('images/modcp/modqueue.png');
}

.modcp_nav_modlogs {
    background-image: url('images/modcp/modlogs.png');
}

.modcp_nav_editprofile {
    background-image: url('images/modcp/editprofile.png');
}

.modcp_nav_banning {
    background-image: url('images/modcp/banning.png');
}

.modcp_nav_warninglogs {
    background-image: url('images/modcp/warninglogs.png');
}

.modcp_nav_ipsearch {
    background-image: url('images/modcp/ipsearch.png'); 
}

.modqueue_message {
    overflow: auto;
    max-height: 250px;
}

.modqueue_controls {
    width: 270px;
    float: right;
    text-align: center;
    border: 1px solid #ccc;
    background: #fff;
    padding: 6px;
    font-weight: bold;
}

.modqueue_controls label {
    margin-right: 8px;
}

.label_radio_ignore,
.label_radio_delete,
.label_radio_approve {
    font-weight: bold;
}

.modqueue_meta {
    color: #444;
    font-size: 95%;
    margin-bottom: 8px;
}

.modqueue_mass {
    list-style: none;
    margin: 0;
    width: 150px;
    padding: 0;
}

.modqueue_mass li {
    margin-bottom: 4px;
    padding: 0;
}

.modqueue_mass li a {
    display: block;
    padding: 4px;
    border: 1px solid transparent;
}

.modqueue_mass li a:hover {
    background: #efefef;
    border: 1px solid #ccc;
    text-decoration: none;
}


Individual "modcp" images:
[attachment=40294]
@sickmelody

I hope the previous has helped you solve your request. If not ,please, lemme know, as your request was fairly vague, hopefully the answer was broad enough to cover the full scope of what I hope was interpretted correctly as what you were asking on how to do. Smile

SickMelody

2018-05-08, 04:27 PM
Thank you very much!! It worked! Can i ask you one more help???

User 6029

2018-05-08, 09:21 PM
(2018-05-08, 04:27 PM)SickMelody Wrote: [ -> ]Thank you very much!! It worked! Can i ask you one more help???

Cool beans! Glad you got it all sorted out. Smile
MyBB Community Forums > 1.8 Support > General Support > User CP Menu Icons?