Coustmize the Skin of TreeView

1 posts, 0 answers
  1. Anshul
    Anshul avatar
    8 posts
    Member since:
    Mar 2013

    Posted 27 Feb 2014 Link to this post

    Hello team,

    I m working on radtreeview latest version. my requirement is that i want to customize the css of my treeview. i tried a lot on this , but it dont give me adject what i want.
    mainly which problem i faced is that:

    How can i hide i images "Nodespan" even if there is not exits images in my folder.
    How can i hide the border the nodes.

    i have atttached my CSS file and expected treeview node image. 
    Plaese help me out. its urgent for me.

    CSS code

    .RadTreeView_myskin{color:black;font:normal 12px/16px "Segoe UI",Arial,Helvetica,sans-serif}.RadTreeView_myskin .rtHover .rtIn{color:#363636;border:0px solid #97d7fc;background-color:#def0fc;background-image:url('TreeView/ItemHoveredBg.png')}.RadTreeView_myskin .rtSelected .rtIn{color:#363636;border:0px solid #97d7fc;background-color:#aedaf5;background-image:url('TreeView/ItemSelectedBg.png')}.RadTreeView_myskin .rtEdit .rtIn{border-color:#97d7fc;background:#ffffff}.RadTreeView_myskin .rtEdit .rtIn input{color:black;font:normal 12px/16px "Segoe UI",Arial,Helvetica,sans-serif}.RadTreeView_myskin .rtChecked,.RadTreeView_myskin .rtUnchecked,.RadTreeView_myskin .rtIndeterminate{background-image:url('Common/radFormToggleSprite.png');_background-image:url('Common/radFormToggleSpriteIE6.png')}.RadTreeView_myskin .rtLoadingIcon{background-image:url('Common/loading_small.gif')}.RadTreeView_myskin .rtSelected .rtLoadingBefore,.RadTreeView_myskin .rtSelected .rtLoadingAfter,.RadTreeView_myskin .rtSelected .rtLoadingBelow{color:#333333}.RadTreeView_myskin .rtPlus,.RadTreeView_myskin .rtMinus{background-image:url('TreeView/PlusMinus.png')}.RadTreeView_myskin .rtLines .rtLI,.RadTreeView_myskin .rtLines .rtLI .rtUL,.RadTreeView_myskin .rtLines .rtTop,.RadTreeView_myskin .rtLines .rtMid,.RadTreeView_myskin .rtLines .rtBot,.RadTreeView_myskin .rtLines .rtLast .rtTop{background-image:none}.RadTreeView_myskin_disabled .rtIn,.RadTreeView_myskin .rtDisabled .rtIn{color:#cccccc}


     div.RadTreeView_myskin .rtIn {

    font-family: Segoe UI, Arial, Helvetica, sans-serif;

    color: #002e66;

    font-size: 13px;

    line-height: 16px;

    font-weight: bold;

    background-color: #ffffff;

    border-right-color: #0096d6;

    background-image: none;

    height: 0px;

    border-bottom-color: #1baae3;

    padding: 0px;

    margin-left: 0px;

    width: 10px;

    text-indent: 0px;

    background-position: 0% 0%;

    background-repeat: no-repeat no-repeat;

    }

     div.RadTreeView_myskin .rtHover .rtIn {

    color: #005ccc;

    background-color: #ffffff;

    border-bottom-color: #97d7fc;

    padding: 0px 0px 20px;

    border-style: solid;

    border-width: 0px;

    font-family: Segoe UI, Arial, Helvetica, sans-serif;

    border-right-color: #97d7fc;

    border-top-color: #97d7fc;

    background-position: 0% 0%;

    }

     div.RadTreeView_myskin .rtSelected .rtIn {

    border-right-color: #97d7fc;

    border-bottom-color: #97d7fc;

    border-style: solid;

    border-width: 0px;

    color: #005ccc;

    }

     div.RadTreeView_myskin .rtMinus {

     background-image : url('TreeView/PlusMinus.png');


    }

     div.RadTreeView_myskin .rtPlus {

    background-image: url('TreeView/tabMenu_east_blue.png');

    }
    div.RadTreeView_myskin .rtLI {
        font-weight: bold;
    }
    div.RadTreeView_myskin .noChild {
        font-weight: normal;
    }
Back to Top