locked
Problems Getting Started RRS feed

  • Question

  • User696104381 posted
    I have been trying to get the Control Adapters going for the last day. I don't have a clue what's going. My CSS menu is called 'fireMenu'. It is in a themes folder. It is attached to the webpage. My CSSSelectorClass is set to "fireMenu" Here's the code on the source page <asp:Menu ID="menuFM" runat="server" DataSourceID="SiteMapDataSource1" StaticDisplayLevels="2" CssSelectorClass="fireMenu" BackColor="#CCCCCC" DynamicHorizontalOffset="2" StaticSubMenuIndent=""> </asp:Menu> Here's the link in the header: <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" /> <!--[if lt IE 7]> <link runat = "server" rel="stylsheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type= "text/css"> <![endif]--> The webpage does not seem to communicating with the CSS page; none of the changes I've made show up on the menu. What is showing is a vertical menu with a grey background with no separation of the tiers - just 25 links one after the other - all rendered in Rockwell for some reason; the top is blocking the header; one link is bold blue - none of the others are ,etc. Any help?
    Saturday, October 25, 2008 4:05 PM

Answers

  • User696104381 posted
    Adapters Working! I went back as you suggested to the tutorial and looked at the main master page. The only thing I was conscious of changing was adding this. Perhaps I did something else as well. In any case when I went back they were on and working fine! They look great. (I was just about to give up.) <!--[if gt IE 6]> <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu7.css" type="text/css" id="IEMenu7CSS" /> <![endif]--> Thanks for all your help. Cort
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 3, 2008 7:15 PM

