RadTabStrip - unable to change the theme & back ground colour

2 posts, 0 answers
  1. Rabeek Ahamed
    Rabeek Ahamed avatar
    20 posts
    Member since:
    Sep 2012

    Posted 02 Dec 2010 Link to this post

    Hello Everybody. This is my first post in this site. I hope that I get a response as I am under tremendous pressure to finish this task. I am using Telerik Web.UI_2010_3_1109 along with ASP.net & VS 2008. I have attached two files. The page which I am designing has to look like in image homepage_payroll.jpg and it currently looks like the one in image  paroll_current.jpg. I am using

    RadTabStrip and RadMultiPage. I am creating the tab pages dynamically. Please find below the css file which I have used to style the tab pages.

     

     


    I have also attached an image of my VS solution explorer which shows the list of Tab Strip skins I have. I am totally confused and unable to design the tab strip & pages as per the requirement. It would be great if any one can help me on this.

    .CSS File

     

    .RadTabStrip_Green .rtsLI,
    .RadTabStrip_Green .rtsLink
    {
     color: black;
     font: 12px/26px "Segoe UI", Arial, sans-serif;
     
      
    }

    .RadTabStrip_Green .rtsLI.rtsLast { color:blue; }

    .RadTabStripLeft_Green .rtsSeparator,
    .RadTabStripRight_Green .rtsSeparator
    {
     background: #F7DBEF;
    }

    /* <disabled tabs> */
    .RadTabStrip_Green .rtsDisabled
    .RadTabStripLeft_Green .rtsDisabled,
    .RadTabStripRight_Green .rtsDisabled,
    .RadTabStripBottom_Green .rtsDisabled,
    .RadTabStrip_Green_disabled .rtsDisabled
    {
    color: #bcb;
    cursor: default;
    }
    /* </disabled tabs> */

    /* <scrolling arrows> */
    .RadTabStrip_Green .rtsNextArrow,
    .RadTabStrip_Green .rtsPrevArrow,
    .RadTabStrip_Green .rtsPrevArrowDisabled,
    .RadTabStrip_Green .rtsNextArrowDisabled
    {
     background-image: url('TabStrip/TabStripStates.png');
    }
    /* </scrolling arrows> */

    /* <tab backgrounds> */

    .RadTabStripTop_Green .rtsLevel
    {
         background-color: #D6D3D6;
         border-bottom-color:#F7DBEF;
         border-bottom-style:solid;
         border-bottom-width:1px;
    }

    .RadTabStripTop_Green .rtsLevel .rtsLink,
    .RadTabStripTop_Green .rtsLevel .rtsOut,
    .RadTabStripBottom_Green .rtsLevel .rtsLink,
    .RadTabStripBottom_Green .rtsLevel .rtsOut,
    .RadTabStripTop_Green_Baseline .rtsLevel,
    .RadTabStripBottom_Green_Baseline .rtsLevel { background-image: url('TabStrip/TabStripStates.png'); }

    .RadTabStripLeft_Green .rtsLink,
    .RadTabStripRight_Green .rtsLink { background-image: url('TabStrip/TabStripStates.png'); }

    .RadTabStripLeft_Green .rtsLast .rtsLink,
    .RadTabStripRight_Green .rtsLast .rtsLink
    {
     border-bottom: 1px solid red;
    }

    /* </tab backgrounds> */

    /* <background positioning: overlapping tabs> */

    /* <orientation: top> */

    .RadTabStripTop_Green .rtsLink
    {
        background: #D6D3D6;
        /*background-position: 0 -52px;*/
    }
    /*.RadTabStripTop_Green .rtsFirst .rtsLink { background-position: 0 0; }*/
    .RadTabStripTop_Green .rtsOut { background-position: 100% -52px; }
    /*.RadTabStripTop_Green .rtsLast .rtsOut { background-position: 100% 0; }*/

    .RadTabStripTop_Green .rtsLI .rtsSelected { background-position: 0 -26px;}
    .RadTabStripTop_Green .rtsSelected { background: #F7DBEF url('TabStrip/TabStripStates.png') no-repeat 0 -272px; }
    .RadTabStripTop_Green .rtsSelected .rtsOut { background: #F7DBEF url('TabStrip/TabStripVStates_rtl.jpg') no-repeat 100% -72px; }
    .RadTabStripTop_Green .rtsFirst .rtsSelected { background: #F7DBEF url('TabStrip/TabStripVStates.png') no-repeat 0 -180px; }
    .RadTabStripTop_Green .rtsLI .rtsAfter { background-position: 0 -78px; }
    .RadTabStripTop_Green .rtsLast .rtsSelected { background: #F7DBEF url('TabStrip/TabStripVStates.png') no-repeat 100% -180px; }
    .RadTabStripTop_Green .rtsLast .rtsSelected .rtsOut { background: #F7DBEF url('TabStrip/TabStripVStates.png') no-repeat 0 -72px; }
    .RadTabStripTop_Green_Baseline .rtsLevel { background-position: 0 100%; background-repeat: repeat-x; }

    /* </orientation: top> */

    /* <orientation: bottom> */

    .RadTabStripBottom_Green .rtsLevel .rtsLink { background-position: 0 -130px;}
    .RadTabStripBottom_Green .rtsLevel .rtsFirst .rtsLink { background-position: 0 -182px;}
    .RadTabStripBottom_Green .rtsLevel .rtsOut { background-position: 100% -130px;}
    .RadTabStripBottom_Green .rtsLevel .rtsLast .rtsOut { background-position: 100% -182px;}

    .RadTabStripBottom_Green .rtsLevel .rtsLI .rtsSelected { background-position: 0 -156px;}
    .RadTabStripBottom_Green .rtsLevel .rtsSelected .rtsOut { background-position: 100% -104px; }
    .RadTabStripBottom_Green .rtsLevel .rtsLI .rtsAfter { background-position: 0 -104px;}

    .RadTabStripBottom_Green .rtsLevel .rtsLast .rtsSelected .rtsOut { background-position: 100% -156px;}

    .RadTabStripBottom_Green_Baseline .rtsLevel { background-position: 0 -599px; background-repeat: repeat-x;}

    /* </orientation: bottom> */

    /* <orientation: right> */

    .RadTabStripRight_Green .rtsUL .rtsLink,
    .RadTabStripRight_Green .rtsUL .rtsLI .rtsDisabled:hover { background-position: 100% 0; text-align: left;}
    .RadTabStripRight_Green .rtsUL .rtsLink:hover { background-position: 100% -200px;}
    .RadTabStripRight_Green .rtsUL .rtsSelected,
    .RadTabStripRight_Green .rtsUL .rtsSelected:hover { background-position: 100% -400px;}

    /* </orientation: right> */

    /* <orientation: top (RTL)> */

    .RadTabStripTop_Green_rtl .rtsLevel .rtsLink
    {
     padding-left: 0;
     padding-right: 9px;
     
    }

    .RadTabStripTop_Green_rtl .rtsLevel .rtsOut
    {
     padding-left: 9px;
     padding-right: 0;
     
    }

    .RadTabStripTop_Green_rtl .rtsLevel .rtsLink,
    .RadTabStripTop_Green_rtl .rtsLevel .rtsOut
    {
         background-image: url('TabStrip/TabStripStates.png');
           
    }

    .RadTabStripTop_Green_rtl .rtsLevel .rtsLink { background-position: 100% -52px;}
    .RadTabStripTop_Green_rtl .rtsLevel .rtsFirst .rtsLink { background-position: 100% 0;}
    .RadTabStripTop_Green_rtl .rtsLevel .rtsOut { background-position: 0 -52px;}
    .RadTabStripTop_Green_rtl .rtsLevel .rtsLast .rtsOut { background-position: 0 0;}

    .RadTabStripTop_Green_rtl .rtsLevel .rtsLI .rtsSelected { background-position: 100% -26px;}
    .RadTabStripTop_Green_rtl .rtsLevel .rtsSelected .rtsOut { background-position: 0 -78px;}
    .RadTabStripTop_Green_rtl .rtsLevel .rtsLI .rtsAfter { background-position: 100% -78px;}

     

    .RadTabStripTop_Green_rtl .rtsLevel .rtsLast .rtsSelected .rtsOut { background-position: 0 -26px; }

    /* </orientation: top (RTL)> */

    /* </background positioning: overlapping tabs> */

    /* <simplistic sub-item styles> */

    .RadTabStrip_Green_SimpleSubItems .rtsLevel2,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel3,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel4 { background: #fff; }

    .RadTabStrip_Green_SimpleSubItems .rtsLevel2 .rtsSelected,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel3 .rtsSelected,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel4 .rtsSelected
    {
     text-decoration: underline;
    }

    .RadTabStrip_Green_SimpleSubItems .rtsLevel2 .rtsLink,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel2 .rtsOut,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel2 .rtsIn,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel3 .rtsLink,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel3 .rtsOut,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel3 .rtsIn,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel4 .rtsLink,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel4 .rtsOut,
    .RadTabStrip_Green_SimpleSubItems .rtsLevel4 .rtsIn
    {
     background: #F7DBEF;
    }
    .RadTabStrip_Green .rtsIn
    {
    font: 12px/20px arial,sans-serif;
    padding: 0 5px 5px;
    font-weight:bold;
    /*background:#F7DBEF;*/
    }
    /* </simplistic sub-item styles> */


    Thanks & Best Regards,
    Bharath

     

     

     

     

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 Dec 2010 Link to this post

    Hi Gopinath,

    Unfortunately I will need the images that you use in order to help you fix the skin. Can you open a support ticket and send me a live URL of your page, or just send me the skin along with the images it uses and a sample page/markup.

    Kind regards,
    Kamen Bundev
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top