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

Re: Styling Text in TreeView

Expand Messages
  • cjavajim
    ... You may find this helpful. (Especially if you don t have a DOM Inspector handy!) http://developer.yahoo.com/yui/treeview/#style
    Message 1 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 2 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 3 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 4 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.