Topic
4 replies Latest Post - ‏2013-05-14T14:28:23Z by Alessandro.Damiani
Alessandro.Damiani
Alessandro.Damiani
58 Posts
ACCEPTED ANSWER

Pinned topic [ICN 2.0.1] - CSS Editing

‏2013-05-07T13:31:05Z |

Hi,

I am trying to slightly modify the CSS files ICN comes shipped with in order to make it more similar to the color scheme the customer has for all other web applications.

I am however having some difficulties understanding what the most efficient procedure to do so could be.

I have noticed that these 4 css compressed files get linked by ICN within the header.jsp page:

"/ecm/widget/resources/dojo.css.jgz"
"/ecm/widget/resources/ecm.css.jgz"
"/ecm/themes/oneui/dojo.css.jgz"
"/ecm/themes/oneui/oneui.css.jgz"

Inside these 4 compressed files is a single css file, adding up all of the css definitions present in all the other css files (and they are many) present in /ecm/widget/resources (and subfolders) and /ecm/themes/oneui (and subfolders).

What should I change in order to change the appearance (mainly colors) of the desired interface parts?

Should I modify the single css files for the interface objects I want to change, or the complete css file stored within the jgz file?

Do I need to restart anything to make these changes visible?

 

Thanks in advance for the help!

 

Alessandro

  • damorris
    damorris
    765 Posts
    ACCEPTED ANSWER

    Re: [ICN 2.0.1] - CSS Editing

    ‏2013-05-09T14:26:07Z  in response to Alessandro.Damiani

    Any styles you change need to be done in your plugin.  Under no circumstances should you change the files in ICN directly since those will get overwritten with every release / fix pack / etc.

    I will ask someone on my team to comment on the best practices for how you should change the styles and apply them.  Sorry for the delay - for some reason the forum "following" isn't working and I'm not getting email notifications for new posts.

  • RobLee-IBM
    RobLee-IBM
    1 Post
    ACCEPTED ANSWER

    Re: [ICN 2.0.1] - CSS Editing

    ‏2013-05-09T15:52:38Z  in response to Alessandro.Damiani

    Hi Alessandro,

    Your best bet to make this happen is to use a web inspector like Firebug to focus in on the elements you want to update with your custom color scheme. Once you find the element that has the colors applied to it, create a css file in your plugin and copy the exact string that defines the class getting styled. Add your own colors and be sure to put important after each attribute just in case. It will look something like this:

    .oneui .widgetName .subClass .subClass {
         background: myNewColor !important;
    }

    Whatever the style has, copy it and change the values. As for making this work in your plugin, I will hand this off to one of our developers to make sure this will work correctly. Good luck!

    • damorris
      damorris
      765 Posts
      ACCEPTED ANSWER

      Re: [ICN 2.0.1] - CSS Editing

      ‏2013-05-09T17:47:43Z  in response to RobLee-IBM

      There is a simple example of adding a new style in the SamplePlugin (com.ibm.ecm.extension.sample.WebContent.SamplePlugin.css).  To override, you simply do what Rob says above.  You copy the style definition in to your plugin and then the !important will force your style to be applied.  That may not be necessary in all cases, but it should ensure that your style is applied instead.

      Also it's worth noting that you can look at all of the source for the OOTB styles in the explodedFormat directory under the install directory.  You can use that as another way to figure out what styles you want to override.

      Updated on 2013-05-09T17:53:41Z at 2013-05-09T17:53:41Z by damorris
      • Alessandro.Damiani
        Alessandro.Damiani
        58 Posts
        ACCEPTED ANSWER

        Re: [ICN 2.0.1] - CSS Editing

        ‏2013-05-14T14:28:23Z  in response to damorris

        Thanks for the replies, I hadn't figured out you could override the css definitions from within a plugin, it's definitely much more practical and safer than working on the OOTB css files!