Hello I have a problem that seems like it should be farily no brainer but it isn't as intuitive as I expected here is the issue.

on my web site www.berkshires.org when viewing the menu at 1024X 768 when their are items that can't be seen the submenu or vertical menu turns out this sort of grayish bar at the bottom of the menu.  I thought that bar was probably rendered under the css class of mainmenu_submenu however the only athetics their was a thin strip at the very bottom of the menu.  It dealt with the body color of the menu, border, and cursor but did not deal with this annoyance of a box that shows up when all menu items can't be displayed.

Upon looking at the skins default.aspx file I noted that their was the following:

-------------------------------------------------------------
<td align="left" valign="top" id="LeftPane" runat="server" class="leftpane">

<img src="/Portals/_default/Skins/Sub_Page_test/images/border.gif" height="8" width="141" /><dnn:MENU

runat="server" id="dnnMENU2" usearrows="true" userootbreadcrumbarrow="false"

rootmenuitemcssclass="RootMenuitem2" CSSNodeHoverRoot="RootMenuSel2" CSSNodeActiveRoot="RootMenuActive2"

level="same" display="vertical" submenucssclass=" MainMenu_SubMenu2" menuitemcssclass="MainMenu_MenuItem2"

menuitemselcssclass="MainMenu_MenuItemSel2" rootonly="true" separator=""

separatorcssclass="menusep" menucontainercssclass="MainMenu_MenuContainer2" backcolor="white"

menueffectsshadowcolor="white" selectedcolor="white" />
-------------------------------------------------------------------
I looked for a Mainmenu_submenu2 class within my skinl.css file but could only find a play main_submenu class the same ones that style everything but that annoying gray box that showed up.  I wanted to turn that gray box into a different colored arrow, or maybe threee dots or something other than a solid gray box.  It shows on top as well when som of the items are hidden from the top.

I guess the question where do I find what is inside the submenucssclass that is named mainmenu_submenu2 and how do I edit it.  Or the other question would be if that bar that when hovered on scrolls the hidden text so you can view the rest of the items are hidden within the dnn:menu token how would I be able to get into the code of this dnn:menu item in order to see if I could locate this grey bar that appears as an indicator that you need to scroll since their is menu items down below it.

 

Seems like this might not be a css fully responsible but maybe as it is attached to some type of script that tells dnn that if all items are not visible display such and such a look and when hovered on that item (the gray box) scroll.  But I am having trouble locating or getting into the inner working of dnn:menu or what ever is responsible for the execution of scrolling the vertical submenu list when they can not all be seen.

 

Thanks for your help again

 

Bo

This was a good question, got me to think a bit on this one!

- How do you find the id on a hover over menu item??

Well, this is the class used on your site:

.dnn_dnnmenu_ctldnnmenu_spmitmscr
{
border: 10px orange solid;
}

- You will see this adds an Orange border around the grey box, so hopefully you will now build to style the box as you require.

I managed to identify it by using the web developers toolbar, information menu, display element information, hover through the menu and then clicked on the grey bar, this displayed the ID of that menu element.

Cheers,

Hello Lee, what was the name of the web development tool bar you used to locate the problem and was it for firefox or ie or another browser. I would be interested in finding it and installing it on my browser I tried to install one for firefox and looked for information menu on the toolbar but couldn't find it maybe I don't have the same one because it seems like it is certainly a handy thing to have. I am not one for cluttering my browsers with toolbars but I think this one is worth my while thanksf or looking into this issue.

By the way I looked for that class mentioned above:

.dnn_dnnmenu_ctldnnmenu_spmitmscr

I just went to source on the home page and it wasn't an inline class and than I also looked for it under the skin.css file and it wasn't their does the toolbar tell you what css file this class is hidden in I would be curious to get a feel for how this framework wires its classes since though that gray bar was in a menu used as a skin object it wasn't explicitely demonstrated in the skin.css file which means either that skin object or somehow the skin itslef must be drawing from other css files other than skin.css and perhaps default.css thanks

Bo

Hello,

For info on the toolbar check: Troubleshooting DotNetNuke Skins

Yes DNN creates additional ids and CSS that are not listed in the default.css file which is why you have to use some of those methods for identifying what is going on. - The above tutorial outlines the techniques I use with the toolbar - it's a massive time saving tool.

Hello Lee,

Thanks for the tool and the tutorials they were very useful in one way and yet when I used the tool to shed some light on this issue concerning this particular class I was more baffled then before.  When I right clicked on that grey bar elemnet we were discussing at the bottom of the scroll down menu at berkshires.org I got a whelp of info about it but am perplexed.  Down below within the astricks I have the details of what was in this little information bar I had to hand type it since for some reason copy and pasting from this thing was not very good.

