Italian
English
blog

Blog news and more:

blog

Fri 05, september 2008

frogHow to change the layout of yui dialogs by Danilo Bonardi

YUI is one of the most comprehensive ajax/javascript frameworks available,sporting graphic components that come off extremely useful for all web applications. These components are graphically catchy and up to applications such as linkedInhowever, it may be hard to customize them without knowing a bit more about the CSS classes involved.

Some of our projects required us to adjust YUI Dialogs to our web designs. In this article, I am going to show you how to modify the layout of YUI Dialogs via CSS. All following examples refer to YUI 2.5.2.

YUI Dialogs have several interesting graphic features- an exit key, a modal mode (allowing users to darken out the undelying page) and a handy drag&drop function. They're very versatile programming-wise, especially on the AJAx side.

The first step is to code the HTML part of a simple dialog. 

    <script type="text/javascript">
       YAHOO.util.Event.onDOMReady(demoDialog);
    </script>
    <a href="javascript:null(0)" id="showDemoDialog"></a>

    <div id="demoDialog" class="demoDialog" >
	    <div class="hd">Welcome!</div>
	    <div class="bd">
            <h3>Welcome</h3>
	    </div>
       	<div class="ft">
            <b>by Shiny Frog</b>
        </div>
    </div>

Then, I use YUI to create the actual dialog (dialog.js) 

YAHOO.namespace("demodialog");

function demoDialog() {
	var dialogId = 'demoDialog';
	var showId   = 'showDemoDialog';

	YAHOO.demodialog.dialog = new YAHOO.widget.Dialog(dialogId, 
		{ fixedcenter : true,
		  visible 	  : false,
		  width		  : "230px",
		  height 	  : "130px",
		  modal	      : true,
		  constraintoviewport : true,
		  effect	  : [ 
			{ effect:YAHOO.widget.ContainerEffect.FADE,duration:0.5 },
			{ effect:YAHOO.widget.ContainerEffect.SLIDE,duration:0.5} ]
		});
	
	YAHOO.demodialog.dialog.render();
	YAHOO.util.Event.addListener(showId, "click", 
			YAHOO.demodialog.dialog.show,YAHOO.demodialog.dialog, true);
}

What we see now is the standard YUI dialog
yui dialog javascript ajax
By redefining a few CSS classes, we can get rid of background images, background colours, and of any part of the dialog we may want to customize later on. 

.yui-skin-sam .yui-dialog {
	background-image: none;
    background-color: transparent;
	border: 1px solid black;
}

.yui-skin-sam .yui-panel {
	border: none;
}
            
.yui-skin-sam .yui-dialog .hd {
	border: none;
    background-image: none;
	background-color: transparent;
}

.yui-skin-sam .yui-dialog .bd { 
	border: none;
	background-color: transparent;    
}

.yui-skin-sam .yui-dialog .ft {
    background-image: none;
	background-color: transparent;
    border: none;
}

As a result, we now have a dialog with no details at all. We can use this as starting point to modify all dialog contents through its three main parts: header (.hd), body (.bd) and footer (.ft). To make things easier, I have used a dedicated class (demoDialog) to define a few generic dialog attributes.
yui dialog javascript ajax 

.demoDialog {
    text-align: center;
    color: white;
    font-style: italic;
    font-variant: small-caps;    
}

.yui-skin-sam .yui-dialog {
	background-image: none;
    background-color: transparent;
	border: 1px solid black;
}

.yui-skin-sam .yui-panel {
	border: none;
}

.yui-skin-sam .yui-dialog .hd {
    height: 25px;
	border: none;
    color: white;
    background: url("images/hd.png") repeat;
	background-color: transparent;
}

.yui-skin-sam .yui-dialog .bd { 
	padding:5px;
	border: none;
	background-color: #AABEC8;    
}

.yui-skin-sam .yui-dialog .ft {
    background-image: none;
	background-color: transparent;
	background-color: #AABEC8;
    border: none;
}
yui dialog javascript ajax

Here you can see how the last changes applied affect the final result.

As a closing note, I suggest that anyone interested in the future development of YUI pay a visit to the Official Blog, especially the YUI 3 sections.

Bookmark and Share





add comment

Comments rules:

  • If possible please stick to English language
  • We support Gravatar, go for it!
  • Use BBCode for formatting: [b], [u], [s]
  • Use [i] for quoting
  • Use [link www.site.com] site [/link] for links
  • Use [google] or [wiki] for referencies
  • HTML code is not allowed in comments
Siti Web Parma