3 Replies Latest reply on Sep 8, 2016 7:35 AM by JGonzalez

    Add styles to Coresight CSS directory?




      I have created some symbols in Coresight (according PI Coresight 2016 Extensibility Documentation).

      I have added some styles in the template html file of my symbols (sym-Mysymbol-template.html).

      I would like to centralise all these styles in the Coresight CSS directory.

      How to create my css file in Coresight without causing trouble in PI applications ?

        • Re: Add styles to Coresight CSS directory?
          Marcos Vainer Loeff

          Hi Julie,


          This is an interesting topic to discuss. I guess there are a lot of options. I will share my opinion.


          First of all, I agree with you that it is not a good practice to mix HTML and CSS within the same file. As a result, it makes sense to create CSS files with the styles.


          Although PI Coresight has already a default CSS folder, which is \Coresight\Content\css, I don't think you should add any new CSS file to this folder. The main reason is that it is preferable to separate the native PI Coresight files from the custom symbol files. Therefore, I would create a new css folder within the ext folder.


          So, I guess that your next question is: how should your custom symbols refer to your custom CSS files? One solution is to add the CSS files dynamically. Here is an example:


                     $.when($.getStylesheet('test.css'), $.getScript('test.js'))
                          .then(function () {
                              console.log('the css and js loaded successfully and are both ready');
                          }, function () {
                              console.log('an error occurred somewhere');



          Please let me know if this works for you!

          2 of 2 people found this helpful
            • Re: Add styles to Coresight CSS directory?
              Eugene Lee

              To add on to Marcos's answer, getStylesheet is not native to jQuery. You can get the code here.


              (function($) {
                $.getStylesheet = function (href) {
                  var $d = $.Deferred();
                  var $link = $('<link/>', {
                    rel: 'stylesheet',
                    type: 'text/css',
                    href: href
                  return $d.promise();


              Please correct me if I'm wrong Marcos.

            • Re: Add styles to Coresight CSS directory?

              Marcos and Steve, thank you for your answers.

              As it is not possible to create a scss file in the Coresight css directory, I will still have my styles inside the html file.