Developing Skins

Written by Score: 1.0 - Comment: Direct, also from friends Clodo , Sunday, April 03, 2011 1:41:52 AM
First of all, you need to understand if you want a skin that can be available for all users on all portals, OR you want that's is "embedded" in your portal, specific.

Portal Embedded/Specific

If you want to embed, you can only change CSS styles.
  • Upload any image resources you need in the portal, as "file object" under some section.
  • Use an instance of the module "Custom CSS", and change any CSS class.
  • You can reference a portal file, for example
    .myclass { background-image:url("osiris://|file|31ABD4F512"); }
A great advantage is that your portal users don't need to install an additional skin.

Extension Skin

  • Launch the wizard of creation of a new extension.
    Osiris Window Menu -> Tools -> Developer -> Create Extensions
    Image
  • Follow the wizard. Specify name, description and author.
    This data are used for both extension and skin.
    In the Template page, specify the template "Skin".
    Image Image
  • The extension directory structure will be:
    manifest.xml - The XML manifest of the extension
    skin.xml - The XML manifest of the skin
    icon.png - Default icon. Change it.
    logo.png - Default logo. Change it.
    htdocs/css/skin.css - The CSS file. Edit it.
    scripts/script.py - The extension python script.
As first level of complexity, you can change CSS stylesheet. Look at advanced section below for more detailed skin customization.

Deploy an extension

  • Create a .zip file of the extension directory.The file name must be the ID of the extension, and the file manifest.xml need to be in the root directory.
  • Rename the ".zip" extension, in ".osiris" extension.
  • Announce it in our forum. For the moment, our team will manually add them on our extensions repository.Remember to specify if this extension is experimental/draft or is production/complete.
  • If you change something, remember to adjust the value of version in the manifest.xml.

Advanced - Resources / Images

(explain how HTDOCS works).

Advanced - Languages

(link to a specific articles about this)

Notes

The extension created by this tutorial it's derived from a python class IdeSkinSimple.It's possibile to derive a python class to a more based IdeSkin class, for example if you want to create more skin in the same extension.

Planned features

  • Color-sets: A skin may be contain different sub-styles (for example of different colors). Users in Osiris interface choose first the skin, and after the color-set.
  • Possibility for a portal admin to specify a skin raccomended or required/force (Osiris 1.X only). The skin will be auto-downloaded upon user confirmation.