Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Visual Style Builder > Images being overridden in css output

• Doug

  Posted on Feb 2, 2012 (permalink)

  I have tried creating skins based off of "simple" and "web20" doing my best to get spacing correct with these clunky controls. And then using images for backgrounds on the menu and hover items. However when I add it to visual studio and view- my images are completely overridden with the base colors. My images don't get processed at all.
  
  The odd thing is- I remove all references to these color, yet when the telerik builder compiles the css it puts them back in.
  
  I am focusing on the menu item (635 lines of css? Really?)
  
  Here is what is created.
  
  

  /* <RadMenu / Web20> */

   

  .RadMenu_new .rmRootGroup,

  .RadMenu_new a.rmLink,

  .RadMenu_new .rmText,

  .RadMenu_new .rmLeftArrow,

  .RadMenu_new .rmRightArrow,

  .RadMenu_new .rmTopArrow,

  .RadMenu_new .rmBottomArrow

  {

      background-image: url('Menu/rmSprite.png');

      background-color: transparent;

  }

   

  .RadMenu_new .rmRootGroup

  {

      border: 1px solid #6788be;

      background-color: #93b4df;

  }

   

  .RadMenu_new .rmHorizontal

  {

      background-repeat: repeat-x;

      background-position: 0 0;

  }

   

  .RadMenu_new .rmVertical

  {

      background-image: none;

  }

   

  /* <Root items> */

   

  .RadMenu_new,

  .RadMenu_new a.rmLink

  {

      font: normal 12px/23px "Segoe UI", Arial, sans-serif;

      text-decoration: none;

  }

   

  .RadMenu_new a.rmLink

  {

      color: #fff;

  }

   

  .RadMenu_new a.rmLink,

  .RadMenu_new a.rmLink .rmText

  {

      background-repeat: no-repeat;

      background-position: 0 500px;

  }

   

  .RadMenu_new .rmVertical .rmFirst,

  .RadMenu_new .rmVertical .rmLast

  {

      background: none;

  }

   

  .RadMenu_new a.rmLink:hover,

  .RadMenu_new a.rmFocused,

  .RadMenu_new a.rmSelected,

  .RadMenu_new a.rmExpanded,

  .RadMenu_new a.rmExpanded:hover

  {

      color: #0f3789;

      background-position: 0 -72px;

  }

   

  .RadMenu_new .rmFirst a.rmLink:hover,

  .RadMenu_new .rmFirst a.rmFocused,

  .RadMenu_new .rmFirst a.rmSelected,

  .RadMenu_new .rmFirst a.rmExpanded,

  .RadMenu_new .rmFirst a.rmExpanded:hover

  {

      background-position: -1px -72px;

  }

   

  .RadMenu_new a.rmLink:hover .rmText,

  .RadMenu_new a.rmFocused .rmText,

  .RadMenu_new a.rmSelected .rmText,

  .RadMenu_new a.rmExpanded .rmText,

  .RadMenu_new a.rmExpanded:hover .rmText

  {

      background-position: 100% -96px;

  }

   

  .RadMenu_new .rmLast a.rmLink:hover .rmText,

  .RadMenu_new .rmLast a.rmFocused .rmText,

  .RadMenu_new .rmLast a.rmSelected .rmText,

  .RadMenu_new .rmLast a.rmExpanded .rmText,

  .RadMenu_new .rmLast a.rmExpanded:hover .rmText

  {

      background-position: 0 -96px;

  }

   

  .RadMenu_new .rmItem a.rmDisabled,

  .RadMenu_new .rmItem a.rmDisabled:hover,

  .RadMenu_new .rmItem a.rmDisabled .rmText,

  .RadMenu_new .rmItem a.rmDisabled:hover .rmText

  {

      background-repeat: no-repeat;

      background-position: 0 500px;

  }

   

  .RadMenu_new .rmVertical a.rmLink

  {

      padding-top: 1px;

      padding-bottom: 1px;

  }

   

  .RadMenu_new .rmVertical a.rmLink:hover,

  .RadMenu_new .rmVertical a.rmFocused,

  .RadMenu_new .rmVertical a.rmSelected,

  .RadMenu_new .rmVertical a.rmExpanded,

  .RadMenu_new .rmVertical a.rmExpanded:hover

  {

      padding-top: 0;

      padding-bottom: 0;

      border-style: solid;

      border-color: #3f5f94;

      border-width: 1px 0;

  }

   

  .RadMenu_new .rmVertical a.rmLink:hover,

  .RadMenu_new .rmVertical a.rmFocused,

  .RadMenu_new .rmVertical a.rmSelected,

  .RadMenu_new .rmVertical a.rmExpanded,

  .RadMenu_new .rmVertical a.rmExpanded:hover,

  .RadMenu_new .rmVertical a.rmLink:hover .rmText,

  .RadMenu_new .rmVertical a.rmFocused .rmText,

  .RadMenu_new .rmVertical a.rmSelected .rmText,

  .RadMenu_new .rmVertical a.rmExpanded .rmText,

  .RadMenu_new .rmVertical a.rmExpanded:hover .rmText

  {

      background-position: -1px -72px;

  }

   

  .RadMenu_new .rmVertical .rmFirst a.rmLink:hover,

  .RadMenu_new .rmVertical .rmFirst a.rmFocused,

  .RadMenu_new .rmVertical .rmFirst a.rmSelected,

  .RadMenu_new .rmVertical .rmFirst a.rmExpanded,

  .RadMenu_new .rmVertical .rmFirst a.rmExpanded:hover

  {

      padding-top: 1px;

      padding-bottom: 0;

      border-top-width: 0;

  }

   

  .RadMenu_new .rmVertical .rmLast a.rmLink:hover,

  .RadMenu_new .rmVertical .rmLast a.rmFocused,

  .RadMenu_new .rmVertical .rmLast a.rmSelected,

  .RadMenu_new .rmVertical .rmLast a.rmExpanded,

  .RadMenu_new .rmVertical .rmLast a.rmExpanded:hover

  {

      padding-bottom: 1px;

      padding-top: 0;

      border-bottom-width: 0;

  }

   

  .RadMenu_new .rmVertical .rmItem a.rmDisabled:hover

  {

      padding-top: 1px;

      padding-bottom: 1px;

      border-width: 0;

  }

   

  .RadMenu_new .rmLast a.rmExpanded .rmText

  {

      background-position: 0 500px;

      background-repeat: no-repeat;

  }

   

  .RadMenu_new .rmRootGroup a.rmDisabled,

  .RadMenu_new .rmRootGroup a.rmDisabled:hover

  {

      color: #bdcae3;

      background: none;

  }

   

  /* </Root items> */

   

   

  /* <Submenu items> */

   

  .RadMenu_new .rmGroup,

  .RadMenu_new .rmMultiColumn,

  .RadMenu_new .rmGroup .rmVertical

  {

      border: 1px solid #6788BE;

      background: #fff url('Menu/rmVSprite.png') repeat-y -1px 0;

  }

   

  .RadMenu_new .rmTopFix,

  .RadMenu_new .rmBottomFix,

  .RadMenu_new .rmRoundedCorners .rmGroup .rmItem,

  .RadMenu_new .rmRoundedCorners li.rmFirstGroupColumn .rmItem,

  .RadMenu_new .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,

  .RadMenu_new .rmRoundedCorners ul.rmHorizontal .rmFirst,

  .RadMenu_new_Context.rmRoundedCorners .rmGroup .rmItem,

  .RadMenu_new_Context.rmRoundedCorners ul.rmHorizontal .rmFirst

  {

      background-image: url('Menu/rmVSprite.png');

      background-color: #fff;

      background-repeat: repeat-y;

      background-position: -3px 0;

  }

   

  * html .rmRoundedCorners_new .rmGroup .rmItem,

  * html .rmRoundedCorners_new ul.rmHorizontal .rmFirst

  {

      background-image: url('Menu/rmVSprite.png');

      background-color: #fff;

      background-repeat: repeat-y;

      background-position: -3px 0;

  }

   

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer .rmGroup,

  .RadMenu_new .rmRoundedCorners .rmScrollWrap .rmItem,

  .RadMenu_new .rmRoundedCorners .rmGroupColumn .rmItem,

  .RadMenu_new .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,

  .RadMenu_new .rmRoundedCorners .rmHorizontal .rmItem,

  .RadMenu_new .rmRoundedCorners .rmScrollWrap .rmVertical,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrap .rmItem,

  .RadMenu_new_Context.rmRoundedCorners .rmHorizontal .rmItem,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrap .rmVertical

  {

      background-image: none;

  }

   

  * html .rmRoundedCorners_new .rmScrollWrapContainer .rmGroup,

  * html .rmRoundedCorners_new .rmScrollWrap .rmItem,

  * html .rmRoundedCorners_new .rmHorizontal .rmItem,

  * html .rmRoundedCorners_new .rmScrollWrap .rmVertical

  {

      background-image: none;

  }

   

  .RadMenu_new .rmRoundedCorners .rmGroupColumn

  {

      background-color: #fff;

  }

   

  .RadMenu_new .rmBottomLeft,

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer,

  .RadMenu_new_Context.rmRoundedCorners ul.rmGroup,

  .RadMenu_new .rmRoundedCorners ul.rmGroup,

  .RadMenu_new .rmRoundedCorners .rmMultiColumn

  {

      background-image:  url('Menu/rmRoundedLeft.png');

      background-color: transparent;

      background-repeat: no-repeat;

  }

   

  * html .rmRoundedCorners_new .rmScrollWrapContainer,

  * html .rmRoundedCorners_new .rmGroup ul.rmGroup,

  * html .rmRoundedCorners_new ul.rmGroup

  {

      background-image:  url('Menu/rmRoundedLeft.png');

      background-color: transparent;

      background-repeat: no-repeat;

  }

   

  .RadMenu_new .rmTopRight,

  .RadMenu_new .rmBottomRight

  {

      background-image:  url('Menu/rmRoundedRight.png');

      background-color: transparent;

      background-repeat: no-repeat;

  }

   

  .RadMenu_new .rmTopFix,

  .RadMenu_new .rmBottomFix,

  .RadMenu_new .rmRoundedCorners .rmGroup .rmFirst,

  .RadMenu_new_Context.rmRoundedCorners .rmGroup .rmFirst,

  .rmRoundedCorners_new .rmGroup .rmFirst

  {

      border-color: #6788BE;

  }

   

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix

  {

      background: #FFF;

  }

   

  * html .rmRoundedCorners_new .rmScrollWrapContainer .rmTopFix,

  * html .rmRoundedCorners_new .rmScrollWrapContainer .rmBottomFix

  {

      background: #FFF;

  }

   

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow

  {

      background-color: #FFF;

      border: 0;

  }

   

  * html .rmRoundedCorners_new .rmScrollWrapContainer .rmTopArrow,

  * html .rmRoundedCorners_new .rmScrollWrapContainer .rmBottomArrow,

  * html .rmRoundedCorners_new .rmScrollWrapContainer .rmLeftArrow,

  * html .rmRoundedCorners_new .rmScrollWrapContainer .rmRightArrow

  {

      background-color: #FFF;

      border: 0;

  }

   

  .RadMenu_new li.rmTopFix,

  .RadMenu_new li.rmBottomFix

  {

      background-position: -4px 0;

  }

   

  .RadMenu_new_rtl .rmBottomLeft,

  .RadMenu_new_rtl .rmRoundedCorners ul.rmGroup,

  .RadMenu_new_rtl .rmRoundedCorners .rmMultiColumn,

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer,

  .RadMenu_new .rmScrollWrapContainer .rmBottomLeft,

  .rmRoundedCorners.RadMenu_new_Context_rtl ul.rmGroup,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer

  {

      background-image: url('Menu/rmRoundedLeft_rtl.png');

  }

   

  .RadMenu_new_rtl .rmTopRight,

  .RadMenu_new_rtl .rmBottomRight

  {

      background-image: url('Menu/rmRoundedRight_rtl.png');

  }

   

  .RadMenu_new_rtl li.rmTopFix,

  .RadMenu_new_rtl li.rmBottomFix,

  .RadMenu_new_rtl .rmRoundedCorners .rmGroup .rmItem,

  .rmRoundedCorners.RadMenu_new_Context_rtl ul.rmGroup .rmItem

  {

      background-position: 101% 0;

  }

   

  .RadMenu_new .rmGroup a.rmLink

  {

      color: #000;

  }

   

  .RadMenu_new .rmSlide .rmScrollWrap

  {

      background-image: none;

  }

   

  .RadMenu_new_rtl .rmGroup,

  .RadMenu_new_rtl .rmMultiColumn,

  .RadMenu_new_rtl .rmGroup .rmVertical

  {

      background-position: 101% 0;

  }

   

  .RadMenu_new .rmRootGroup .rmHorizontal

  {

      background-image: none;

  }

   

  .RadMenu_new .rmScrollWrap .rmVertical

  {

      border: 0;

  }

   

  .RadMenu_new .rmRoundedCorners .rmScrollWrapContainer li.rmItem,

  .RadMenu_new_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,

  .rmRoundedCorners_new .rmScrollWrapContainer li.rmItem

  {

      background: none;

  }

   

  .RadMenu_new .rmGroup a.rmLink:hover,

  .RadMenu_new .rmGroup .rmItem a.rmFocused,

  .RadMenu_new .rmGroup .rmItem a.rmSelected,

  .RadMenu_new .rmGroup .rmItem a.rmExpanded

  {

      color: #0f3789;

  }

   

  .RadMenu_new .rmGroup a.rmDisabled,

  .RadMenu_new .rmGroup a.rmDisabled:hover

  {

      color: #8a8a8a;

  }

   

  .RadMenu_new .rmGroup .rmItem a.rmLink,

  .RadMenu_new .rmGroup .rmItem a.rmLink:hover,

  .RadMenu_new .rmGroup .rmItem a.rmFocused,

  .RadMenu_new .rmGroup .rmItem a.rmSelected,

  .RadMenu_new .rmGroup .rmItem a.rmExpanded

  {

      padding-top: 0;

      padding-bottom: 0;

      border: 0;

  }

   

  .RadMenu_new .rmGroup a.rmLink,

  .RadMenu_new .rmGroup .rmText,

  .RadMenu_new .rmGroup .rmItem a.rmDisabled,

  .RadMenu_new .rmGroup .rmItem a.rmDisabled:hover,

  .RadMenu_new .rmGroup .rmItem a.rmDisabled .rmText,

  .RadMenu_new .rmGroup .rmItem a.rmDisabled:hover .rmText

  {

      background-position: 0 500px;

      background-repeat: no-repeat;

      background-color: transparent;

  }

   

  .RadMenu_new .rmGroup a.rmLink:hover,

  .RadMenu_new .rmGroup a.rmFocused,

  .RadMenu_new .rmGroup a.rmSelected,

  .RadMenu_new .rmGroup a.rmExpanded

  {

      background-position: 0 -168px;

  }

   

  .RadMenu_new .rmGroup a.rmLink:hover .rmText,

  .RadMenu_new .rmGroup a.rmFocused .rmText,

  .RadMenu_new .rmGroup a.rmSelected .rmText,

  .RadMenu_new .rmGroup a.rmExpanded .rmText

  {

      background-position: 100% -192px;

  }

   

  /* <expand arrows> */

   

  .RadMenu_new .rmRootGroup .rmLink .rmExpandRight,

  .RadMenu_new .rmGroup .rmLink .rmExpandDown,

  .RadMenu_new_Context .rmGroup .rmLink .rmExpandRight,

  .RadMenu_new .rmRootGroup .rmItem a.rmDisabled .rmExpandRight,

  .RadMenu_new .rmGroup .rmItem a.rmDisabled .rmExpandDown,

  .RadMenu_new .rmRootGroup .rmItem a.rmDisabled:hover .rmExpandRight,

  .RadMenu_new .rmGroup .rmItem a.rmDisabled:hover .rmExpandDown

  {

      background-position: 100% -216px;

  }

   

  .RadMenu_new a.rmLink:hover .rmExpandRight,

  .RadMenu_new a.rmFocused .rmExpandRight,

  .RadMenu_new a.rmExpanded .rmExpandRight,

  .RadMenu_new a.rmSelected .rmExpandRight,

  .RadMenu_new a.rmLink:hover .rmExpandLeft,

  .RadMenu_new a.rmFocused .rmExpandLeft,

  .RadMenu_new a.rmExpanded .rmExpandLeft,

  .RadMenu_new a.rmSelected .rmExpandLeft

  {

      background-image: url('Menu/rmRootExpand.png');

  }

   

  .RadMenu_new .rmVertical a.rmLink:hover .rmExpandRight,

  .RadMenu_new .rmVertical a.rmSelected .rmExpandRight,

  .RadMenu_new .rmVertical a.rmExpanded .rmExpandRight,

  .RadMenu_new .rmVertical a.rmFocused .rmExpandRight

  {

      background-position: 100% 0;

  }

   

  .RadMenu_new .rmGroup a.rmLink:hover .rmExpandRight,

  .RadMenu_new .rmGroup a.rmFocused .rmExpandRight,

  .RadMenu_new .rmGroup a.rmSelected .rmExpandRight,

  .RadMenu_new .rmGroup a.rmExpanded .rmExpandRight,

  .RadMenu_new .rmGroup a.rmLink:hover .rmExpandDown,

  .RadMenu_new .rmGroup a.rmFocused .rmExpandDown,

  .RadMenu_new .rmGroup a.rmSelected .rmExpandDown,

  .RadMenu_new .rmGroup a.rmExpanded .rmExpandDown

  {

      background-image: url('Menu/rmSprite.png');

      background-position: 100% -240px;

  }

   

  .RadMenu_new .rmRootGroup a.rmDisabled:hover .rmExpandRight,

  .RadMenu_new .rmGroup a.rmDisabled:hover .rmExpandDown

  {

      background-image: url('Menu/rmSprite.png');

      background-position: 100% -216px;

  }

   

  /* </expand arrows> */

   

  /* <rtl> */

   

  .RadMenu_new_rtl a.rmLink:hover,

  .RadMenu_new_rtl a.rmFocused,

  .RadMenu_new_rtl a.rmSelected

  {

      background-position: 100% -96px;

  }

   

  .RadMenu_new_rtl a.rmLink:hover .rmText,

  .RadMenu_new_rtl a.rmFocused .rmText,

  .RadMenu_new_rtl a.rmSelected .rmText

  {

      background-position: 0 -72px;

  }

   

  .RadMenu_new_rtl a.rmExpanded,

  .RadMenu_new_rtl a.rmExpanded:hover

  {

      background-position: 100% -144px;

  }

   

  .RadMenu_new_rtl a.rmExpanded .rmText,

  .RadMenu_new_rtl a.rmExpanded:hover .rmText

  {

      background-position: 0 -120px;

  }

   

  .RadMenu_new_rtl .rmGroup a.rmLink:hover,

  .RadMenu_new_rtl .rmGroup a.rmFocused,

  .RadMenu_new_rtl .rmGroup a.rmSelected,

  .RadMenu_new_rtl .rmGroup a.rmExpanded

  {

      background-position: 100% -264px;

  }

   

  .RadMenu_new_rtl .rmGroup a.rmLink:hover .rmText,

  .RadMenu_new_rtl .rmGroup a.rmFocused .rmText,

  .RadMenu_new_rtl .rmGroup a.rmSelected .rmText,

  .RadMenu_new_rtl .rmGroup a.rmExpanded .rmText

  {

      background-position: 0 -288px;

  }

   

  .RadMenu_new_Context_rtl .rmVertical .rmLink .rmExpandLeft,

  .RadMenu_new_rtl .rmRootGroup a.rmLink .rmExpandLeft

  {

      background-position: 0 -312px;

  }

   

  .RadMenu_new_rtl .rmVertical a.rmLink:hover .rmExpandLeft,

  .RadMenu_new_rtl .rmVertical a.rmSelected .rmExpandLeft,

  .RadMenu_new_rtl .rmVertical a.rmExpanded .rmExpandLeft,

  .RadMenu_new_rtl .rmVertical a.rmFocused .rmExpandLeft

  {

      background-position: 0 0;

  }

   

  .RadMenu_new_rtl .rmGroup a.rmLink:hover .rmExpandLeft,

  .RadMenu_new_rtl .rmGroup a.rmFocused .rmExpandLeft,

  .RadMenu_new_rtl .rmGroup a.rmSelected .rmExpandLeft,

  .RadMenu_new_rtl .rmGroup a.rmExpanded .rmExpandLeft

  {

      background-image: url('Menu/rmSprite.png');

      background-position: 0 -336px;

  }

   

  .RadMenu_new_rtl .rmRootGroup a.rmDisabled:hover .rmExpandLeft

  {

      background-image: url('Menu/rmSprite.png');

      background-position: 0 -312px;

  }

   

  /* </rtl> */

   

  /* </Submenu items> */

   

  /* <Submenu offsets (Web20 - specific, overlapping submenus)> */

   

  .RadMenu_new .rmFirst .rmSlide

  {

      margin: 0 0 0 -1px;

  }

   

  .RadMenu_new .rmVertical .rmSlide,

  .RadMenu_new .rmSlide .rmSlide,

  .RadMenu_new_Context .rmGroup .rmSlide

  {

      margin: 0 0 0 -5px;

  }

   

  .RadMenu_new_rtl .rmSlide

  {

      margin: 0 0 0 0;

  }

   

  .RadMenu_new_rtl .rmFirst .rmSlide

  {

      margin-left: 1px;

  }

   

  .RadMenu_new_rtl .rmVertical .rmSlide,

  .RadMenu_new_rtl .rmSlide .rmSlide,

  .RadMenu_new_Context_rtl .rmGroup .rmSlide

  {

      margin: 0 0 0 5px;

  }

   

  /* </Submenu offsets> */

   

  /* <Scrolling arrows> */

   

  .RadMenu_new .rmLeftArrow,

  .RadMenu_new .rmRightArrow

  {

      background-color: #ECF4FF;

  }

   

  .RadMenu_new .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }

  .RadMenu_new .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }

   

  .RadMenu_new .rmTopArrow,

  .RadMenu_new .rmBottomArrow,

  .RadMenu_new .rmGroup .rmLeftArrow,

  .RadMenu_new .rmGroup .rmRightArrow

  {

      background-color: #ECF4FF;

  }

   

  .RadMenu_new .rmTopArrow { background-position: 50% -367px; border-bottom: 1px solid #828282; }

  .RadMenu_new .rmBottomArrow { background-position: 50% -391px; border-top: 1px solid #828282; }

   

  /* </Scrolling arrows> */

   

  /* <Separators> */

   

  .RadMenu_new .rmHorizontal .rmSeparator .rmText,

  .RadMenu_new .rmVertical .rmHorizontal .rmSeparator .rmText

  {

      height: 22px;

      margin: 1px 0 0;

      width: 1px;

  }

   

  .RadMenu_new .rmHorizontal .rmSeparator .rmText

  {

      background-color: transparent;

      background-position: 0 -386px;

  }

   

  .RadMenu_new_Context .rmSeparator .rmText,

  .RadMenu_new .rmHorizontal .rmGroup .rmSeparator .rmText,

  .RadMenu_new .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText

  {

      background-color: transparent;

      background-position: 0 -408px;

  }

   

  /* </Separators> */

   

  /* </RadMenu / Web20> */

   

   

   

   

   

   

   div.RadMenu_new {

   

      height: 38px;

   

  }

   

   div.RadMenu_new .rmRootGroup {

   

      height: 38px;

   

      background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Menu&skin=new&file=menu_bg.jpg&t=726445585');

   

  }

   

   div.RadMenu_new .rmItem .rmLink {

   

      font-family: Arial;

   

      font-weight: bold;

   

  }

   

   div.RadMenu_new .rmItem .rmLink:hover {

   

      background-image: none;

   

      height: 26px;

   

      background-position: 0px 0px;

   

      padding-left: 10px;

   

  }

   

   div.RadMenu_new .rmItem .rmLink:hover .rmText {

   

      background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Menu&skin=new&file=menu_bg_hover.jpg&t=726445585');

   

      height: 26px;

   

      background-color: transparent;

   

      background-repeat: repeat-x;

   

      background-position: 100% 0px;

   

      color: rgb(255, 255, 255);

   

      font-family: Arial;

   

      font-weight: bold;

   

      padding-left: 12px;

   

  }

   

   div.RadMenu_new .rmItem .rmLink .rmExpandDown {

   

      background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Menu&skin=new&file=menu_bg_hover.jpg&t=726445585');

   

      color: rgb(255, 255, 255);

   

      font-weight: bold;

   

  }

   

   div.RadMenu_new .rmItem .rmExpanded {

   

      background-image: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Menu&skin=new&file=menu_bg_hover.jpg&t=726445585');

   

      height: 26px;

   

  }

   

   div.RadMenu_new .rmItem .rmGroup {

   

      margin-top: 14px;

   

      background-image: none;

   

  }

  Reply

• Tsvetina Tsvetina

  Posted on Feb 7, 2012 (permalink)

  Hello Doug,
  
  Have you tried providing higher specificity for the CSS selectors and using background instead of backgorund-image property to set the background, e.g.:
  

  html div.RadMenu_new .rmRootGroup {

  background: url('ImageHandler.ashx?mode=get&suite=aspnet-ajax&control=Menu&skin=new&file=menu_bg.jpg&t=726445585');

  }

  
  Let us know if this helps.
  
  All the best,
  Tsvetina
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply


• Doug

  Posted on Feb 10, 2012 (permalink)

  I used the code as it was produced by your product, if that code doesn't work out of the box then the product is flawed.
  
  I wound up just going in and altering a theme from the ground up using compliant css, trying to eliminated the bloated mess your program creates. And believe me, if my company weren't insistent on using it- I wouldn't be putting this much effort into it.
  
  I do in 6 lines of code what takes you 736. Terrible ignorance of web standards and best practice.

  Reply

• Ivan Zhekov Ivan Zhekov

  Posted on Feb 15, 2012 (permalink)

  Hi, Doug.
  
  This might get lengthy, but bear with me.
  
  CSS stands for Cascading StyleSheets, emphasis on Cascading. I am sure you know that, but never the less, I wanted to stress on that.
  
  The cascade itself is done trough selectors and there are two main ways to proceed -- 1) a generic selector will style much more elements and 2) a specific selector will style less elements, or even one element.
  
  In order to overwrite certain values in a certain selector one would need a more specific selector.
  
  Further more, the cascade takes into account where a rule is defined, both in terms of position in the stylesheet and in terms where the file is included.
  
  That said, the Telerik styles are always loaded LAST in order, to ensure the proper styling.
  
  So if you have the following snippet:
  
  

  <div class="RadMenu RadMenu_CustomSkin">

  ..

  </div>

  
  and you you style it like:
  
  

  .RadMenu_CustomSkin {

      ...

  }

  
  it's likely that those styles will be overridden by the base styles, as they have the same specificity and are loaded after your file. Instead the snippet should be:
  
  

  div.RadMenu_CustomSkin {

      ...

  }

  
  or something even more specific.
  
  Now, on the file length. For a longest time it has been viewed both by developers and site owners that CSS should be valid.
  
  However with the development of browsers and new versions of CSS it has become obvious that new versions of CSS would be invalid when validated against old versions -- that means all new properties as well as vendor specific experimental properties are to be invalid.
  
  And in order to avoid that, developers would need to duplicate styles with some selector hacks so the CSS will validate. And example of selector hack is * html which is wrong by concept (as it means all HTML elements within other elements, which is impossible) but is valid style rule.
  
  But here is the funny thing, unlike HTML, where browsers would try to fix things, in CSS if anything is wrong it's simply omitted.
  
  So a new way of writing styles emerged, one that tried to minimize the number of duplicate lines by using attribute hacks where possible. Such example would be _width, which is ignored by all browsers but IE6, which allows for browser targeting.
  
  If we apply just this to the code below, we would get some 50 lines less code. If we put the opening curly braces on the same line, we would get another 50 or so lines. We could trim down empty lines and get even less.
  
  So it's not about how many lines there are in a style sheet, but how many meaningful lines.
  
  Never the less, there are still many lines left. So what are they about?
  
  As a company that delivers tools to developers for websites that will be viewed on a huge variety of browsers and devices, we need to provide flexible controls so the same (or similar) look and feel can be achieved everywhere.
  
  We could of course use minimalistic approach on markup, but then some of the eye candy would be lost, especially on older browsers.
  
  The eye candy, in the case of the menu are rounded corners and shadows, which adds even more the code.
  
  And if we add that, with few exceptions, our controls support RTL mode and other modes, such as vertical for the menu, you get to the number of CSS lines we currently have in the controls.
  
  One last thing, the Visual Style Builder is still a Beta product, thus incomplete and with features that may or may not meet client expectations. The best way to build a theme is by hand and from scratch (or by using a base template) and not by using the VSB.
  
  I guess you are right though, few things could be better and we appreciate when our customers share with us their thoughts. But we need to thread carefully when considering their suggestions, as we do not want to break already existing sites and applications built with previous versions of the suite.
  
  All that said, you could zip together a sample page with menu using the skin you created, plus all the related assets needed to produce the behaviour that frustrated you, open a new support ticket and attach that sample project zip file. We'll take a look and point you to the right direction.
  
  Regards,
  Ivan Zhekov
  the Telerik team

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Visual Style Builder > Images being overridden in css output