Hello:
This thread is a two-part question, though related to the parsing of skins. I am familiar with both the use of HTML and ACSX when managing skins, but I am not an expert by any means, so please excuse any ignorance on my part. I generally modify the default skin that comes with DNN to suit my purposes fine, and I am now having trouble getting some custom JS/CSS in the head of the template as well as a custom ID attribute for the body tag. I duplicated the MinimalExtropy skin and made changes to build the following site:
http://www.on-ramptotheweb.org
We are now requiring advanced styling & JQuery UI. We chose to use Fancybox and we placed the necessary files in the root of the site, where we would link to them in the HEAD section. I expected to handle JS inclusion through the inclusion of a single file in the skin package, which would then include additional files, thus preventing the need to edit the skin file and re-parse (only the one .js file would be uploaded). However, everything I have done to try to get css or js files included in the skin package have been in vain. I attempted to update the HTML file for the selected skin (1280). I modified the file "index 1280.html" to include the following:
<script src="js/onramp.js" type="text/javascript"></script>
This makes the HEAD section as follows:
<head>
<link rel="stylesheet" type="text/css" href="skin.css" />
<script src="js/onramp.js" type="text/javascript"></script>
<title></title>
</head>
I would think that when I upload the .html file to the site and parse the skin package, then view a page, this JS file would be included. However, it never is. The above code is currently in the 1280 skin, which is the default skin file in use for the site referenced above. When you view the homepage, or any page using this skin, the onramp.js is never found in the source. The onramp.js file itself has an alert call, so it should popup an alert box if executing. When I parse the skin package, I see the following which shows that it finds the onramp.js directive and makes the substitution:
(I can provide the full output if necessary, it's quite long)
# Begin processing file: index 1280.html
(some lines removed)
# Substituting: <script src="js/onramp.js" type="text/javascript">
With: <script src="/portals/_default/skins/onramp/js/onramp.js" type="text/javascript">
# Substituting: <link rel="stylesheet" type="text/css" href="skin.css" />
With: <link rel="stylesheet" type="text/css" href="/portals/_default/skins/onramp/skin.css" />
# Formatting control directive: <%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="TEXT" Src="~/Admin/Skins/Text.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
# Formatting registration directive: <%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
# Writing file: index 1280.ascx
End processing file: index 1280.html
So, am I missing a step here that should cause the .js to be included? The same happens with custom CSS, nothing I add to the HEAD section remains after the skin package is parsed. The skin.css that was already in the file from MinimalExtropy does get carried over, so I'm not sure why additional CSS that I add or JS is lost in parsing. The only way we got FancyBox to work is to include the FancyBox files in each page using the Page Settings screen. This is not ideal and now that we are looking at hundreds of pages needing the functionality, we need to do something different.
The second issue I have is overriding the ID attribute of the body tag (or maybe just including tag-specific styling). By default the <body> tag of the HTML file becomes <body id="Body"> when parsed or compiled, I'm not sure of the terminology. We have a secondary skin file (in the same skin package) that is blank, so just a blank template. We use this for the modal popups from FancyBox. We want the same font styles, etc, but the main skin file (index 1280) uses background images for the body. We do not want to separate our CSS files (i.e., one for 1280 and one for blank) so that font styles are consistent, we just want to avoid the background image for the blank skin file which we do not want included in the blank template. The simplest solution is to have something other than "Body" for the id attribute of the body tag. However, when we put in
<body id="BodyBlank"> this is not carried over (final output always has
<body id="Body"> ). If we changed the styling information for body#Body, then the main skin file would not be correct (lose the background images). As such, we need a way to separate out the body attributes for the blank skin file so that styling can be applied as needed while maintaining the inclusion of common styling elements such as font size/color/face/etc. We've also tried
<body style="background-image: none;"> but the style attribute also does not carry over after the skin package is parsed.
What is the best way to control the tags, such as body, that are not available in the ASCX file when multiple skin files are in use on a site and using a common stylesheet?
Thanks in advance for any assistance you can offer.