Question

We are adding some FAQs to multiple portals within our DotNetNuke site using an HTML editor module. The layout and styles will be the same on every portal, so I’m trying to determine the best place to store the custom CSS styles and jQuery within DotNetNuke (ver 5.6) so we can reference them within the HTML editor module for all portals.

Although adding the CSS styles to the Portals/_default/default.css file works, its my understanding that I don’t want to change this file in the event that we update the CMS to the newer version which would overwrite the CSS… right?

If that is the correct approach, is there a similar file for global .js files where we could store the jQuery? I’m also hesitant to include a script reference in the Default.aspx page for the same reason.

Thanks

EDIT: I added the styles to the above referenced default.css page, and added a script tag to the Default.aspx page to a .js file I put in Resources/Shared/scripts/. It seems to be working well… if anyone wants to add their two cents I’d like to hear if there’s a better approach. It seems adding documentation for anyone else who might touch this site in the future could get old unless this is a common practice.

EDIT2: I ended up just adding a style and script tag to the Default.aspx page that references a CSS and a JS file, both stored in the corresponding Resources/Shared/ directories (rather than editing the default.css file).

Answer 1

There isn’t really a place in DNN for global, custom content that spans portals, unless its in a module or other extension. In this case, it sounds like your portals may have the same skin, so that would be a good place to put custom styles and script (assuming that you own/control the skin; if it’s 3rd party and you might update it, it’s probably best to be off-limits, like the core code).

So, either add the CSS and script to the skin, or create a custom module which adds the styles/scripts, which you can include on every page (using the Display on All Pages module setting).

If you’re using DNN 6.1 or later, you can plug into the Client Resource Management framework that was introduced, to manage references to CSS & JS. First, add this reference to a control (skin, module control, etc):

<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>

Then use it like this:

<dnn:DnnJsInclude runat="server" FilePath="DNNMega/jquery.dnnmega.debug.js" PathNameAlias="SkinPath" />
<dnn:DnnCssInclude runat="server" FilePath="DNNMega/dnnmega.css" PathNameAlias="SkinPath" />

Otherwise, your best bet for adding a stylesheet would be the following code:

protected override void OnInit(EventArgs e) {
    base.OnInit(e);
    this.AddStyleSheet("//fonts.googleapis.com/css?family=Rokkitt:400,700");
}

private void AddStyleSheet(string path)
{
    ((CDefault)this.Page).AddStyleSheet(DotNetNuke.Common.Globals.CreateValidID(path), path);
}

And the script can be referenced via a simple <script> tag, or something like ClientScriptManager.RegisterStartupScript.