Add Custom CSS to DNN Website

If you wish to add some custom CSS to your DNN website the Stylesheet Editor within the Admin pages offers easy editing.

Not wishing to edit your DNN skin but wanting to amend the rendering of your DNN website?

Using the Stylesheet Editor allows for overriding of the website’s skin and the presentation of modules without directly editing each of these.

It allows all of your modifications to be brought together in one place.

Its easy to make the changes through the DNN website, no need to FTP files to the server. testing of your changes is also rapid,

Open the page Admin Site Settings page.

Add custom CSS to DNN website: admin site settings

On this page select the tab Stylesheet Editor.

Add custom CSS to DNN website: admin site settings stylesheet editor

The default content has references to many of the standard DNN classes.

Either leave these in place or check to ensure that they’re not in use and delete the them.

You can add your new overrides within the textbox. I like to add them to the bottom to better ensure that they will override the existing settings. And to make it easier to see.

Shown in the image above are some example entries for the Header tags H1 to H6.

For clarity I’ve also added a division, date and owner for the additional content.

Content wrapped with /* and */ is not actioned. From my example:

/* ########## Custom CSS ######## */

save your amendments and view the relevant pages.

The Stylesheet is saved to the file

/portals/PortalID/portal.css

The file is loaded late in the sequence of CSS files, after the sites skin files. Its configurations will therefore be higher in terms of priority.

Because the file is easy to edit, do ensure you have a backup copy. Anyone with admin access to the website is able to amend the settings.