1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Bugs & Issues / Wrapper Css - Conflicting with RADMENU css

Wrapper Css - Conflicting with RADMENU css

11 posts, 0 answered
  1. Scott
    Scott avatar
    28 posts
    Registered:
    12 Nov 2010
    14 Apr 2011
    Link to this post
    So when I added my 'name.css' to the Wrapper CSS class (Skin) it seems to pull 60% of my styles, the other 20% is being overwritten by SiteFinity's RadMenu.css!! Is there a way to tell the system not to from the RadMenu?

    Thanks
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    16 Aug 2017
    15 Apr 2011
    Link to this post
    Hello Scott,

    Applying CSS  to RadMenu should not cause any troubles, can you, please, make sure you've addressed the desired classes properly in your CSS? Another thing you might want to try is to create a customized CSS for RadMenu using our Visual Style Builder and test with it. Please inform me if the problems persist about the exact classes that do not get set, and maybe provide some screenshots and the .css file you're using, so that I can inspect this issue further.

    Regards,
    Boyan Barnev
    the Telerik team

  3. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    15 Apr 2011
    Link to this post
    The Radcontrol styles usually live in their own little world and don't bug anything else on the page.  They do this by prefixing the classes with "r" then, 2-3 letters of the control type....so .rm (radmenu), .rlb(RadListBox).  There shouldnt be any global element defining.

    So if the Radmenu is overriding some styles you have...see if your styles begin with .rm?
    .rmYOURSTYLENAME

    If not use firebug to see the offending style overlap and if possible, like Boyan said, attach a screenshot?
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    18 Apr 2011
    Link to this post
    Hello,

    The suggested approach is to use the specific css selectors, so you do not mix styles. It is possible that there is some mismatch with general css classes that applies for some elements link  "a"

    Greetings,
    Ivan Dimitrov
    the Telerik team

  5. Scott
    Scott avatar
    28 posts
    Registered:
    12 Nov 2010
    19 Apr 2011
    Link to this post
    Attached is the CSS I am using to control the Nav as well as a screendshot using Firebug. Two of my biggest problems are:

    1.) I can't get the list items in the dropdown to become 2 lines Instead of one.
    2.) I need to have the page that is active, be highlighted in RED in the nav. I added '.RadMenu .rmHorizontal .rmFocused' - but it doesn't seem to work.

    * note - I did try the 'Telerik Visual Style Builder' - as a second alternative, but the styles it spit out didn't have any hover states, nor the right fonts & padding. (even though I addressed them in the editor).

    So I am back to using my original css - which is below, as it seems to be the closest.

    I have attached 2 screenshots as well:
    Corrected - Nav (what I am trying to achieve)
    Sitefinity - nav - problems (what I am currently seeing)

    /* -- Navigation    
    --------------------------------------------------------------------------------- */
    div.nav {float: right; width: 440px; margin: 42px 0 0 0;}
    div.nav, div.nav ul {list-style: none;}
    div.nav ul {margin: 0; padding: 0 0 0 0; }
     
    .RadMenu .rmHorizontal .rmText {padding: 0 ;}
    .RadMenu rmLink {padding: 0; margin: 0;}
    .rmLink rmRootLink rmExpanded {color: #ee3124;}
    .RadMenu .rmHorizontal .rmFocused {color: #ee3124!important;}
     
     
    div.nav li {float: left; }
    div.nav li a {margin: 0; padding: 7px 11px 7px 8px !important; display: block; font: normal .75em/1em Arial, Helvetica, sans-serif; color: #231f20; text-decoration: none; text-transform: capitalize;}
     
     
    div.nav li a:hover,
    div.nav li a.current {color: #ee3124;}
     
     
    /* second-level lists */
    div.nav li ul { margin: 0 0 0 -1000em; padding: 16px 0 20px 0!important; width: 116px; position: absolute; background: url(../../images/bg-nav.png) bottom left;}
         
    div.nav li ul li    {width: 116px; display: block; }
    div.nav li ul li a  {margin: 0; padding: 6px 12px 6px 18px !important ; color: #636466; font: normal .7em/1em  Arial, Helvetica, sans-serif; text-transform: capitalize;  }
    div.nav li ul li a:hover {color: #ee3124;}
     
    /* third-and-above-level lists */
    div.nav li ul ul    {margin: -1em 0 0 -1000em;}
    div.nav li:hover ul ul,
    div.nav li.sfhover ul ul {margin-left: -1000em;}
     
    /* lists nested under hovered list items */
    div.nav li:hover ul, div#nav li.sfhover ul {margin: 1px 0 0 -15px;}
    div.nav li li:hover ul, div#nav li li.sfhover ul { margin: -25px 0 0 270px; }
  6. Scott
    Scott avatar
    28 posts
    Registered:
    12 Nov 2010
    19 Apr 2011
    Link to this post
    Okay. I found solution to the wrapping issue. 'white-space:normal' - which I have never knew existed. Now it works.

    So, my last problem is getting the Hover color to stay highlighted on FOCUS. Any help would be appreciated. 
  7. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    19 Apr 2011
    Link to this post
    So with the BUILT-IN nav control you want to know what the current node is to style it right?

    This?
  8. Scott
    Scott avatar
    28 posts
    Registered:
    12 Nov 2010
    19 Apr 2011
    Link to this post
    Well, in the early versions of SiteFinity (where I left my sanity) :) We were able to highlight the active page with a simple CSS class (below):

     .RadMenu .rmHorizontal .rmFocused { }

    However I am not getting any response when viewing my pages. After reviewing this POST, I get the feeling its a little more involved?? Is this correct?
  9. Steve
    Steve avatar
    3037 posts
    Registered:
    03 Dec 2008
    19 Apr 2011
    Link to this post
    I haven't used the built-in nav yet, but from my understanding IN THAT POST they have not built in the ability to denote the current page via a CSS class.  So in the current menu you really have no idea what the current node is unless you create a usercontrol to do it yourself, and thus lose all the designer functionality of the provided nav control.

    ...dont shoot the messenger ;)
  10. Scott
    Scott avatar
    28 posts
    Registered:
    12 Nov 2010
    19 Apr 2011
    Link to this post
    Hmm, that makes sense - at least its consistent with most of my 4.0 problems. Thanks for reaching out Steve!.

    Maybe I will see if I can decipher that original post. Changing 'NULLS', and 'Variables' and all that non-sense.

  11. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    16 Aug 2017
    21 Apr 2011
    Link to this post
    Hello Steve and Scott,

    Please, excuse us for the inconvenience. We have logged a feature request for the ability to add a CSS class for the currently active page in the built-in Navigation control. You can track its status and vote for it in PITS on this public URL . Please don't hesitate to write back if you have other questions.



    Best wishes,
    Boyan Barnev
    the Telerik team

11 posts, 0 answered