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

43061Re: Styling Text in TreeView

Expand Messages
  • cjavajim
    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>
    • Show all 7 messages in this topic