OpenLightGroup Blog

rss

Blogs from OpenLightGroup.net


DotNetNuke Menu Custom Scroller

It appears that there is not an easy way to override the content or the style for the area that appears in the DotNetNuke menu when you need to scroll through a long list of menu items. This is not an elegant solution, but it works for me. I was hoping there was a property of the menu control that I had simply overlooked. However, the  CSSScrollItem attribute referenced in the spmenu.js file appeared to be ignored by the menu control. So I was left to dig into the JavaScript a little further. I soon figured out that the default Css class used for this element was always output the same:  .dnn_dnnmenu_ctldnnmenu_spmitmscr

So I gave it a shot and entered this class into my Skin.css file... and it worked!!! I had successfully overridden the default style for the little grey box that appears that the top and/or bottom of the menu when it will not fit in the browser window! So I took it a step further and decided, that since I could not modify the content of the div ( ... ), I would create an image and set it to the background image. Again, not the solution I was hoping for, but I could not find any documentation providing a better option. This provides a way to display whatever you want in that area provided you can save it to a static image that is referenced in your Css file.

Here is the Css work around I figured out:

.dnn_dnnmenu_ctldnnmenu_spmitmscr {
    color: White;
    background-color: White;
    background-image: url('images/scroll.gif');
    background-repeat: no-repeat;
    background-position: center;
    height: 15px;
    min-width: 125px;
}

 

Obviously, you could use this class to do any number of things to this area of the menu. I am sure there are several of you out there that could do something much more stylish that what I have done. However, the major limitation in my view is not being able to modify the content of the area. Using an image works, but again does not make me feel like a developer super-star!

I would love to hear your input on this solution and possible enhancements, or even better, if any knows the "proper" way to get the same result! Either way, I hope this helps you while you do your DotNetNuke skinning tasks!





Comments are closed.