Hi Folks,

This post will walk you through preventing unwanted css files to be loaded on dnn page.
Most of the times the html we get from UI designer and the skin we create using the html look different. And we wonder why it happened. This happens due to default css used by DNN like default.css and portal.css. There are many ways to resolve this issue:

1. Find and override styles which are creating problem
2. Delete default style sheets used by dnn
3. Use some custom module to prevent loading default css

Solution #1 is very tiring as it takes a lot of time and effort to find the styles which are causing issue and overriding those.

Solution #2 is not handy as default style sheets are used by dnn on admin and for many dnn controls.

Solution #3 is most promising out of these three, but developers would not want to add a module to solve this small issue.

One of my colleague was facing the same problem and we came with below solution:

<script type="text/javascript">
        $(document).ready(function () {
            if ($('body.dnnEditState').length == 0) {
                $('head link[href*="/portals/_default/default.css"]').remove();
                $('head link[href*="/portals/0/portal.css"]').remove();
            }
        });
    </script>

Add above snippet to your skin and it removes the desired css from the non-admin view only. And also the path can be changed very easily.

comments powered by Disqus