Loading ...
Sorry, an error occurred while loading the content.

Styling Text in TreeView

Expand Messages
  • cklester
    I m trying to add color and background-color styling to a treeview list and it s not working as I expect. The following does not work:
    Message 1 of 7 , Dec 30, 2008
    • 0 Attachment
      I'm trying to add color and background-color styling to a treeview
      list and it's not working as I expect.

      The following does not work:
      <!-- this is in the header of course-->
      <style type="text/css">
      #network_view ul li.assoc {color:blue;background-color:yellow;}
      #network_view ul li.cust {color:green;}
      </style>

      <!-- somewhere in the body-->
      <div class="yui-skin-sam">
      <div id="network_view">
      <ul>
      <li class="assoc">Dangerously, Johnny
      <ul>
      <li class="cust">Doyle, Carmen
      <ul>
      </ul>
      </div>
      </div>

      How can I style those two <li> tags?

      I even tried something like this:

      <li><span style="color:green;">Dangerously, Johnny</span>

      but that didn't work either.
    • cjavajim
      ... One thing that helped me alot was: a DOM Inspector for your browser. Invoke it on your HTML file and you will (perhaps surprisingly) discover that TreeView
      Message 2 of 7 , Dec 30, 2008
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "cklester" <ydn-javascript@...>
        wrote:
        >
        > I'm trying to add color and background-color styling to a treeview
        > list and it's not working as I expect.
        >
        > The following does not work:
        > <!-- this is in the header of course-->
        > <style type="text/css">
        > #network_view ul li.assoc {color:blue;background-color:yellow;}
        > #network_view ul li.cust {color:green;}
        > </style>
        >
        > <!-- somewhere in the body-->
        > <div class="yui-skin-sam">
        > <div id="network_view">
        > <ul>
        > <li class="assoc">Dangerously, Johnny
        > <ul>
        > <li class="cust">Doyle, Carmen
        > <ul>
        > </ul>
        > </div>
        > </div>
        >
        > How can I style those two <li> tags?
        >
        > I even tried something like this:
        >
        > <li><span style="color:green;">Dangerously, Johnny</span>
        >
        > but that didn't work either.
        >

        One thing that helped me alot was: a DOM Inspector for your browser.
        Invoke it on your HTML file and you will (perhaps surprisingly)
        discover that TreeView pretty much destroys your HTML
        markup/attributes and replaces it with its own.

        There are also YUI pages about skinning YUI elements.

        FWIW here is a simple edit to apply a yellow background. (BTW your CSS
        "color:blue" & "color:green" are not valid markup.)

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>TreeView Skin</title>

        <!-- Combo-handled YUI CSS files: -->
        <link rel="stylesheet" type="text/css"
        href="http://yui.yahooapis.com/combo?2.6.0/build/treeview/assets/skins/sam/treeview.css">
        <!-- Combo-handled YUI JS files: -->
        <script type="text/javascript"
        src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo/yahoo-min.js&2.6.0/build/event/event-min.js&2.6.0/build/dom/dom-min.js&2.6.0/build/treeview/treeview-min.js"></script>

        <style type="text/css">
        #treeDiv1 .ygtvlabel {background-color:yellow;}
        </style>

        </head>

        <body>

        <div id="treeDiv1">
        <ul>
        <li>List 0
        <ul>
        <li>List 0-0
        <ul>
        <li>item 0-0-0</li>
        <li>item 0-0-1</li>
        </ul>
        </li>
        </ul>
        </li>
        <li>List 1
        <ul>
        <li>List 1-0</a>
        <ul>
        <li>item 1-0-0</li>
        <li>item 1-0-1</li>
        </ul>
        </li>
        </ul>
        </li>
        </ul>
        </div>

        <script>
        var tree = new YAHOO.widget.TreeView("treeDiv1");
        tree.render();
        </script>

        </body>

        </html>
      • cjavajim
        ... href= http://yui.yahooapis.com/combo?2.6.0/build/treeview/assets/skins/sam/treeview.css ...
        Message 3 of 7 , Dec 30, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "cjavajim" <cjavajim@...> wrote:
          >
          > --- In ydn-javascript@yahoogroups.com, "cklester" <ydn-javascript@>
          > wrote:
          > >
          > > I'm trying to add color and background-color styling to a treeview
          > > list and it's not working as I expect.
          > >
          > > The following does not work:
          > > <!-- this is in the header of course-->
          > > <style type="text/css">
          > > #network_view ul li.assoc {color:blue;background-color:yellow;}
          > > #network_view ul li.cust {color:green;}
          > > </style>
          > >
          > > <!-- somewhere in the body-->
          > > <div class="yui-skin-sam">
          > > <div id="network_view">
          > > <ul>
          > > <li class="assoc">Dangerously, Johnny
          > > <ul>
          > > <li class="cust">Doyle, Carmen
          > > <ul>
          > > </ul>
          > > </div>
          > > </div>
          > >
          > > How can I style those two <li> tags?
          > >
          > > I even tried something like this:
          > >
          > > <li><span style="color:green;">Dangerously, Johnny</span>
          > >
          > > but that didn't work either.
          > >
          >
          > One thing that helped me alot was: a DOM Inspector for your browser.
          > Invoke it on your HTML file and you will (perhaps surprisingly)
          > discover that TreeView pretty much destroys your HTML
          > markup/attributes and replaces it with its own.
          >
          > There are also YUI pages about skinning YUI elements.
          >
          > FWIW here is a simple edit to apply a yellow background. (BTW your CSS
          > "color:blue" & "color:green" are not valid markup.)
          >
          > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          > "http://www.w3.org/TR/html4/strict.dtd">
          > <html>
          > <head>
          > <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          > <title>TreeView Skin</title>
          >
          > <!-- Combo-handled YUI CSS files: -->
          > <link rel="stylesheet" type="text/css"
          >
          href="http://yui.yahooapis.com/combo?2.6.0/build/treeview/assets/skins/sam/treeview.css">
          > <!-- Combo-handled YUI JS files: -->
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo/yahoo-min.js&2.6.0/build/event/event-min.js&2.6.0/build/dom/dom-min.js&2.6.0/build/treeview/treeview-min.js"></script>
          >
          > <style type="text/css">
          > #treeDiv1 .ygtvlabel {background-color:yellow;}
          > </style>
          >
          > </head>
          >
          > <body>
          >
          > <div id="treeDiv1">
          > <ul>
          > <li>List 0
          > <ul>
          > <li>List 0-0
          > <ul>
          > <li>item 0-0-0</li>
          > <li>item 0-0-1</li>
          > </ul>
          > </li>
          > </ul>
          > </li>
          > <li>List 1
          > <ul>
          > <li>List 1-0</a>
          > <ul>
          > <li>item 1-0-0</li>
          > <li>item 1-0-1</li>
          > </ul>
          > </li>
          > </ul>
          > </li>
          > </ul>
          > </div>
          >
          > <script>
          > var tree = new YAHOO.widget.TreeView("treeDiv1");
          > tree.render();
          > </script>
          >
          > </body>
          >
          > </html>
          >

          I opened treeview.css in an editor and added newlines to make it
          somewhat readable. Anyway here are the entries that specify a
          background-color:

          .ygtvlabel,.ygtvlabel:link,.ygtvlabel:visited,.ygtvlabel:hover{margin-left:2px;text-decoration:none;background-color:white;cursor:pointer;}

          .ygtvfocus{background-color:#c0e0e0;border:none;}

          .ygtvfocus .ygtvlabel,.ygtvfocus .ygtvlabel:link,.ygtvfocus
          .ygtvlabel:visited,.ygtvfocus .ygtvlabel:hover{background-color:#c0e0e0;}

          .ygtv-label-editor{background-color:#f2f2f2;border:1px solid
          silver;position:absolute;display:none;overflow:hidden;margin:auto;z-index:9000;}

          Of course you're likely going to have to use a DOM Inspector to make
          sense of what these IDs correspond to.
        • cjavajim
          ... You may find this helpful. (Especially if you don t have a DOM Inspector handy!) http://developer.yahoo.com/yui/treeview/#style
          Message 4 of 7 , Dec 30, 2008
          • 0 Attachment
            --- In ydn-javascript@yahoogroups.com, "cklester" <ydn-javascript@...>
            wrote:
            >
            > I'm trying to add color and background-color styling to a treeview
            > list and it's not working as I expect.
            >
            > The following does not work:
            > <!-- this is in the header of course-->
            > <style type="text/css">
            > #network_view ul li.assoc {color:blue;background-color:yellow;}
            > #network_view ul li.cust {color:green;}
            > </style>
            >
            > <!-- somewhere in the body-->
            > <div class="yui-skin-sam">
            > <div id="network_view">
            > <ul>
            > <li class="assoc">Dangerously, Johnny
            > <ul>
            > <li class="cust">Doyle, Carmen
            > <ul>
            > </ul>
            > </div>
            > </div>
            >
            > How can I style those two <li> tags?
            >
            > I even tried something like this:
            >
            > <li><span style="color:green;">Dangerously, Johnny</span>
            >
            > but that didn't work either.
            >


            You may find this helpful. (Especially if you don't have a DOM
            Inspector handy!)

            http://developer.yahoo.com/yui/treeview/#style
          • Satyam
            cjavajim wrote: [...] ... You can use treeview-skin.css which is un-compressed. You will find the uncompressed CSS files for any of the widgets not in the
            Message 5 of 7 , Dec 31, 2008
            • 0 Attachment
              cjavajim wrote:

              [...]
              >
              > I opened treeview.css in an editor and added newlines to make it
              > somewhat readable.
              You can use treeview-skin.css which is un-compressed.

              You will find the uncompressed CSS files for any of the widgets not in
              the general assets folder: /build/assets/skins/sam but in the
              individual assets folder for each component:
              /build/treeview/assets/skins/sam

              Satyam
            • Satyam
              User cjavajim is correct, the HTML parser does not read the classNames from the original markup. The tree is completely recreated, nothing of the original
              Message 6 of 7 , Dec 31, 2008
              • 0 Attachment
                User cjavajim is correct, the HTML parser does not read the classNames
                from the original markup. The tree is completely recreated, nothing of
                the original remains except for the bits explicitly read by the parser
                and recreated in the TreeView, classNames are not one of them.

                The best way to deal with styling issues is to use a Dom inspector a
                cjavajim well says. If you have Firebug over Firefox, you simply open
                Firebug, click on the Inspect tab and click on the element you want to
                style. Firebug will show you the current style plus all those that had
                been overridden by other declarations so it also gives you an idea of
                the full hierarchy of styles. You can also go up the HTML element
                hierarchy and see the styles and classNames of container elements.

                In your case, I see that classNames "assoc" and "cust" are at different
                levels in the hierarchy. The TreeView assigns a className
                "ygtvdepthNNN" to one of the elements that contain the text, where NNN
                is the level of the tree so you would have all nodes at the same level
                styled at once with a single declaration.

                Satyam


                cklester wrote:
                > I'm trying to add color and background-color styling to a treeview
                > list and it's not working as I expect.
                >
                > The following does not work:
                > <!-- this is in the header of course-->
                > <style type="text/css">
                > #network_view ul li.assoc {color:blue;background-color:yellow;}
                > #network_view ul li.cust {color:green;}
                > </style>
                >
                > <!-- somewhere in the body-->
                > <div class="yui-skin-sam">
                > <div id="network_view">
                > <ul>
                > <li class="assoc">Dangerously, Johnny
                > <ul>
                > <li class="cust">Doyle, Carmen
                > <ul>
                > </ul>
                > </div>
                > </div>
                >
                > How can I style those two <li> tags?
                >
                > I even tried something like this:
                >
                > <li><span style="color:green;">Dangerously, Johnny</span>
                >
                > but that didn't work either.
                >
                >
                > ------------------------------------
                >
                > Yahoo! Groups Links
                >
                >
                >
                > ------------------------------------------------------------------------
                >
                >
                > No virus found in this incoming message.
                > Checked by AVG - http://www.avg.com
                > Version: 8.0.176 / Virus Database: 270.10.1/1869 - Release Date: 30/12/2008 12:06
                >
                >
              • cklester
                Thank you Satyam and cjavajim!!!
                Message 7 of 7 , Jan 1, 2009
                • 0 Attachment
                  Thank you Satyam and cjavajim!!!
                Your message has been successfully submitted and would be delivered to recipients shortly.