170 lines
No EOL
7.2 KiB
HTML
170 lines
No EOL
7.2 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
|
|
<head>
|
|
<title>YUI Container - Panel: Skinning (YUI Library)</title>
|
|
|
|
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../../examples/assets/dpSyntaxHighlighter.css">
|
|
<link type="text/css" rel="stylesheet" href="../assets/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="doc3" class="yui-t5">
|
|
<div id="hd">
|
|
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
|
|
<h1>YUI Container: Panel: Skinning</h1>
|
|
</div>
|
|
|
|
<div id="bd">
|
|
|
|
<div id="toc" class="yui-b">
|
|
<ul>
|
|
<li class="sect"><a href="../index.html">YUI Container: Tutorials</a></li>
|
|
|
|
<li class="item"><a href="../module/1.html">Module: Quickstart</a></li>
|
|
<li class="item"><a href="../overlay/1.html">Overlay: Quickstart</a></li>
|
|
<li class="item"><a href="../tooltip/1.html">Tooltip: Quickstart</a></li>
|
|
<li class="item"><a href="../tooltipmulti/1.html">Tooltip: One Tooltip, Many Elements</a></li>
|
|
<li class="item"><a href="../panel/1.html">Panel: Quickstart</a></li>
|
|
<li class="item selected"><a href="1.html">Panel: Skinning</a></li>
|
|
<li class="child active"><a href="1.html">Skinning the Panel</a></li>
|
|
<li class="child"><a href="2.html">Functional Example</a></li>
|
|
<li class="item"><a href="../panelskin/1.html">Panel: Advanced Skinning using CSS</a></li>
|
|
<li class="item"><a href="../panelwait/1.html">Panel: Creating a 'Loading' Popup</a></li>
|
|
<li class="item"><a href="../panelphotobox/1.html">PhotoBox: Subclassing Panel</a></li>
|
|
<li class="item"><a href="../panelresize/1.html">ResizePanel: Creating a Resizable Panel</a></li>
|
|
<li class="item"><a href="../dialog/1.html">Dialog Quickstart</a></li>
|
|
<li class="item"><a href="../simpledialog/1.html">SimpleDialog Quickstart</a></li>
|
|
<li class="item"><a href="../effect/1.html">Using ContainerEffect</a></li>
|
|
<li class="item"><a href="../overlaymanager/1.html">Using OverlayManager</a></li>
|
|
<li class="item"><a href="../keylistener/1.html">Using KeyListener</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<h1 class="first">Skinning the Panel</h1>
|
|
|
|
<p>Panels (and all other containers using Standard Module Format) can be skinned using CSS to customize the look and feel of each component. In order to best explain how to customize the Panel's style, it is important to first understand the structure of the basic Panel, which looks like this:</p>
|
|
|
|
<p><img src="../assets/img/skin-module.gif" width="313" height="86"/></p>
|
|
|
|
<p>Breaking the Panel down into its basic Standard Module Format, its structure can be diagrammed as such:</p>
|
|
|
|
<p><img src="../assets/img/skin-chart.gif" width="313" height="86"/></p>
|
|
|
|
<p>The Panel, like all other YUI Container controls, has a header, body, and footer. In addition, the Panel also has a "close" element containing a background image to give it the appearance of a UI window close control. In this tutorial, we will manipulate the CSS styles for these elements and create several new elements to allow for additional pieces of the skin to be styled.</p>
|
|
|
|
<p>First, we will create rounded corners for our skin by applying images to the top left and top right corners of the Panel header. All of our CSS styles are applied to this Panel instance using ID selectors. In this case, the Panel's ID will be "myPanel", so all styles will begin with "#myPanel". In order to facilitate the creation of these corners, we will create two new empty <code>div</code> elements in the header, classed as "tl" and "tr" for "top left" and "top right":</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
<div class="hd">
|
|
<div class="tl"></div>
|
|
<span>Panel from Markup</span>
|
|
<div class="tr"></div>
|
|
</div>
|
|
</textarea>
|
|
|
|
<p> Notice that the title is placed into a <code>span</code> tag. This is so that it can be more easily styled using CSS. The images will be applied as background images to each of our new corner elements, along with width and height styles, positioning, and margins:</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
#myPanel.yui-panel .hd {
|
|
padding:0;
|
|
border:none;
|
|
background:transparent url(../assets/img/aqua-hd-bg.gif);
|
|
color:#000;
|
|
height:22px;
|
|
margin-left:7px;
|
|
margin-right:7px;
|
|
text-align:center;
|
|
overflow:visible; }
|
|
|
|
#myPanel.yui-panel .hd span {
|
|
vertical-align:middle;
|
|
line-height:22px; }
|
|
|
|
#myPanel.yui-panel .hd .tl {
|
|
width:7px;
|
|
height:22px;
|
|
top:0;
|
|
left:0;
|
|
background:transparent url(../assets/img/aqua-hd-lt.gif);
|
|
position:absolute; }
|
|
|
|
#myPanel.yui-panel .hd .tr {
|
|
width:7px;
|
|
height:22px;
|
|
top:0;
|
|
right:0;
|
|
background:transparent url(../assets/img/aqua-hd-rt.gif);
|
|
position:absolute; }
|
|
</textarea>
|
|
|
|
<p>After absolutely positioning the new corner elements, they are anchored to the left and right corners of the header, as shown in this diagram:</p>
|
|
|
|
<p><img src="../assets/img/skin-corners.gif" width="313" height="86"/></p>
|
|
|
|
<p>In this skin, we want our close icon to be positioned on the left side of the header, rather than the right side. We can override the existing "close" style so that the icon will be placed on the left. At the same time, we will apply background images to the close icon for both secure (https) and non-secure (https) servers. Since mixed content from secure and non-secure sites can cause security warnings in some browsers, YUI Container provides CSS hooks for both contexts so that you can specify proper sources for both.</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
#myPanel.yui-panel .container-close {
|
|
top:3px;
|
|
left:4px;
|
|
height:18px;
|
|
width:17px;
|
|
background-image:url(../assets/img/aqua-hd-close.gif);
|
|
}
|
|
|
|
#myPanel.yui-panel .container-close:hover {
|
|
background-image:url(../assets/img/aqua-hd-close-over.gif); }
|
|
|
|
</textarea>
|
|
|
|
<p>Again, charting the repositioned close icon, it would look like this:</p>
|
|
|
|
<p><img src="../assets/img/skin-close.gif" width="313" height="86"/></p>
|
|
|
|
<p>Styling the body and footer are as simple as overriding the default styles with the desired ones:</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
#myPanel.yui-panel .bd {
|
|
overflow:hidden;
|
|
padding:4px;
|
|
border:1px solid #aeaeae;
|
|
background-color:#FFF; }
|
|
|
|
#myPanel.yui-panel .ft {
|
|
font-size:75%;
|
|
color:#666;
|
|
padding:2px;
|
|
overflow:hidden;
|
|
border:1px solid #aeaeae;
|
|
border-top:none;
|
|
background-color:#dfdfdf; }
|
|
</textarea>
|
|
|
|
<p>After applying all the styles to our Panel instance, the final output looks like the image below. Looking at the chart, we can see where the original familiar elements end up in the new layout, in addition to our newly created corner elements:</p>
|
|
|
|
<p><img src="../assets/img/skin-final.gif" width="313" height="86"/><img src="../assets/img/skin-chart2.gif" width="313" height="86"/></p>
|
|
|
|
<p>We will tackle another skinning example in the <a href="../panelskin/1.html">Advanced Skinning Tutorial</a>.</p>
|
|
<div id="stepnav">
|
|
<a class="next" href="2.html">Continue to <em>Functional Example</em> ></a> </div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="ft"> </div>
|
|
</div>
|
|
|
|
<script src="../../../examples/assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |