DNN Custom Skin not loading correct CSS

Question

I have installed DNN7 Community edition. I want to modify 'Gravity' skin as per my needs, so i created a folder as below

Portals\_default\Skins\GravityCustom

Then i copied all content from Portals_default\Skins\Gravity folder to this new one. I also customize Home.ascx and Skin.css

I login with host account to install this new skin. I found that it was already there in dropdown. Under site settings, I set this new skin 'GravityCustom - Home' as Site Skin. I leave Site container as it is.

When i view portal in browser, Home.ascx is showing changes but there is no change in CSS. I restarted website from iis manager and loaded again still there was no change.

I run http sniffer to check which CSS it is loading. I wonder that it is still loading CSS from Gravity folder not from GravityCustom.

How to tell DNN to load correct CSS?

Answer 1

Make sure your skin is set to GravityCustom at the Site level and then also double check the actual site page settings you are on to confirm it is also using GravityCustom.

If you have it set to GravityCustom it should not be pulling the CSS from any other skin except that folder and I think portal.css is still shared across all skins.

Just as a test you could empty the contents of your skin.css in GravityCustom do a refresh in your browser and see if the design gets all goofed up. Maybe you made your edits to the wrong css file?

Answer 2

If you want to see which CSS file is being loaded you should do the following.

1) View the source of the page and search the HTML source for SKIN.CSS, see which path is referenced there. If you don't see a reference to skin.css, make sure the minification of CSS and JS is turned off in the host settings.

Option 2 2) Use a tool like Firebug to "inspect" the page, it will show you which CSS is being applied and where it comes from. Check out this video I created a while back http://www.dotnetnuke.com/Resources/Video-Library/Viewer/Video/227/View/Details/Using-Firefox-and-Firebug-to-find-HTML-and-CSS-in-DotNetNuke.aspx

Answer 3

Custom CSS path set:

<dnn:DnnCssInclude ID="DnnCssInclude1" runat="server" FilePath="html_files/style.css" PathNameAlias="SkinPath" />

or usercontrol name (name.ascx) and CSS file name both are same then automatically execute.