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

Re: [ydn-javascript] Re: YUI Layout Manager - Skinning the Layout

Expand Messages
  • Dav Glass
    Tommy -- Try this one: .yui-skin-sam .yui-layout .yui-layout-hd, .yui-skin-sam .yui-layout .yui-layout-ft, .yui-skin-sam .yui-layout .yui-layout-unit
    Message 1 of 8 , Dec 1, 2008
      Tommy --

      Try this one:

      .yui-skin-sam .yui-layout .yui-layout-hd,
      .yui-skin-sam .yui-layout .yui-layout-ft,
      .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd,
      .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-noft,
      .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
           border: none;
      }

      Also make sure and put these lines "after" the include of the layout.css file. Since they are over-ride statements then need to be after the original.

      Dav

      --
      Dav Glass
      davglass@...
      blog.davglass.com


      + Windows: n. - The most successful computer virus, ever. +
      + A computer without a Microsoft operating system is like a dog
         without bricks tied to its head +
      + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine  +


      On Mon, Dec 1, 2008 at 2:01 PM, tommy.bramble <tommy.bramble@...> wrote:

      --- In ydn-javascript@yahoogroups.com, "Dav Glass" <davglass@...>
      wrote:
      >
      > Tommy --
      >
      > Please post a link to a page so I can see it ;)
      >
      > Thanks
      > Dav
      >
      > --
      > Dav Glass
      > davglass@...

      > blog.davglass.com
      >
      >
      > + Windows: n. - The most successful computer virus, ever. +
      > + A computer without a Microsoft operating system is like a dog
      > without bricks tied to its head +
      > + A Microsoft Certified Systems Engineer is to computing what a
      > McDonalds Certified Food Specialist is to fine cuisine +
      >
      >
      > On Mon, Dec 1, 2008 at 12:09 PM, tommy.bramble
      <tommy.bramble@...>wrote:

      >
      > > Unfortunately that did not do it for me. I hadn't tried that
      exact
      > > combination, but I've tried many others like it. I can't figure
      out
      > > what I've done wrong. Here is the full code for the page:
      > >
      > > ***************START************************
      > > <!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=ISO-
      8859-
      > > 1" />
      > > <title>Full Page Layout - Example</title>
      > > <style type="text/css">
      > > /*margin and padding on body element
      > > can introduce errors in determining
      > > element position and are not recommended;
      > > we turn them off as a foundation for YUI
      > > CSS treatments. */
      > >
      > >
      > > .yui-skin-sam .yui-layout .yui-layout-hd,
      > > .yui-skin-sam .yui-layout .yui-layout-ft,
      > > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
      > > border: none;
      > > }
      > >
      > > .yui-layout-wrap
      > > {
      > > border:none;
      > > }
      > >
      > > body {
      > > margin:0;
      > > padding:0;
      > > }
      > >
      > > #left1, yui-layout-unit-left
      > > {
      > >
      > > }
      > >
      > > </style>
      > > <link rel="stylesheet" type="text/css"
      > > href="Javascript/yui/build/reset-fonts-grids/reset-fonts-
      grids.css" />
      > > <link rel="stylesheet" type="text/css"
      > > href="Javascript/yui/build/button/assets/skins/sam/button.css" />
      > > <link rel="stylesheet" type="text/css"
      > > href="Javascript/yui/build/assets/skins/sam/resize.css">
      > > <link rel="stylesheet" type="text/css"
      > > href="Javascript/yui/build/assets/skins/sam/layout.css">
      > > <script type="text/javascript"
      src="Javascript/yui/build/yahoo/yahoo-
      > > min.js"></script>
      > > <script type="text/javascript"
      src="Javascript/yui/build/event/event-
      > > min.js"></script>
      > > <script type="text/javascript" src="Javascript/yui/build/dom/dom-
      > > min.js"></script>
      > > <script src="Javascript/yui/build/yahoo-dom-event/yahoo-dom-
      > > event.js"></script>
      > > <script src="Javascript/yui/build/dragdrop/dragdrop-
      min.js"></script>
      > > <script src="Javascript/yui/build/element/element-beta-
      > > min.js"></script>
      > > <script src="Javascript/yui/build/animation/animation-
      > > min.js"></script>
      > > <script src="Javascript/yui/build/resize/resize-min.js"></script>
      > > <script src="Javascript/yui/build/layout/layout-min.js"></script>
      > > </head>
      > >
      > > <body class=" yui-skin-sam">
      > > <div id="top1"><p>Header Content</p></div>
      > > <div id="left1">
      > > <p>Left Content</p>
      > > </div>
      > > <div id="center1">
      > > <p>Left Content</p>
      > > </div>
      > >
      > > <script>
      > >
      > > (function() {
      > > var Dom = YAHOO.util.Dom,
      > > Event = YAHOO.util.Event;
      > >
      > > Event.onDOMReady(function() {
      > > var layout = new YAHOO.widget.Layout({
      > > units: [
      > > { position: 'top', height: 50, body: 'top1' },
      > > { position: 'left', width: 200, resize: true,
      > > body: 'left1', scroll: true },
      > > { position: 'center', body: 'center1' }
      > > ]
      > > });
      > > layout.render();
      > >
      > > });
      > >
      > > })();
      > > </script>
      > > </body>
      > > </html>
      > >
      > > ****************END***************
      > >
      > > --- In ydn-javascript@yahoogroups.com <ydn-javascript%
      40yahoogroups.com>,

      > > "Dav Glass" <davglass@>
      > > wrote:
      > > >
      > > > tommy.bramble --
      > > >
      > > > Something like this should do it:
      > > > .yui-skin-sam .yui-layout .yui-layout-hd,
      > > > .yui-skin-sam .yui-layout .yui-layout-ft,
      > > > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
      > > > border: none;
      > > > }
      > > >
      > > > Dav
      > > >
      > > > --
      > > > Dav Glass
      > > > davglass@
      > > > blog.davglass.com
      > > >
      > > >
      > > > + Windows: n. - The most successful computer virus, ever. +
      > > > + A computer without a Microsoft operating system is like a dog
      > > > without bricks tied to its head +
      > > > + A Microsoft Certified Systems Engineer is to computing what a
      > > > McDonalds Certified Food Specialist is to fine cuisine +
      > > >
      > > >
      > > > On Mon, Dec 1, 2008 at 9:37 AM, tommy.bramble
      > > <tommy.bramble@>wrote:
      > > >
      > > > > I'm using the layout manager to create a paneled layout
      > > (header, left,
      > > > > right). All the element units are working great, but I have a
      gray
      > > > > border around each element. I've looked over the skinning
      > > information
      > > > > for awhile now and can't seem to get rid of the gray border.
      Can
      > > > > anyone help me out with this?
      > > > >
      > > > > Any help is greatly appreciated!
      > > > >
      > > > >
      > > > >
      > > >
      > >
      > >
      > >
      >


    • tommy.bramble
      Dav, Thanks so much! In fact, the last solution you provided would ve worked if I had put it under the references to the layout skins. Rookie mistakes I m
      Message 2 of 8 , Dec 2, 2008
        Dav,

        Thanks so much! In fact, the last solution you provided would've
        worked if I had put it under the references to the layout skins.
        Rookie mistakes I'm making!

        Thanks again!

        -Tommy

        --- In ydn-javascript@yahoogroups.com, "Dav Glass" <davglass@...>
        wrote:
        >
        > Tommy --
        >
        > Try this one:
        >
        > .yui-skin-sam .yui-layout .yui-layout-hd,
        > .yui-skin-sam .yui-layout .yui-layout-ft,
        > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-nohd,
        > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd-noft,
        > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
        > border: none;
        > }
        >
        > Also make sure and put these lines "after" the include of the
        layout.css
        > file. Since they are over-ride statements then need to be after the
        > original.
        >
        > Dav
        >
        > --
        > Dav Glass
        > davglass@...
        > blog.davglass.com
        >
        >
        > + Windows: n. - The most successful computer virus, ever. +
        > + A computer without a Microsoft operating system is like a dog
        > without bricks tied to its head +
        > + A Microsoft Certified Systems Engineer is to computing what a
        > McDonalds Certified Food Specialist is to fine cuisine +
        >
        >
        > On Mon, Dec 1, 2008 at 2:01 PM, tommy.bramble
        <tommy.bramble@...>wrote:
        >
        > > http://www.tbramble.com/images/yuiTest.html
        > >
        > > Thanks!
        > >
        > > --- In ydn-javascript@yahoogroups.com <ydn-javascript%
        40yahoogroups.com>,
        > > "Dav Glass" <davglass@>
        > > wrote:
        > > >
        > > > Tommy --
        > > >
        > > > Please post a link to a page so I can see it ;)
        > > >
        > > > Thanks
        > > > Dav
        > > >
        > > > --
        > > > Dav Glass
        > > > davglass@
        > > > blog.davglass.com
        > > >
        > > >
        > > > + Windows: n. - The most successful computer virus, ever. +
        > > > + A computer without a Microsoft operating system is like a dog
        > > > without bricks tied to its head +
        > > > + A Microsoft Certified Systems Engineer is to computing what a
        > > > McDonalds Certified Food Specialist is to fine cuisine +
        > > >
        > > >
        > > > On Mon, Dec 1, 2008 at 12:09 PM, tommy.bramble
        > > <tommy.bramble@>wrote:
        > >
        > > >
        > > > > Unfortunately that did not do it for me. I hadn't tried that
        > > exact
        > > > > combination, but I've tried many others like it. I can't
        figure
        > > out
        > > > > what I've done wrong. Here is the full code for the page:
        > > > >
        > > > > ***************START************************
        > > > > <!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=ISO-
        > > 8859-
        > > > > 1" />
        > > > > <title>Full Page Layout - Example</title>
        > > > > <style type="text/css">
        > > > > /*margin and padding on body element
        > > > > can introduce errors in determining
        > > > > element position and are not recommended;
        > > > > we turn them off as a foundation for YUI
        > > > > CSS treatments. */
        > > > >
        > > > >
        > > > > .yui-skin-sam .yui-layout .yui-layout-hd,
        > > > > .yui-skin-sam .yui-layout .yui-layout-ft,
        > > > > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd {
        > > > > border: none;
        > > > > }
        > > > >
        > > > > .yui-layout-wrap
        > > > > {
        > > > > border:none;
        > > > > }
        > > > >
        > > > > body {
        > > > > margin:0;
        > > > > padding:0;
        > > > > }
        > > > >
        > > > > #left1, yui-layout-unit-left
        > > > > {
        > > > >
        > > > > }
        > > > >
        > > > > </style>
        > > > > <link rel="stylesheet" type="text/css"
        > > > > href="Javascript/yui/build/reset-fonts-grids/reset-fonts-
        > > grids.css" />
        > > > > <link rel="stylesheet" type="text/css"
        > > > >
        href="Javascript/yui/build/button/assets/skins/sam/button.css" />
        > > > > <link rel="stylesheet" type="text/css"
        > > > > href="Javascript/yui/build/assets/skins/sam/resize.css">
        > > > > <link rel="stylesheet" type="text/css"
        > > > > href="Javascript/yui/build/assets/skins/sam/layout.css">
        > > > > <script type="text/javascript"
        > > src="Javascript/yui/build/yahoo/yahoo-
        > > > > min.js"></script>
        > > > > <script type="text/javascript"
        > > src="Javascript/yui/build/event/event-
        > > > > min.js"></script>
        > > > > <script type="text/javascript"
        src="Javascript/yui/build/dom/dom-
        > > > > min.js"></script>
        > > > > <script src="Javascript/yui/build/yahoo-dom-event/yahoo-dom-
        > > > > event.js"></script>
        > > > > <script src="Javascript/yui/build/dragdrop/dragdrop-
        > > min.js"></script>
        > > > > <script src="Javascript/yui/build/element/element-beta-
        > > > > min.js"></script>
        > > > > <script src="Javascript/yui/build/animation/animation-
        > > > > min.js"></script>
        > > > > <script src="Javascript/yui/build/resize/resize-
        min.js"></script>
        > > > > <script src="Javascript/yui/build/layout/layout-
        min.js"></script>
        > > > > </head>
        > > > >
        > > > > <body class=" yui-skin-sam">
        > > > > <div id="top1"><p>Header Content</p></div>
        > > > > <div id="left1">
        > > > > <p>Left Content</p>
        > > > > </div>
        > > > > <div id="center1">
        > > > > <p>Left Content</p>
        > > > > </div>
        > > > >
        > > > > <script>
        > > > >
        > > > > (function() {
        > > > > var Dom = YAHOO.util.Dom,
        > > > > Event = YAHOO.util.Event;
        > > > >
        > > > > Event.onDOMReady(function() {
        > > > > var layout = new YAHOO.widget.Layout({
        > > > > units: [
        > > > > { position: 'top', height: 50, body: 'top1' },
        > > > > { position: 'left', width: 200, resize: true,
        > > > > body: 'left1', scroll: true },
        > > > > { position: 'center', body: 'center1' }
        > > > > ]
        > > > > });
        > > > > layout.render();
        > > > >
        > > > > });
        > > > >
        > > > > })();
        > > > > </script>
        > > > > </body>
        > > > > </html>
        > > > >
        > > > > ****************END***************
        > > > >
        > > > > --- In ydn-javascript@yahoogroups.com<ydn-javascript%
        40yahoogroups.com><ydn-javascript%
        > > 40yahoogroups.com>,
        > >
        > > > > "Dav Glass" <davglass@>
        > > > > wrote:
        > > > > >
        > > > > > tommy.bramble --
        > > > > >
        > > > > > Something like this should do it:
        > > > > > .yui-skin-sam .yui-layout .yui-layout-hd,
        > > > > > .yui-skin-sam .yui-layout .yui-layout-ft,
        > > > > > .yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-
        bd {
        > > > > > border: none;
        > > > > > }
        > > > > >
        > > > > > Dav
        > > > > >
        > > > > > --
        > > > > > Dav Glass
        > > > > > davglass@
        > > > > > blog.davglass.com
        > > > > >
        > > > > >
        > > > > > + Windows: n. - The most successful computer virus, ever. +
        > > > > > + A computer without a Microsoft operating system is like a
        dog
        > > > > > without bricks tied to its head +
        > > > > > + A Microsoft Certified Systems Engineer is to computing
        what a
        > > > > > McDonalds Certified Food Specialist is to fine cuisine +
        > > > > >
        > > > > >
        > > > > > On Mon, Dec 1, 2008 at 9:37 AM, tommy.bramble
        > > > > <tommy.bramble@>wrote:
        > > > > >
        > > > > > > I'm using the layout manager to create a paneled layout
        > > > > (header, left,
        > > > > > > right). All the element units are working great, but I
        have a
        > > gray
        > > > > > > border around each element. I've looked over the skinning
        > > > > information
        > > > > > > for awhile now and can't seem to get rid of the gray
        border.
        > > Can
        > > > > > > anyone help me out with this?
        > > > > > >
        > > > > > > Any help is greatly appreciated!
        > > > > > >
        > > > > > >
        > > > > > >
        > > > > >
        > > > >
        > > > >
        > > > >
        > > >
        > >
        > >
        > >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.