I'm new to this framework and ran into the same problem. It's hard to believe there's not an easy way to do this. You'd think it'd be pretty common to want drop down nav shown in a different font size than the primary nav. I dug as deep as I could and it seem ultimately this is controlled by a solpartWebControls.dll so it is not really customizable. It may very well be extendable, but so much is under the hood, I couldn't figure out what to extend! All in all I was pretty disappointed with the functionality being hidden in a dll given that navigation is such a basic part of a website. Then again, this is a free framework, so I can't complain too much.
All this is to say that I couldn't find an easy way to make a submenu font style look different than the main menu. If I've missed something, somebody please tell me. So I came up with a kluge that does what I need it to do.
Before I go any farther, I want to state up front that I don't really like the solution I came up with for this. It's a bit klunky and somewhat dependant on the world around it in order to work. But it does do the trick and could probably be made better and more generic if someone has the time.
So I figured the only way to do it was through javascript utilizing the DOM after the page is rendered. In a nutshell, I created a javascript file that gathers a collection of places where the 'dnn_dnnsolpartmenu_ctldnnsolpartmenu_spmsub' class is used. This should only occur where there's a drop down menu. It then looks through those colloections for references to the 'dnn_dnnsolpartmenu_ctldnnsolpartmenu_spmitm' class, which should just be each individual drop down text item. Then in each instance, I inject the desired styling and voila, the subnav now looks different than the main nav.
One of the problems is that you can't define your new style as a class in your skins css file, because the class is overwritten whenever there's a rollover / rollout. You have to define it as a style for the element rather than a class. Also, there's no way to call this javascript but to modify the default.aspx page load. Those problem combine to mean that this code will add a specific style to each and every subnav in each and every portal you're hosting. So this could be a definite problem if you're hosting more than one client's site. You should be able to tell Default to only load it in certain cases, though, or even tell the javascript only to load if it sees certian portlal identifiers. Bottom line, it's more involved than your normal skin process.
But if you're like me and just want something that just works (and is apparently fairly cross-browser-friendly), here is the code:
js/subnavstyle.js
//----User Defined-----
//change this to refernce the css class that you want your submenu text to utilize
//var newClass = 'MainMenu_SubMenuText';
var
newStyle= "padding-top:5px; font-size:11px; font-weight:bold; line-height:12px; background-image:url(/dnn/images/dots.gif); background-repeat:repeat-x;"
//-----Generic Functionality-----
//can't guarantee where this reference will be placed in the .NET code. Since there may be styling
//of text occuring after this call, wait 100ms to call our specific styling.
function
setTimeout(
}
addSolPartSubMenuStyling() {"makechange()",100);
function
makechange() {var myObjColl = getElementsByClassName('dnn_dnnsolpartmenu_ctldnnsolpartmenu_spmsub', 'div');for (var i = 0, j = myObjColl.length; i < j; i++) {// myObjColl[i].id);
var cont = document.getElementById(myObjColl[i].id);var myCellColl = getElementsByClassName('dnn_dnnsolpartmenu_ctldnnsolpartmenu_spmitm','td',cont);for (var x=0, y=myCellColl.length; x<y; x++) {//ideally, we'd have the new styling defined as a class in our CSS, and add that class to the existing class list for the element. This works but goes away upon rollover due to the way the SolPartMenu "remembers" pre-rollover states.
//curClass = myCellColl[x].getAttribute("class")
//if (curClass==null) curClass = myCellColl[x].getAttribute("className");
//myCellColl[x].setAttribute("class", curClass + " " + newClass);
//so instead, the style has to be defined in this script and added manually to each element
myCellColl[x].style.cssText= newStyle;
}
}
}
//script by Stuart Colville, muffinresearch.co.uk, April 29, 2006
//url: http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/
//finds a collection of objects on a page that contains a given class
//if not passed, it looks at all tags (*) and containers (document) on the page
function
strTag = strTag ||
objContElm = objContElm || document;
comparisonLoop:
arr.push(objColl[i]);
}
}
}
}
}
getElementsByClassName(strClass, strTag, objContElm) {"*";var objColl = objContElm.getElementsByTagName(strTag);if (!objColl.length && strTag == "*" && objContElm.all) objColl = objContElm.all;var arr = new Array();var delim = strClass.indexOf('|') != -1 ? '|' : ' ';var arrClass = strClass.split(delim);for (var i = 0, j = objColl.length; i < j; i++) {var arrObjClass = objColl[i].className.split(' ');if (delim == ' ' && arrClass.length > arrObjClass.length) continue;var c = 0;for (var k = 0, l = arrObjClass.length; k < l; k++) {for (var m = 0, n = arrClass.length; m < n; m++) {if (arrClass[m] == arrObjClass[k]) c++;if (( delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {break comparisonLoop;return arr;
// To cover IE 5.0's lack of the push method
Array.prototype.push =
}
function(value) {this[this.length] = value;
Added to Default.aspx pageLoad method
Try
Page.ClientScript.RegisterClientScriptInclude(
Page.ClientScript.RegisterStartupScript(
"changeSubmenuStyling", "/DNN/js/subnavstyle.js")Me.GetType, "changeSubStyles", "try { addSolPartSubMenuStyling(); } catch(err){}", True)Catch
End Try