Call us 7am to midnight (GMT)
02037453658

How to Create Custom cPanel Icons & Groups

  (by )

If you’re a web host and you’d like direct links from cPanel into your billing or support system this tutorial should give you all the information you need.

We will build some icons into a new group that only your direct (root owned) customers can see, this means the customers of your resellers won’t be affected and you’ll be able to keep your reseller hosting white label. If you want to create icons which everyone can see (including users of your resellers) just skip the Features List section at the end.

For this tutorial you will need root access to your cPanel/WHM powered server, you’ll also need to know how to use SSH,  have a copy of WinSCP or similar, have a text editor like textpad or notepad.

How to create a custom group for  your custom icons in cPanel

Before you create the custom icons in cPanel you should create a new group (or box) to put them in. If you want to put your custom icons into an existing group or box you can skip this step.

Creating the group is simple, we just create a new dynamicui config file in a specific directory.

  • SSH to your Server and login as root
  • Type: cd /usr/local/cpanel/base/frontend/x3/dynamicui/

My menu group will be called ‘Evohosting’ so I will call my config file dynamicui_evohosting.conf

  • Type: nano dynamicui_evohosting.conf

Paste the following: description=>MyGroup,file=>group_mygroup,group=>mygroup,groupdesc=>MyGroup, grouporder=>20,imgtype=>icon,subtype=>img,height=>32,type=>image,width=>32

At the moment your new group will be called ‘MyGroup’, if you’re familiar with Linux then the line above should be more or less self explanatory.

Note: all of the code above should be on one line, make sure Nano doesn’t paste it into two lines.

Have a play about and keep resaving that file until you have it how you want, however it won’t be displayed until you have put an icon into there.

As my group will be called Evohosting, this is how I’ll be editing that line: description=>Evohosting,file=>group_evohosting,group=>evohosting,groupdesc=>Evohosting, grouporder=>1,imgtype=>icon,subtype=>img,height=>32,type=>image,width=>32

  • Hit: CTRL-X then Y then Enter to save and exit.

How to create custom cPanel icons

Now we have created a group, lets put an icon into it. We’ll do this by creating a custom cPanel plugin. Create / find an image you’d like to use for your icon, it needs to be in PNG (not with a transparent background) or a JPEG. It also needs to be square, but it can be any size as cPanel will resize it for you.

1. Generate your cPanel Plugin

Fill in the form and upload your image to this web page.

The form isn’t very helpful so here are some hints for it:

  • Plugin Name: This is what your plugin filename will be – don’t use spaces. It will end up something like evobilling.cpanelplugin
  • Module Description: This will show up in the ‘Feature Manager’ when you or your resellers are choosing what features to assign your customers. Tip: If you’re making a button for your billing system then it might make sense to write your company name at the start. Ie: “Evo Billing System Link”, then your resellers will know not switch it on, and it’ll be easier to find for you when you’re activating it.
  • Feature Manager: Tick the box if you want this plugin to be available in Feature Manager, I would recommend doing this.
  • Display Name: This will be shown to the end user in their cPanel, so call it something user-friendly.
  • Display Group: This is where your icon will go in cPanel. If you want to put your icon into an existing group/box, then choose it from the dropdown box. If you want to put your custom icon into a new group/box then select ‘new’ (we edit this later).
  • Display Order: If you want your custom icon to display first in the group, hit 1, if last, hit 999.
  • Access URL: This is the URL which the user will be sent to once they click the icon. (relative to /usr/local/cpanel/base/frontend/<theme_name>/). If you want to use an external URL then for example enter http://www.evohosting.co.uk/
  • Anchor Content: This will be used for anchor tags. If you want to open a new window when the user clicks the icon then enter: target=”_blank”
  • On Click Event: You can enter some Javascript, this will be used in the anchor tags. I left this blank but for example you can enter something like: —JavaScript_HERE_; return false;
  • Plugin Icon: Upload the Image you want to use.

Once you have everything how you want it, press Submit to download your plugin file.

2. Tweak your plugin

The file you have downloaded is just a text file, open it with a text editor such as TextPad.

From here you can tweak the file how you want, for my tutorial I just want to tweak one line, this is because I want to put my icon into the ‘Evohosting’ custom group I created earlier.

Find: group:new

Replace with: group:Evohosting

Once you’re done, save the file, you can edit it on the server using nano or vim too.

3. Upload your Plugin to the server

Next you need to upload that plugin file to the server, I use WinSCP as it’s very quick. I’ll be uploading it to /~/ directory. Stuck? Upload it to a user’s home directory by using their FTP account, then in SSH cd /home/user/dir/ then chown root:root filename and mv filename /~/

4. Installing your Plugin

To install the plugin takes only a moment, for this tutorial I have named my plugin evobilling.cpanelplugin – replace that with whatever filename you ended up with. Do this in SSH:

  • cd /~/
  • /usr/local/cpanel/bin/register_cpanelplugin evobilling.cpanelplugin

Now your new icon/plugin has been created, unless you screwed up the plugin file (easily fixable) or the dynamicui_ config file (also easily fixable) then the custom cPanel icon should be visible to all users of your cPanel as long as they use x3. Login as a user and check.

If it’s not visible then check the two files to make sure the icon is in the correct group (I would guess the group name may be case sensitive):

5. Uninstalling your Plugin

If you want to change the icon then it’s also very easy, do the following in SSH:

  • cd /~/
  • /usr/local/cpanel/bin/unregister_cpanelplugin evobilling.cpanelplugin

Once uninstalled you can edit the .cpanelplugin file and re-install it (step 4) or even re-generate one (step 1) and re-upload it (step 2).

Feature Lists / Using ‘Feature Manager’ in WHM

Once you have your group and icons how you want them you can setup some feature lists.

  • Log in to WHM
  • Click ‘Feature Manager’
  • Add a new feature list, so enter the name of it (ie Evohosting) and press ‘Add’
  • Select all the features you want your users to have in this feature list and press ‘Save’.

Remove the Icons/Plugins from all the other feature lists.

  • In WHM: Click ‘Feature Manager’
  • Choose a feature list and press ‘Edit’
  • Remove the features you don’t want in that feature list and press ‘Save’.
  • Repeat until done, you probably want to remove the plugins from your ‘Default’ feature list too.

Add your users to your feature list.

  • In WHM: Click ‘Edit Packages’
  • Choose the package you want to edit.
  • Scroll down and change the Feature list to the one you just setup
  • Repeat as necessary (can take a while!)

Now you should have your icons in only the feature lists you want them, so you can continue to provide white-label reseller services to your customers.

2 Comments

  1. On September 26, 2009 at 8:21 am

    jim@silicone bracelets said:

    this will really help me a lot. i wanted to know about it. its just great. thanks for this helpful one.

  2. On September 24, 2009 at 8:51 pm

    Corporate Concierge services said:

    wow that’s wonderfully described. i appreciate it. thanks. its really useful and helpful as well.