My question concerning this whole situation is as follows:  As you will note .dnn_dnnmenu_ctldnnmenu_spmitmscr seems to be the class that is hat hand here write below that div #dndnn... However what my issue is I was looking for this class plus other info in the attributes cateogory in many different places.  I was looking in the actual page source where the solpartmenu is being used (though I really didn't expect to gain great insite their.  Than I looked in the spMenu.js file located in the controls>SolpartMenu folder on my dotnetnuke site but using a text editor it couldn't even find the words onmouseout=spm_scroll... as you see as part of the attribute section.  Of course I looked within my main default.aspx file within my skin folder as well as my skin.css file but couldn't locate that particular class their either.

In fact actually I looked for .dnn_dnnmenu_ctldnnmenu_spmitmscr under every single .css file that the web developer toolbar indicated was being used by going to the disable style and looking on individual stylesheets to see if somehow their was a style sheet being used that utilized that class but couldn't find it in any style sheet or that spmenu.js file which I would certainly have expected to see it if no where else.

What could I be missing here.  Where else would dotnetnuke store the information as discribed below.  What file or how would I be able to get at and edit the information that was found from the information bar clicking on elments.  For when I use this web developer tool I can see the details as shown below but am perplexed at exactly where they are stashed, what folders they reside in etc... I would think that all styles and athetics used would be fairly self explanitory within the context of that skin folder but I'm not sure where else I would need to navigate.

Also it is interesting to note that nowhere in the following details is their any indication of a gray color for that bar from the info I unearthed by clicking on this grey bar in the berkshries.org with a lower screen resolution.  Neither could I find a hex equivalent anywhere in those details that gave any idea how the solpartmenu was producing that ugly grey rectangle for the purpose of getting the menu list to scroll down automatically.

Again thanks for your help, research and advice on this.  Believe it or not this grey bar issue is top priority as far as my client is concerned they hate it and want it out perhaps replaced with an arrow or three dots or anything but that gray bar and me thinking it was just a css issue that was in the skin or maybe default.css thought it was a no brainer however I am curious myself how that gray bar is programmed into the SolpartMenu and how where the details are programatically that indicate that if the list cannot display fully to show this gray bar that is not just a surface skin.css fix.  the SolpartMenu people really burried this one but I am determined to find this out as I believe any cosemtics done to a site should be easily retrievable and customizable thanks again and below is the details about what the information bar showed concerning this gray bar object perhaps it will help you in understanding not only what clas in responsible for it but where to go to edit that.

Lastly I tried to create this same class in the skin.css file of the skin my local development site used and just did one adjustment putting color: #ffffff; thinking a big white bar certainly would be noticable but no change.  I don't know maybe I have to go ahead repackage the whole skina nd upload it using host >skin on dnn framework even though I only updated a skin.css file and not an aspx file.  Let me know what you think thanks

Bo

**************************************************************************

div #dndmn_dnnMENU_ctldnnMENU55
.dnn_dnnmenu_ctldnnmenu_spmitmscr

-------------------------------------------
Attributes
------------------------------------------
style= width: 100%; font-size:6pt;
class=dnnmenu_ctldnnmenu_spmitmscr

onmouseout=spm_scrollMenuMout(m_oSolpartMenu['dnn_dnnMENU_ctldnnMENU']);
onmouseover=spm_ScrollMenuMO(this.m_oSolpartMenu['dnn_dnnMENU_ctldnnMENU']);
onclick=return spm_ScrollMenuClick(this, event);
id=dmdnn_dnnMENU_ctldnnMENU55

----------------------------------------------------
Position
-----------------------------------------
left: 500px Top: 541px wdith: 167px Height:10px

---------------------------------------------------
Other
------------------------------------------
Font Family: serif
Font Size: 8px

----------------------------
Ancestors
------------------------
HTML         
body #Body
form #Form
span #dnn_dnnMENU_ctldnnMENU_divOuterTables
div #tbldnn_dnnMENU_ctldnnMENU55 .dnn_dnnmenu_ctldnnmenu_spmsubMainMenu_SubMenu
table
tbody
tr
td #dndnn_dnnMENU55

------------------------------------
Children
-------------------------------------
none

****************************************************************************************************

Hello Lee,

Sorry about that I guess I found that grey bar to change to yellow after all after effecting the spmenu.js file where it said gray in single quotes however I am still left hanging in the balance concerning why that .class file couldn't be traced to a particular class file or where it could be hiding if not in any of the css classes that the toolbar said I could disable if I wished. Maybe some nested css somewhere but why would someone want to hide this class so much. Oh well thanks again

Bo

Hello Lee or Joe or others,

I think I have squared this all away now apparently these classes are broken up in javascriipt code using concocnations and other such tricks to pull these classes together. Makes it a little more cumbersome to weed through then a simplistic class in a .css file for sure but hay I guess that was the way the solpartmenu people decided to do things if you have any other comments or ideas after reading these three posts let me know I just was so perplexed at first just almost bewildered on how that class file that the web tool found was scraped up from not thinking that these elements might not be able to be located easily in a find routine do to the dots and pluses that seperate bits and pieces of them in order to perform eventual conconations of a string. Any way again thanks for your help

Hello,

Thanks for the info, so have you found a way of accessing those classes directly within the Solpart menu code? - or are you still overriding them in your skin.CSS file?