Re: [orion-dev] Styling a contributed page.link.category?

[Kris De Volder <kdevolder@xxxxxxxxxx>]

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 = window.top.document;
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = cssText;
        document.head.appendChild(css);
    }
       
    addCss(".flux-sprite {\n"+
        "    background: url('/images/cloud_icon_16.png') 12px;\n"+
        "    background-repeat: no-repeat;\n"+
        "    width:16px;height:16px;\n" +
        "}\n"
    );

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

Kris

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:
  - "orion.page.link.category"
  - "orion.page.link"

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("orion.page.link.category", null, {
id: "flux",
name: "Flux",
nameKey: "Flux",
nls: "orion-plugin/nls/messages",
imageClass: "core-sprite-sites",
order: 5
});
provider.registerServiceProvider("orion.page.link", null, {
id: "flux.deployer",
name: "CF Deployer",
category: "flux",
order: 10,
uriTemplate: "https://flux-cf-deployer.cfapps.io"
});

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?

Kris

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.