All replies

  • User1564875471 posted

     Did you set the Theme for your pages in web.config file ?

    Check this link

    http://www.odetocode.com/articles/423.aspx

    Also , try to disable control adapters , and see if your style sheets worked .

     

    Sunday, October 26, 2008 6:26 AM
  • User696104381 posted
    THANKS! I DID NOT HAVE THE PAGE LINKED TO THE THEME AND I PUT THE THEME DECLARATION IN THE HEAD OF THE PAGE. THIS CAUSED THE LINKS TO SHOW UP WITH THE PROPER TIER STRUCTURE - THEY'RE NOT SIMPLY LISTED IN A VERTICAL ROW - AND THE BACKGROUND COLOR TO CHANGE - BUT WHEN I TRY TO ALTER THEIR STYLE, SAY THE FONT COLOR IN TIER ONE, IT STILL DOESN'T DO ANYTHING (???). MY STYLE SHEETS SEEM TO BE WORKING FINE.
    Sunday, October 26, 2008 6:07 PM
  • User1564875471 posted

    Hi

    Please try to disable the Css friendly adapters by removing or execluding the App_Browser folder, then see if it worked ,

    Also try to post the menu declaration and the css classes so that we can test it locally .

    Monday, October 27, 2008 3:30 AM
  • User696104381 posted
    THANKS AGAIN. I DISABLED T HE APP_BROWSER FOLDER BY REMOVING IT. WHEN I DID THAT THE MENUS REVERTED TO THEIR PROPER POSITION; THAT IS ONLY THE TOP TIER WAS VISIBLE; THE SECOND TIER APPEARED OFF TO THE RIGHT WHEN THE LINK WAS CLICKED - THERE WAS NO STYLING TO SPEAKING JUST BLACK AND WHITE. HERES THE MENU DECLARATION FROM THE MASTER PAGE (HOPE YOU CAN READ IT WITH THE SMALL TYPE): <asp:Menu ID="menuCFS" runat="server" BackColor="White" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2" StaticDisplayLevels="2" StaticSubMenuIndent="10px" StaticEnableDefaultPopOutImage="False" CssSelectorClass="FireMenu"> HERE ARE THE CSS CLASSES. I'VE DONE VERY LITTLE WITH THE CLASSES - JUST PUT IN COLORS TO SEE IF IT WAS WORKING (AND TO FIGURE OUT WHAT THEY MEANT!) THANKS FOR TAKING A LOOK! .foo { } /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */ /* When the Menu control's Orientation property is Vertical the adapter wraps the menu with DIV */ /* whose class is AspNet-Menu-Vertical. */ .fireMenu .AspNet-Menu-Vertical { color:Maroon; } /* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */ /* So, effectively says: style all tiers in the menu this way... */ .fireMenu ul.AspNet-Menu /*tier 1*/ { margin : 0; padding: 0; color:Green; font-family:Times New Roman; background-color:Aqua; } /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */ /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */ /* the topmost tier's appearance. */ .fireMenu .AspNet-Menu ul /*Tier 2*/ { background-color:Green; z-index: 300; } /* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */ /* whose class is AspNet-Menu-Horizontal. This allows us to force the top tier of the menu to layout */ /* horizontally, whereas all subsequent tiers of the menu lay out vertically. */ .fireMenu ul li /*a all list items*/ { } .fireMenu li:AspNet-Menu-Hover /*list items being hovered*/ { } .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li { color:maroon; top: 30px; z-index: 300; background-color:green; font-family:Courier New; font-style:italic; } /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */ /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */ /* the topmost tier's appearance. */ .fireMenu ul.AspNet-Menu ul { margin : 0; padding: 0; color:maroon; font-family:arial; } /* The menu adapter generates a list item (li) in HTML for each menu item. */ /* Use this rule create the common appearance of each menu item. */ .fireMenu ul.AspNet-Menu li { ; list-style: none; color:Blue; background-color:Gray; } /* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */ /* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */ /* in each menu item. One comes from the CSS rule (above) governing the li tag that each menu item has. */ /* The second image comes from this rule (below). */ .fireMenu ul.AspNet-Menu li a, .fireMenu ul.AspNet-Menu li span { display: block; text-decoration: none; } .fireMenu ul.AspNet-Menu ul { } /* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */ .fireMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a, .fireMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span { } /* Add more rules here if your menus have more than three (3) tiers */ .fireMenu ul.AspNet-Menu li:hover ul ul, .fireMenu ul.AspNet-Menu li:hover ul ul ul, .fireMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul ul, .fireMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul { display: none; } /* Add more rules here if your menus have more than three (3) tiers */ .fireMenu ul.AspNet-Menu li:hover ul, .fireMenu ul.AspNet-Menu li li:hover ul, .fireMenu ul.AspNet-Menu li li li:hover ul, .fireMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul, .fireMenu ul.AspNet-Menu li li.AspNet-Menu-Hover ul, .fireMenu ul.AspNet-Menu li li li.AspNet-Menu-Hover ul { display: block; } .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li li { float: none; } /* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */ /* whose class is AspNet-Menu-Horizontal. */ .fireMenu .AspNet-Menu-Horizontal { } /* This rule controls the width of the top tier of the horizontal menu. */ /* BE SURE TO MAKE THIS WIDE ENOUGH to accomodate all of the top tier menu items that are lined */ /* up from left to right. In other words, this width needs to be the width of the individual */ /* top tier menu items multiplied by the number of items. */ .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu { width: 500px; } /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */ /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */ /* the topmost tier's appearance. */ /* Remember that only the topmost tier of the menu is horizontal. The second and third tiers are vertical. */ /* So, they need a much smaller width than the top tier. Effectively, the width specified here is simply */ /* the width of a single menu item in the second and their tiers. */ .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul { } /* Generally, you use this rule to set style properties that pertain to all menu items. */ /* One exception is the width set here. We will override this width with a more specific rule (below) */ /* That sets the width for all menu items from the second tier downward in the menu. */ .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li { width:100px; text-align:center; } /* This rule can be used to set styles for the menu items in the second tier (and lower) in the menu. */ .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li li { text-align:left; } /* This rule establishes the width of menu items below the top tier. This allows the top tier menu items */ /* to be narrower, for example, than the sub-menu items. */ /* This value you set here should be slightly larger than the left margin value in the next rule. See */ /* its comment for more details. */ .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li { } /* Third tier menus have to be positioned differently than second (or top) tier menu items because */ /* they drop to the side, not below, their parent menu item. This is done by setting the last margin */ /* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */ /* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */ .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul { margin: -1.8em 0 0 126px; }
    Monday, October 27, 2008 11:44 PM
  • User696104381 posted
    Sorry about that jumbled message. I didn't see the source code in there - I could have sworn I put it in there. Here it is and I took out the styling notes and reorganized the CSS. <asp:Menu ID="menuCFS" runat="server" BackColor="White" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2" StaticDisplayLevels="2" StaticSubMenuIndent="10px" StaticEnableDefaultPopOutImage="False" CssSelectorClass="FireMenu"> .foo { } .fireMenu .AspNet-Menu-Vertical { color:Maroon; } .fireMenu ul.AspNet-Menu /*tier 1*/ { margin : 0; padding: 0; color:Green; font-family:Times New Roman; background-color:Aqua; } .fireMenu .AspNet-Menu ul /*Tier 2*/ { background-color:Green; z-index: 300; } .fireMenu li:AspNet-Menu-Hover /*list items being hovered*/ { } .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li { color:maroon; top: 30px; z-index: 300; background-color:green; font-family:Courier New; font-style:italic; } .fireMenu ul.AspNet-Menu ul { margin : 0; padding: 0; color:maroon; font-family:arial; } .fireMenu ul.AspNet-Menu li { ; list-style: none; color:Blue; background-color:Gray; } .fireMenu ul.AspNet-Menu li a, .fireMenu ul.AspNet-Menu li span { display: block; text-decoration: none; } .fireMenu ul.AspNet-Menu ul { } .fireMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a, .fireMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span { } .fireMenu ul.AspNet-Menu li:hover ul ul, .fireMenu ul.AspNet-Menu li:hover ul ul ul, .fireMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul ul, .fireMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul { display: none; } .fireMenu ul.AspNet-Menu li:hover ul, .fireMenu ul.AspNet-Menu li li:hover ul, .fireMenu ul.AspNet-Menu li li li:hover ul, .fireMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul, .fireMenu ul.AspNet-Menu li li.AspNet-Menu-Hover ul, .fireMenu ul.AspNet-Menu li li li.AspNet-Menu-Hover ul { display: block; } .fireMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li li { float: none; } .fireMenu .AspNet-Menu-Horizontal { }
    Tuesday, October 28, 2008 1:05 PM
  • User1564875471 posted

     Hi ,

    I can't read the code , Please use the Code Editor ( ) to edit your previous post ,

    Thanks

    Tuesday, October 28, 2008 2:58 PM
  • User696104381 posted
    I don't why that code keeps disappearing. I put it in brackets - is that what I should have done? { <asp:Menu ID="menuCFS" runat="server" BackColor="White" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2" StaticDisplayLevels="2" StaticSubMenuIndent="10px" StaticEnableDefaultPopOutImage="False" CssSelectorClass="FireMenu">} Thanks for your patience.
    Tuesday, October 28, 2008 4:03 PM
  • User696104381 posted
    That didn't work, I am missing something about the Code Editor - looked around and didn't find it. I put the code into text and will download it now - see if it works. I took off the brackets at the beginning and the end. asp:Menu ID="menuCFS" runat="server" BackColor="White" DataSourceID="SiteMapDataSource1" DynamicHorizontalOffset="2" StaticDisplayLevels="2" StaticSubMenuIndent="10px" StaticEnableDefaultPopOutImage="False" CssSelectorClass="FireMenu"
    Tuesday, October 28, 2008 4:06 PM
  • User1564875471 posted

     The code editor may not be available if you are using opera or google browser ,

    I think you need to use IE or firefox to be able to see it.

    Anyway , It seems that the problem coming from using the Css adapters,

    Do you need to use the css dadpters ? 

     

    Tuesday, October 28, 2008 4:21 PM
  • User696104381 posted
    I was using the Google browser. I'm not sure how to answer the adapter question. I guess the answer is that I'd like to use the adapters but I don't need to use them - I can use CSS classes. Do they just not work in some systems? Or am I not understanding the question?
    Tuesday, October 28, 2008 7:38 PM
  • User1564875471 posted

     Hi,

    I looked at the "MenuAdapter.cs" code file , which is the source code for the Menu Css  Friendly adapter ,

    I think when using the adapter , the menu will ignore all the Css classes that applied to it , you must specify a custom property with this name : "CssSelectorClass" ,

    That property must have the Main css class that will be used to style your menu , Please download the css samples and looked at the menu sample and see how its styled,

    The menu in the sample will lookes like this :

      <asp:Menu ID="EntertainmentMenu" runat="server" Orientation="Horizontal" onmenuitemclick="OnClick" CssSelectorClass="SimpleEntertainmentMenu">

    Notice how the menu contains just a one css class , 

    Then notice the external style sheet that can be found in the sample inside "SimpleMenu.css" file ,it will looks like this :

      

    .SimpleEntertainmentMenu ul.AspNet-Menu /* Tier 1 */
    {
        width: 13em; /* This is more than (6em x 2) because we want to leave room for borders around the <li> elements that are selected */
    }
    
    .SimpleEntertainmentMenu ul.AspNet-Menu ul  /* Tier 2 */
    {
        width: 6em;
        top: 100%;
        left: 0;
    }
    
    .SimpleEntertainmentMenu ul.AspNet-Menu ul ul  /* Tier 3+ */
    {
        top: -0.5em;
        left: 6em;
    }
    
    .SimpleEntertainmentMenu li /* all list items */
    {
        width: 6em;
        background: #eeeeee;
    }
    
    .SimpleEntertainmentMenu li:hover, /* list items being hovered over */
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover
    {
        background: Black;
    }
    
    .SimpleEntertainmentMenu a, /* all anchors and spans (nodes with no link) */
    .SimpleEntertainmentMenu span
    {
        color: Black;
        padding: 4px 2px 4px 8px;
        border:1px solid #cccccc;
        background: transparent url(arrowRight.gif) right center no-repeat;
    }
    
    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf a, /* leaves */
    .SimpleEntertainmentMenu li.AspNet-Menu-Leaf span
    {
        background-image: none !important;
    }
    
    .SimpleEntertainmentMenu li:hover a, /* hovered text */
    .SimpleEntertainmentMenu li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover span,
    .SimpleEntertainmentMenu li:hover li:hover a,
    .SimpleEntertainmentMenu li:hover li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    .SimpleEntertainmentMenu li:hover li:hover li:hover a,
    .SimpleEntertainmentMenu li:hover li:hover li:hover span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
    {
        color: White;
        background: transparent url(activeArrowRight.gif) right center no-repeat;
    }
    
    .SimpleEntertainmentMenu li:hover li a, /* the tier above this one is hovered */
    .SimpleEntertainmentMenu li:hover li span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li span,
    .SimpleEntertainmentMenu li:hover li:hover li a,
    .SimpleEntertainmentMenu li:hover li:hover li span,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
    .SimpleEntertainmentMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
    {
        color: Black;
        background: transparent url(arrowRight.gif) right center no-repeat;
    }
    
    .SimpleEntertainmentMenu .AspNet-Menu-Selected /* this tier is selected */
    {
        border: solid 1px #00ff00 !important;
    }
    
    .SimpleEntertainmentMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */
    {
        border: solid 1px #ff0000 !important;
    }
    
    .SimpleEntertainmentMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */
    {
        border: solid 1px #0000ff !important;
    }
    
    #EntertainmentMessage
    {
        padding-top: 2em;
        clear: both;
    }
     

     

    Tuesday, October 28, 2008 7:55 PM
  • User696104381 posted
    Adapters Working! I went back as you suggested to the tutorial and looked at the main master page. The only thing I was conscious of changing was adding this. Perhaps I did something else as well. In any case when I went back they were on and working fine! They look great. (I was just about to give up.) <!--[if gt IE 6]> <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu7.css" type="text/css" id="IEMenu7CSS" /> <![endif]--> Thanks for all your help. Cort
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 3, 2008 7:15 PM
  • User696104381 posted
    I also changed the name I had in the CSSSelectorClass from FireMenu.css to FireMenu as I believe you suggested (and as the Tutorial shows - no .css in the designation for the css file!)
    Monday, November 3, 2008 9:42 PM