Adding an icon to your plugin

Discussion created by null32 on Apr 15, 2008

Case #26683


Status: In Progress
Case Type: /
Severity: /
Product: /
Component: /
Environment: /
Internal Discussion Link: /


I am writing a plugin for my company's Clearspace that takes your username for and have it go get your "Tags" and post them in a tab on your user profile. My question is how do you add a icon next to the title of the tab?


First off, AWESOME!  Do you feel like sharing? Any chance we could see it here on Jivespace?


Second, icon next to the title of the tab? I'm assuming you want an icon on the tab that you added to the users profile page? Is that right? If so, you'll want to add a cssClass attribute to the tab element in plugin.xml, here's an example tab:

<component id="user-profile">
  <tab id="delicious-profile" name=" Links"
     <description>View user's links</description>

and then you'll want to add a CSS file to your plugin:

<css src="/resources/delicious.css" />

and then in the CSS file:

.jive-link-delicious {
     padding: 2px 0 2px 22px;
    background: transparent url('../images/delicious.png') no-repeat top left;

assuming that you have an image 'delicious.png in the images folder of your plugin. Let me know if that doesn't work.





Thanks! I will try that out, it should do the job.


As of now that plugin has been put on a backburner from higher up. I'm still working on it in my free time and I would be glad to share it once I get up and running to my standards.

Hi AJ,

I am doing something simlar, by allowing users to Digg an ariticle or a post. How do I make the external link pop-up without leaving the community page?


thank you,


What do you mean by adding a CSS file?


Can you give an example please?



You can see an example of a CSS file added to a plugin here:


Also, FWIW, I wrote a delicious plugin awhile back, you can check out the source (which itself contains an example of including a CSS file) here: