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@...>
      > 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.)

      <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"
      <!-- Combo-handled YUI JS files: -->
      <script type="text/javascript"

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



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

      var tree = new YAHOO.widget.TreeView("treeDiv1");


    • Show all 7 messages in this topic