Force Style Sheet Change?

[brettdrake11]

We recently made a change to the "Knowledge Common Styles" style sheet, and are finding that it's necessary to clear the browser's cache to see the updated styles.   Our users don't like that answer...   Is there a way to force the new CSS to the browser?

[Aditya Telideva]

hi brett,

Did you try to use the CSS property !important.   For example, the following CSS will override the color of List Titles:

.list_title {

        color: red !important;

}

You can put this CSS in a Stylesheet that is linked to the CMS sites theme.   The great thing about this approach is that even Forms, Lists, etc exposed via iFrames inherit these stylesheets.   Overriding default styles can be a bit of a pain but it is generally better than having to write all the CSS (including layout CSS like padding, position, etc) yourself.

One thing I would love to see for CMS purposes is a more flexible/configurable client side Glide API.   It would be nice to be able to ditch the out of box form layouts in the CMS portals but still be able leverage Client Scripts and UI Policies.   I highly doubt this will happen but I can dream.   (Then again, with Angular.js being introduced, maybe we will see a more configurable UI).

Thanks,

Aditya Telidevara

[Nate Aiken]

One thing you can do is update the reference to the style sheet to include a "version" ("v" in the URL of the example below) value that will force the browser to pull the latest version as it will see the value of of the variable update when the style sheet is updated.   In the below example, you query the table and get the "sys_updated_by" and use that as a reference so each time an update is made, it will make the browser think it's a different style sheet.

        //Get the sys_updated_on for the stylesheet

        <g2: evaluate>

                  var cssGR = new GlideRecord('content_css');

                  cssGR.addQuery('name', 'stylesheet name');   //Get the style sheet by name  

                  cssGR.query();  

                  cssGR.next();

                  var lastUpdateDate = cssGR.getValue('sys_updated_on');

        </g2:evaluate>

        //Reference the stylesheet with a parameter to force the browser to pull a new version each time the sys_updated_on changes.

        <link href="fa6a25e60f866240fdbb4d9ce1050ea2.cssdbx?v=$[lastUpdateDate]" rel="stylesheet" />

Regards,

Nate Aiken