Skip to main content

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index] [List Home]
Re: [orion-dev] Styling a contributed

Okay, so copying the images.css didn't actually work the way I expected. Worked fine in 'development' mode but in deployed mode the 'optimized' orion munges all the css into one big file per page.
So it didn't actually load images.css file anymore.

I came up with an even hackier solution. This js code added to the flux plugin:

    function addCss(cssText) {
        var document =;
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = cssText;
    addCss(".flux-sprite {\n"+
        "    background: url('/images/cloud_icon_16.png') 12px;\n"+
        "    background-repeat: no-repeat;\n"+
        "    width:16px;height:16px;\n" +

That actually works! But... Yuck! There's got to be a better way. No?


PS: This works for us but I think only because the flux plugin and our 'orion-node' are served on the same domain. It probably doesn't work if plugin is hosted on a separate domain.

On Wed, Oct 15, 2014 at 1:15 PM, Kris De Volder <kdevolder@xxxxxxxxxx> wrote:
I'm using the extension points:
  - ""
  - ""

To add a page link category and link.

This works, but what I can't figure out is if/how I can also add some css to orion pages to actually style the button for the newly defined category.

This is what I got now:

provider.registerServiceProvider("", null, {
id: "flux",
name: "Flux",
nameKey: "Flux",
nls: "orion-plugin/nls/messages",
imageClass: "core-sprite-sites",
order: 5
provider.registerServiceProvider("", null, {
id: "flux.deployer",
name: "CF Deployer",
category: "flux",
order: 10,
uriTemplate: ""

You can see that I have used 'core-sprites-sites' so it shows a little 'globe' icon for this category.

What I would like to do instead is use "flux-sprite" for imageClass. But then I also need to be able to
somehow add some css to the page that defines how to style the "flux-sprite" class.

Is this possible? If yes, how?


PS: I'm doing this in the flux orion-node server, in this context, since we are running our own server, I could just copy the css from orion.client code base and modify it to add my 'flux-sprite' class to "images.css" but this doesn't feel like the right solution (and wouldn't be an option if I created a 'standalone' plugin to be added to the orion instance running on orionhub.

Back to the top