Roundcube Community Forum

Themes & Styling => Theme Releases => Topic started by: sporkman on November 14, 2013, 03:03:17 AM

Title: Adding icons to the buttons strip (prefs pane - larry)
Post by: sporkman on November 14, 2013, 03:03:17 AM
I'm hoping this is the right place, I didn't see a "creating plugins" or "theme questions" sort of sub-forum, so here I am.

I have a few plugins in use that have their own settings sections.  As of now, they have no icons in the settings pane.  I had someone whip up some nice little icons for "vacation" and "change password", and then I looked at how I'd integrate them and was a bit surprised.  In what I assume is an effort to download as few images as possible when loading a page, throughout the "larry" skin I see that all the icons are combined in a large strip and then that strip is set as a background image for each button and positioned so that only the needed icon from the strip shows through.

I kind of get how that works, but I am at a total loss on how a plugin would then add it's own icon without totally replacing the stock "strip" of images.

Any good examples I can look at to see how you'd have a plugin supply it's own icon for the settings pane?
Title: Re: Adding icons to the buttons strip (prefs pane - larry)
Post by: SKaero on November 14, 2013, 08:09:06 AM
You can apply a new background image using css with the id/class name of the settings option.
Title: Re: Adding icons to the buttons strip (prefs pane - larry)
Post by: sporkman on January 11, 2014, 02:16:36 AM
You can apply a new background image using css with the id/class name of the settings option.

Can you elaborate on that a bit? :)

Any good examples of a plugin that works with larry and adds some new preference icons?  I think I need to see it being done to really grasp what to do with these giant image strips.
Title: Re: Adding icons to the buttons strip (prefs pane - larry)
Post by: JohnDoh on January 11, 2014, 09:42:37 AM
Unless you want to use one of the existing images then you just make your own, a regular image file. And then you put in some CSS to use that image for your settings tab, it does not affect any of the others. Something like:
Code: [Select]
#settings-sections #settingstabmyplugin a
{
  background-image: url(images/myimage.png);
}