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

Re: YUI Layout Manager - Skinning the Layout

Expand Messages
  • tommy.bramble
    http://www.tbramble.com/images/yuiTest.html Thanks! ... exact ... out ... 8859- ... grids.css / ... src= Javascript/yui/build/yahoo/yahoo- ...
    Message 1 of 8 , Dec 1, 2008
    • 0 Attachment
      http://www.tbramble.com/images/yuiTest.html

      Thanks!



      --- 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!
      > > > >
      > > > >
      > > > >
      > > >
      > >
      > >
      > >
      >
    • 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 2 of 8 , Dec 1, 2008
      • 0 Attachment
        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 3 of 8 , Dec 2, 2008
        • 0 Attachment
          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.