Web-kreation » HTML / CSS

Sponsor list with CSS Sprites and Mootools 1.2

Jeeremie — Mon, 28 Sep 2009 11:44:59 +0000

Today, we are going to see how to create a sponsor list with CSS Sprites and Mootools 1.2 as seen on JamieWhinCup:

Preview / Download

view demoNote: There is a file embedded within this post, please visit this post to download the file.

This menu is released under a Creative Commons Attribution-Share Alike 2.0 License. Feel free to do whatever you’d like with this menu or template, just please give credit where credit is do.

Step 1: The HTML

HTML code is pretty simple:

^?View Code HTML4STRICT

<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a class="mootools" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="drupal" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="technorati" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="jquery" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="miro" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="mozilla" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="nbc" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="twitter" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="wordpress" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a></div>

The same result could be done with an unordered list but I didn’t see the necessity to add extra tags to my document.

Step 2: CSS Sprites

A sprite is basically multiple graphics combined into one single file. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed.

Google makes good use of CSS sprites on their search page:

The main advantages of using sprites are:

Fewer images for the browser to download, which means less http requests.
Total images size is generally smaller.
Rollover image appears instanlty on mouseover.

For this example, we are going to create a color version and a grayscale version and merge them into one file as you can see below:

Include the CSS code below in the head of your html document or in an external style sheet:

^?View Code CSS

</script>
<script src="js/colorize.js" type="text/javascript"></script>

Test your page in a browser and you will be all set.

Hidden jQuery Drop Down Menu for Minimalist Design

Jeeremie — Tue, 08 Sep 2009 10:46:06 +0000

When I work for my clients, I always try to figure out the best way to organize content and hide elements that doesn’t require immediate action to clean up the page a little bit while making sure to give the best user experience.

A while ago, I started to sketch a few menus in my notebook. I wanted a menu that would be minimalist – almost invisible – but still accessible, some kind of button or maybe a link that would open the menu. I started to think where would be the best place to put it. In the upper left corner? The right one? Next to the logo? And why not the logo or title itself?! That’s it. Users are most likely to hover the logo or header, right? That made the most sense.

That was now time to roll my sleeves up and see how to implement this. After a few hours and some headaches, I came up with a nice hidden jQuery Drop Down Menu.

Here’s how it works. When user put his cursor over the header, the script hides the logo/title and reveals the navigation along with a search bar (not functional in this demo). When user leaves the menu, navigation fades out after 3 seconds and logo/title comes back.

Preview/Download

View DemoNote: There is a file embedded within this post, please visit this post to download the file.

This menu is released under a Creative Commons Attribution-Share Alike 2.0 License. Feel free to do whatever you’d like with this menu or template, just please give credit where credit is do.

Screenshots

Navigation – initial state:

Navigation – on mouseenter:

Step 1: HTML

We need to create two containers inside our header: “nav-disabled” and “nav-enabled”. By default, “nav-enabled” is hidden. This will be the container for our navigation.

^?View Code HTML4STRICT


<div id="header" colla="-">
	<div class="nav-disabled">
		[LOGO OR TITLE HERE]
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>

Add your logo. For this example, we are only going to use plain text but feel free to replace it by anything you want.

^?View Code HTML4STRICT


<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>↑ MENU</small>
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>

Finally, create an unordered list for your top navigation. Then simply nest another unordered list for your sub-navigation. My jQuery script only allows for a two level navigation which I think should be enough in most cases.

^?View Code HTML4STRICT


<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>↑ MENU</small>
	</div>
	<div class="nav-enabled">
		<ul class="nav">
			<li>Navigation →</li>
			<li><a href="http://web-kreation.com">Home</a></li>
			<li><a href="http://web-kreation.com/index.php/services">Services</a>
				<ul class="dropdown">
					<li>↓</li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
				</ul>
			</li>
			<li><a href="http://web-kreation.com/index.php/category/portfolio">Portfolio</a></li>
			<li><a href="http://web-kreation.com/index.php/blog">Blog</a></li>
			<li><a href="http://web-kreation.com/index.php/about">About</a>
				<ul class="dropdown">
					<li>↓</li>
					<li><a href="http://web-kreation.com/index.php/services">Nemo enim ipsam</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Voluptas</a></li>
					<li><a href="http://web-kreation.com/index.php/services">Aspernatur</a></li>
				</ul>
			</li>
			<li><a href="http://web-kreation.com/index.php/contact">Contact</a></li>
			<li><a href="http://web-kreation.com/index.php/articles/hidden-jquery-drop-down-menu-for-minimalist-design">Go Back to Article »</a></li>
		</ul>
		<small>Pretty cool this menu, huh? You could replace the title by your own logo, an image... anything you want really. This menu will fade out after 3 seconds. Seach bar is not functional. This is just a demo.</small>
		<form method="get" id="search" action="">
			<input class="search-input" type="text" value="" />
			<input class="search-submit" type="submit" value="SEARCH" />
		</form>
	</div>
</div>

That’s it for the HTML.

Step 2: CSS (minimalist-menu.css)

Next, style your header and navigation with CSS.

^?View Code CSS

body {
    font-size: 80%;
}
 
#header {
	padding: 40px 40px 0;
	clear: both;
  	display: block;
	font-family: Georgia, "Times New Roman", Times, serif;
}
 
#header a {
	text-decoration: none;
}
 
#header small {
	color: #999;
	font-size: 0.8em;
	margin-top: 5px;
	float: left; 
	width: 600px;
	padding-left: 10px;
}
 
#header .nav-disabled, #header .nav-enabled {
	display: block;
	clear: both;
	height: 70px; /* Fixed height to make sure navigation doesn't flick on mouseleave - set it to anything you want */
}
 
#header .nav-disabled h1 {
	background: url('../images/ui-menu-disable.png') no-repeat 6px 3px;
	padding-left: 26px;
	display: block;
	height: 21px;
	padding-top: 3px;
	color: #709A71;
	text-transform: uppercase;
	font-size: 1.5em;
}
 
ul.nav {
  	display: block;
	border: 1px solid #E6E6E6;
	text-transform: uppercase;
	height: 22px;
	background: #F3F3F3 url('../images/ui-menu.png') no-repeat 5px 3px;	
	padding-left: 20px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;	
	-moz-border-radius: 4px;
	border-radius: 4px;
}
 
ul.nav li {
	display: block;
	float: left;
	height: 12px;
	padding: 5px 10px;
	border-right: 1px solid #E6E6E6;
	color: #666; 
	position: relative;  
}
 
ul.nav li a {
	color: #666; 
}
 
ul.nav li a:hover {
	color: #333; 
	text-decoration: none;
}
 
/* Subnav */
ul.nav li.btn a {
	background: url(../images/subnav_btn.gif) no-repeat right 4px; /* add arrows next links when subnav exists */ 
	padding-right: 20px;
}
 
ul.nav li.btn a:hover, ul.nav li.hover {
	background-position: right -35px;
}
 
ul.nav li ul.dropdown {
	display: none;
	list-style: none;
	position: absolute;
	float: left;
	left: 0; 
	top: 22px;
	width: 160px;
	background: #F3F3F3;
	margin: 0; 
	padding: 0;
	border-left: 1px solid #E6E6E6;
	border-right: 1px solid #BBB;
	border-bottom: 1px solid #BBB;
}
 
ul.nav li ul.dropdown li {
	margin: 0; 
	padding: 0;
	border-top: 1px solid #E6E6E6;
	clear: both;
	height: 14px;
	width: 139px;
	padding: 5px 10px;
	display: block;
}
 
ul.nav li ul.dropdown li a {
	text-transform: none;
	background: transparent!important;
}
 
html ul.nav li ul.dropdown li a {
	float: left;
}
/* Search Form */
#header #search {
    background: transparent url('../images/search.gif') no-repeat 0 0;
    height: 20px;
    width: 240px;
    float: right;
	margin-top: 5px;
	padding-right: 10px;
}
 
#header .search-input, #header .search-submit {
    background: transparent;
    border: none;
    float: left;
	color: #999 !important;
}
 
#header .search-input {
    padding: 2px 6px;
    width: 170px;
}
 
#header .search-submit {
    cursor: pointer;
    padding: 3px 0;
    width: 56px;
    font: 0.85em Georgia, "Times New Roman", Times, serif;
}

Step 3: JS (minimalist-menu.js)

This menu requires jQuery 1.3.2 and jquery.event.hover.js from Three Dub Media.

Below is the code that will do all the magic:

^?View Code JAVASCRIPT

// ##################################
//Variables
// YOU CAN EDIT BELOW
 
var navFadeOutDelay = 3000; // Set delay for drop down to slide down (in ms)
var slideDownDelay = 200; // Set delay for drop down to slide down (in ms)
 
 
// DO NOT EDIT BELOW THIS LINE
// ##################################
 
 
 
$(document).ready(function(){
 
	// Plugin: Delay
	// http://tech.apt.no/2009/04/01/delay-in-jquery/
	(function($){
		jQuery.fn.delay = function(millis,callBack){
			var object = $(this);
			$.extend(object,{callBack:callBack});
			return window.setTimeout(function() {
				object.callBack();
				return object;
			}, millis);
		}
	})(jQuery);
 
 
	// Navigation:
	// requires jquery.event.hover-1.0 plugin : http://blog.threedubmedia.com/2008/08/eventspecialhover.html 	
	var nav = {count:0};
 
	$("#header .nav-enabled").hide(); //hide navigation on page load. 
	$(function(){
		$('#header').bind('hover',function(){ // On mouseenter, hide title and show navigation
	        $("#header .nav-disabled").hide();
	        $("#header .nav-enabled").fadeIn();
			nav.count += 1;
		}).bind('hoverend',function(){ // On mouseleave, fade out navigation and show title
			var tmp = nav.count;
			$("#header .nav-enabled").delay(navFadeOutDelay, function(){ // Delay: wait X ms before navigation FadeOut                
                if (tmp == nav.count) { // prevent delay from firing if user hovers navigation before the end of delay
			        $(this).fadeOut('slow', function(){ //Callback					
						$("#header .nav-disabled").show(); 
					}); 
                }				
		    });   
		});
	});
 
 
	// Drop Down Navigation
	$("ul.dropdown").parent().addClass("btn"); // hide sub-navigation on page load and adds class to li in topnav
 
	$("ul.nav li.btn").hover(function() { 
		$(this).find("ul.dropdown").slideDown(slideDownDelay).show(); //Slide subnav down on mouseenter
	}, function(){
		$(this).find("ul.dropdown").slideUp('slow'); //Slide subnav up on mouseleave
	}); 
 
 
});

Preview/Download

View DemoNote: There is a file embedded within this post, please visit this post to download the file.

Conclusion

The menu is really simple and should be easy to customize as it only makes use of CSS (no images except for the menu icon). I have added rounded corners to the demo with CSS3. However, this is only supported by Firefox, Chrome and Safari. If your site needs to be CSS compliant, I recommend you remove the CSS code from line 50 to 53 (in CSS code above).

This menu has been tested in IE6+, FF3.5, Opera 10, Safari 4, Chrome 2 in Windows XP only. If you find a bug or have a suggestion, concern, feedback… leave your comments below and I will make my best to answer you.

The template used for this demo was inspired from my Pignews theme (coming soon!). Use this template as you wish but just please give me credits.

Sliding login/Signup panel using MooSlide (Mootools 1.2)

Jeeremie — Thu, 18 Sep 2008 17:51:04 +0000

In my latest articles Show/hide a nice Login Panel using Mootools 1.2 and Add a show/hide login panel to your WordPress theme using Mootools, I explained how to add a nice sliding login form to your site (using Mootools 1.2).

Colin complained that the login panel was pushing the content down and asked if it would be possible to display it above all page elements. I replied that it would be possible to do so with MooSlide which uses Mootools 1.2. (Thanks to Frank from ArtViper for this excellent script).

This will be the topic of our tutorial today.

The end result:

Clicking a link will slide-in a login/register form in the middle of the page with a nice bouncing effect. Clicking the “close” button will make the panel disappear with a fade-out effect. I kept the code and styling simple for the sake of this tutorial. You can see a more fancy login form at the bottom.

Preview / Download

Grab a copy of this tutorial. It includes Mootools framework, MooSlideBox and all the images needed for this tutorial:

PreviewNote: There is a file embedded within this post, please visit this post to download the file.

Note: For this tutorial, I have slightly modified the original javascript file (mooSlide2-moo12.js) so the login and signup panel can slide in the middle of the page. I have also removed some code to make it lighter. If you want to download the original version of MooSlide with all the functionalities, go here.

Step 1: Creating the HTML structure

Create a new HTML document and add the following code into it: (Click [+] to expand the code)

^?Download download.txt


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Show/hide Login and Signup Panel using MooSlide (Mootools 1.2)</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
 
<body>
 
 
 <div id="loginPanel" class="mooSlide">
   <form class="left" action="#" method="post">
     <h1 class="padlock">Member Login</h1>
     <label for="log"><b>Username: </b></label>
     <input type="text" name="log" id="log" value="" size="23" />
     <label for="pwd"><b>Password:</b></label>
     <input type="password" name="pwd" id="pwd" size="23" />
     <label><input class="rememberme" name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" />  Remember me</label>
     <input type="submit" name="submit" value="" class="button_login" />
     <label><a href="#">Lost your password?</a></label>
   </form>
 
   <div class="sep"></div>
 
   <form class="right" action="#" method="post">
     <h1>Not a Member? Sign Up!</h1>
     <label for="signup"><b>Username: </b></label>
     <input type="text" name="signup" id="signup" value="" size="23" />
     <label for="email"><b>Email:</b></label>
     <input type="text" name="email" id="email" size="23" />
     <input type="submit" name="submit" value="" class="button_register" />
   </form>
   <div class="clearfix"></div>
 
   
   <div class="loginClose"><a href="#" id="close"> </a></div>
 </div> 
 
 <div id="container">
  <div id="content">
   <a href="http://web-kreation.com" title="Web-Kreation"><img src="http://web-kreation.com/wp-content/themes/web-kreation_v2/images/logo.jpg" alt="Web-Kreation - Home" /></a>
   
   <noscript><p style="color: red;">You must enable Javascript in you browser in order to try this demo.</p></noscript>
 
   <h1>Try the demo - Click "login" below:</h1>
   
   <p><a href="#" id="login"><b>Login</b></a></p>
  </div>
  <div class="clearfix"></div>
 </div>
 
</body>
</html>

...

is our login panel. You can place it anywhere on the page, preferably after the tag.

Step2: Styling our login form

Create a new CSS document and save it as mooslide.css. Add the following code into it to style our login panel: (Click [+] to expand the code):

^?Download download.txt

/*MooSlide stylesheet*/
 
.mooSlide {
	background-color: #000000;
	padding: 25px 10px 10px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.2em;
	color: #FFFFFF;
	border: 1px solid #33CCCC;
	margin: 0 auto;
	text-align: left;
	font-size: 0.85em;
	width: 525px; /* width of our login panel */
}
 
.mooSlide h1 {
	font-size: 1.6em;
	height: 20px;
	padding-top: 22px;
	color: white;
}
 
/* padlock icon from IconsPedia */
/* http://www.iconspedia.com/icon/padlocks-1464.html */
.mooSlide h1.padlock {
	background: url(images/padlock.jpg) no-repeat 0 0;
	padding-left: 35px;
}
 
a {
	text-decoration: none;
	color: #33CCCC;
}
 
a:hover {
	color: white;
}
 
.mooSlide form {
	margin: 0 0 10px 0;
	height: 26px;
}
 
.mooSlide label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 180px;
	display: block;
}
 
.mooSlide .left {
	width: 200px;
	float: left;
	padding-left: 25px;
}
 
.mooSlide .right {
	width: 270px;
	float: left;
	padding-left: 25px;
}
 
.mooSlide .sep {
	width: 1px;
	height: 180px;
	margin-top: 25px;
	float: left;
	border-right: 1px solid #333;
}
 
.mooSlide input {
	border: 1px #1A1A1A solid;
	background: #464646;
	margin-right: 5px;
	margin-top: 4px;
	color: white;
	height: 16px;
	float: left;
	clear: both;
	display: block;
}
 
.mooSlide input:focus {
	background: #545454;
}
 
.mooSlide input.rememberme {
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
}
 
.mooSlide input.button_login {
	width: 82px;
	height: 20px;
	cursor: pointer;
	border: none;
	margin-top: 10px;
	background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
.mooSlide input.button_register {
	width: 82px;
	height: 20px;
	cursor: pointer;
	border: none;
	margin-top: 10px;
	background: transparent url(images/button_register.jpg) no-repeat 0 0;
}
 
.mooSlide .loginClose {
	display: block;
	position: absolute;
	right: 20px;
	top: 10px;
	width: 26px;
}
 
.mooSlide .loginClose a {
	display: block;
	width: 100%;
	height: 26px;
	background: url(images/button_close.jpg) no-repeat right 0;
	padding-right: 10px;
	border: none;
	font-size: 0.9em;
	color: white;
}
 
.mooSlide .loginClose a:hover {
	background: url(images/button_close.jpg) no-repeat right -26px;
}

Step 3: Linking the files together

Link to the stylesheet and to the Javascript files into the section of your HTML document:

^?View Code HTML4STRICT

<head>
...
<link rel="stylesheet" href="mooslide.css" type="text/css" media="screen" />
 

<script type="text/javascript" src="js/mootools12.js"></script>
 

<script type="text/javascript" src="js/mooSlide2-moo12.js"></script>
</head>

Step 4: Adding the Javascript effects

Now that we created our HTML and CSS, we will add into the section of our HTML document the Javascript wich will toggle the login panel with some fancy effects (slide-in, fade-in and Bouncing effect):

^?View Code HTML4STRICT

<head>
...
<script language="javascript" type="text/ecmascript">
 window.addEvent('domready',function(){
  var myLogin = new mooSlide2({ slideSpeed: 1500, fadeSpeed: 500,  toggler:'login', content: 'loginPanel', height:250, close: false, effects:Fx.Transitions.Bounce.easeOut , from:'top'});
  //optional: AutoStart the slider on page load:
  //MyLogin.run();
  $('close').addEvent('click', function(e){
    e = new Event(e);
    myLogin.clearit();
    e.stop();
  });
});
 
</script>
 
</head>

The first part (line 5 to 5) will create our panel. If you change “close:false” to “close:true”, the login panel will close every time you click on it. We don’t want that! Otherwise you would not be able to fill the form!

The options:

The slider DIV (content: ‘loginPanel’ – ...).
The slide in speed (slideSpeed)
The fade out speed (fadeSpeed)
Close on click true / False (close: false)
The height of the slider container (height:250)
The width of the slider container (width:550)
The type of effect used (see the mootools transitions effects here »)
The toggler element (toggler:’login’ – Login)
Slide from (from:’top’ – I have removed the option from:’bottom’ in the MooSlide script to keep the code simple)
MyLogin.run(); will autostart the slider on page load. I have disabled this option as we don’t want it to slide in on page load.

The second part of the code ($('close').addEvent('click', function(e){ ... }); – line 8 to 12) close the login panel when someone click the “close” button. The HTML code is .

Final Note

That’s all. Upload the files to your server and try it!

If you want, you can style MooSlide to get a more fancy login form like in the example shown below.

PreviewNote: There is a file embedded within this post, please visit this post to download the file.

This nice slide-in login form will work on any kind of site where you have a login/register form (blogs, forums, CMS…). If you would like to use this script with your WordPress theme, read this article to get started. The code is different but you will get the idea.

Links of Interest

MooSlideBox – The script used in this tutorial.
Build An Incredible Login Form With jQuery – from Nettuts.com.
Build a Toggling Announcement Slider Using MooTools 1.2 – David Walsh blog
Sexy Alert Box – Coders.me

Web-Kreation Quote Form – free PHP online quote form

Jeeremie — Fri, 05 Sep 2008 11:04:25 +0000

Web-Kreation Quote Form was the form I created on my old site (Web-Kreation v1) for my clietns to request a free quote for their web projects. Since I am not using it anymore, I decided to give it away. I have cleaned up the code and added the nice date picker from ElectricPrism which uses Mootools.

Preview / Download

DemoNote: There is a file embedded within this post, please visit this post to download the file.

Installation

Unzip the file.
Upload the files and folders to your server.
Modify code as you wish.

Usage

Open index.php in a text editor (e.g. Notepad) and change email line 164:

^?View Code PHP

$to = 'yourname@domain.com';

Implement a sliding login panel in to WordPress with Mootools

Jeeremie — Tue, 12 Aug 2008 11:13:35 +0000

This is the second part of my tutorial “Sliding Login Panel With Mootools 1.2″. In this tutorial, we will now see how to add the show/hide login panel into your WordPress theme, pretty much like what I did on top of this page (click “login” on the upper-right corner to open the login panel). Before reading any further, read my previous post and come back here when you are done.

The end result:

Here’s what we are going to achieve today:

Step 1: The scripts and images

If you haven’t done it yet, download the source code on my previous tutorial:

Note: There is a file embedded within this post, please visit this post to download the file.

Copy the “js” folder (all of it!) and paste it in your theme folder (for the sake of this tutorial, we will use the “defaut” WordPress theme). The path to your “js” folder should be something like http://yoursite.com/wp-content/themes/default/js/.

Copy all the images and save them in the wp-content/themes/default/images/.

Step 2: The Javascript

Open header.php and add the code below in the section:

^?View Code HTML4STRICT

<head>
...

<script type="text/javascript" src="/js/mootools-1.2-core-yc.js" charset="utf-8"></script>

<script type="text/javascript" src="/js/mootools-1.2-more.js" charset="utf-8"></script>
(); ?>
</head>

Step 3: The HTML/PHP

Now add this code right after the tag (click on [+] to expand the code):

^?View Code HTML4STRICT

<body>

<div id="login">
	<div class="loginContent">
		<form action="/wp-login.php" method="post">
			<label for="log"><b>Username: </b></label>
			<input class="field" type="text" name="log" id="log" value="" size="23" />
			<label for="pwd"><b>Password:</b></label>
			<input class="field" type="password" name="pwd" id="pwd" size="23" />
			<input type="submit" name="submit" value="" class="button_login" />
			<input type="hidden" name="redirect_to" value=""/>
		</form>
		<div class="left">
        <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
		<div class="right">Not a member? <a href="/wp-register.php">Register</a> | <a href="/wp-login.php?action=lostpassword">Lost your password?</a></div>
	</div>
	<div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
</div> 
 

<div id="top">

( $user_ID ) {  ?>


	<ul class="login">
		<li class="left"> </li>
		<li><a href="/wp-admin/">Dashboard</a></li>
 
	/* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
		<li>|</li>
		<li><a href="/wp-admin/post-new.php">Write article</a></li>
 
		<li>|</li>
		<li><a href="/wp-admin/edit.php">Manage Posts</a></li>
 
		<li>|</li>
		<li><a href="/wp-admin/edit-pages.php">Manage Pages</a></li>
 
		<li>|</li>
		<li><a href="/wp-admin/plugins.php">Plugins</a></li>
	// $user_level >= 1 ?>
 
		<li>|</li>
		<li><a href="/wp-admin/profile.php">My Profile</a></li>
 
		<li>|</li>
		<li><a href="/wp-login.php?action=logout&redirect_to=($_SERVER['REQUEST_URI']) ?>">Log Out</a></li>
	</ul> 
 
} elseif (get_option('users_can_register')) { ?>

<script type="text/javascript" src="/js/fx.slide.js"></script>
 
	
	
	<ul class="login">
		<li class="left"> </li>
		<li>Hello Guest!</li>
		<li>|</li>
		<li><a id="toggleLogin" href="#">Log In</a></li>
	</ul> 
} ?>
</div>

I should explain a little bit the code before we go on:

If you are logged in as admin, you will see the full navigation. (This is done with the code = 1 ) : ?> ... . Anything you put within this code will only be seen by the admins).
If you registered to the site as a subscriber, you will only see the links “Dashboard”, “My Profile” and “log Out”.
If you are not logged in (which will definitely happen if you are a first time visitor), you will only see “Hello Guest!” and “Log In”. (Register to this site on top of this page if you want to see how it works).

If you wish to add more links to the top navigation, log in WordPress and over a link with your mouse (for example: Settings). Look at the url in the status bar (e.g. http://yoursite.com/wp-admin/options-general.php). Copy only /wp-admin/options-general.php and paste it in the code, like this:

^?View Code HTML4STRICT

/* if is admin, display menu below */ ( $user_level >= 1 ) : ?>
<li>|</li>
<li><a href="/wp-admin/options-general.php">Settings</a></li>
...
// $user_level >= 1 ?>

You can add as many links as you want. The only limit is the width of your site or your screen resolution.

Step 4: The CSS

Open style.css in a text editor and paste at the bottom the code below (click on [+] to expand the code):

^?View Code CSS

/* Login Panel */
#top {
  	background: url(images/login_top.jpg) repeat-x 0 0;
	height: 38px;
	position: relative;
}
 
#top ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 38px;
	width: auto;
  	font-weight: bold;
	line-height: 38px;
	margin: 0;
	right: 150px;
  	color: white;
	text-align: center;
  	background: url(images/login_r.jpg) no-repeat right 0;
	padding-right: 45px;
}
 
#top ul.login li.left {
  	background: url(images/login_l.jpg) no-repeat left 0;
  	height: 38px;
	width: 45px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
#top ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}
 
#top ul.login li a {
	color: #33CCCC;
}
 
#top ul.login li a:hover {
	color: white;
}
 
/*Login*/
/* toggle effect - show/hide login*/
#login {
	width: 100%;
	color: white;
	background: #1E1E1E;
	overflow: hidden;
	position: relative;
	z-index: 3;
	height: 0;
	font-style: 1em;
}
 
#login a {
	text-decoration: none;
	color: #33CCCC;
}
 
#login a:hover {
	color: white;
}
 
#login .loginContent {
	width: 550px;
	height: 80px;
	margin: 0 auto;
	padding-top: 25px;
	text-align: left;
}
 
#login .loginContent .left {
	width: 120px;
	float: left;
	padding-left: 65px;
	font-size: 0.95em;
}
 
#login .loginContent .right {
	width: 290px;
	float: right;
	text-align: right;
	padding-right: 65px;
	font-size: 0.95em;
}
 
#login .loginContent form {
	margin: 0 0 10px 0;
	height: 26px;
}
 
#login .loginContent input.field {
	border: 1px #1A1A1A solid;
	background: #464646;
	margin-right: 5px;
	margin-top: 4px;
	color: white;
	height: 16px;
}
 
#login .loginContent input:focus.field {
	background: #545454;
}
 
#login .loginContent input.rememberme {
	border: none;
	background: transparent;
	margin: 0;
	padding: 0;
}
 
#login .loginContent input.button_login {
	width: 47px;
	height: 20px;
	cursor: pointer;
	border: none;
	background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
#login .loginClose {
	display: block;
	position: absolute;
	right: 15px;
	top: 10px;
	width: 70px;
	font-size: 0.9em;
	text-align: left;
}
 
#login .loginClose a {
	display: block;
	width: 100%;
	height: 20px;
	background: url(images/button_close.jpg) no-repeat right 0;
	padding-right: 10px;
	border: none;
	color: white;
}
 
#login .loginClose a:hover {
	background: url(images/button_close.jpg) no-repeat right -20px;
}

Step 5: WordPress Settings

You will need to follow one more step before you are done. Log in to WordPress, select “settings”, then scroll down to “membership” and select “Anyone can register”. Click save and you should be done. Open your site in your browser and you should see the top navigation. Click on “login” to slide the panel into view.

Done!

Troubleshooting

Not working yet? There could be a couple of things that would stop the script from executing. Here’s a few questions that might help you debug it:

Have you enabled Javascript in your browser?
Do you use another Ajax framework on your site (Jquery for example)?
Is Mootools compatible with your plugins?
Is the path to the javascript correct? (E.g. )
Do you use a modern browser such as Firefox 3, Opera or Safari? If not, maybe it is time to upgrade! This script works fine in Firefox 2+, IE6+, Safari, Opera, Netscape. However, I didn’t test it on a Mac or Linux.

Update

In answer to Thomas’ comment, I explain below how to add avatar next to “My Profile” in the navigation after user logged in. Here’s how to do:

Replace the code below in our script…

^?View Code HTML4STRICT

<li>|</li>
<li><a href="/wp-admin/profile.php">My Profile</a></li>

… by:

^?View Code HTML4STRICT

<li>|</li>
<li><a style="padding-left: 40px;" href="/wp-admin/profile.php">
  
    get_currentuserinfo();
    if(function_exists('get_avatar')) {
      echo '' . get_avatar($user_email, '16').'</span>'; //display user's Avatar
      echo($userdata->user_login); //Display user's name
    }
  ?>
</a></li>

Add this code into style.css:

^?View Code CSS

span.NavAvatar {
	position: absolute;
	top: 3px;
	left: 10px;
	padding: 1px;
	border: 1px #000 solid; /*Change border color*/
}

Last, add “position:relative;” to “#top ul.login li”:

^?View Code CSS

#top ul.login li {
 	position: relative;
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 38px;
  	background: url(images/login_m.jpg) repeat-x 0 0;
}

Here’s a screenshot of an avatar display on this site after you logged in:

Thanks Thomas for the Avatar’s idea. That was a good one!

Sliding Login Panel with Mootools 1.2

Jeeremie — Sun, 03 Aug 2008 17:50:46 +0000

Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest WordPress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2. And next week, we will see how to use this script in WordPress 2.5+ to display the login form on the front page.

Preview / Download

First, check out the

demoNote: There is a file embedded within this post, please visit this post to download the file.

Step 1: The structure

Before we get to the code, I would like to illustrate the HTML structure used in this script:

The panel (

) is hidden by default. When someone click “Login”, the login panel slide into view. If you click once more on “login” or on the button “Close Panel”, the panel will “toggle” or slide out.

Step 3: HTML Code

Create a new HTML page and save it as index.html in your root folder. Copy the code below and paste it into this page:

^?Download download.txt


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Show/hide Login and Signup Panel using Mootools 1.2</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="fx.slide.css" type="text/css" media="screen" />
</head>
<body>
 <div id="login">
  <div class="loginContent">
   <form action="#" method="post">
    <label for="log"><b>Username: </b></label>
    <input class="field" type="text" name="log" id="log" value="" size="23" />
    <label for="pwd"><b>Password:</b></label>
    <input class="field" type="password" name="pwd" id="pwd" size="23" />
    <input type="submit" name="submit" value="" class="button_login" />
    <input type="hidden" name="redirect_to" value=""/>
   </form>
   <div class="left">
     <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label></div>
   <div class="right">Not a member? <a href="#">Register</a> | <a href="#">Lost your password?</a></div>
  </div>
  <div class="loginClose"><a href="#" id="closeLogin">Close Panel</a></div>
 </div>
 
 <div id="container">
  <div id="top">
   <ul class="login">
     <li class="left"> </li>
    <li>Hello Guest!</li>
    <li>|</li>
    <li><a id="toggleLogin" href="#">Log In</a></li>
   </ul>
  </div>
 
  <div class="clearfix"></div>
 
  <div id="content">
   <p>The content of your page!</p>
  </div>
  <div class="clearfix"></div>
 </div>
</body>
</html>

Step3: The CSS

Create a new cascading style sheet in your web editor. Save it as fx.slide.css in your root folder. Copy the code below and paste it into your css page (Click on [+] to expand the code):

^?Download download.txt

/* Login Panel */
#top {
 background: url(images/login_top.jpg) repeat-x 0 0;
 height: 38px;
 position: relative;
}
 
#top ul.login {
 display: block;
 position: relative;
 float: right;
 clear: right;
 height: 38px;
 width: auto;
 font-weight: bold;
 line-height: 38px;
 margin: 0;
 right: 150px;
 color: white;
 font-size: 80%;
 text-align: center;
 background: url(images/login_r.jpg) no-repeat right 0;
 padding-right: 45px;
}
 
#top ul.login li.left {
 background: url(images/login_l.jpg) no-repeat left 0;
 height: 38px;
 width: 45px;
 padding: 0;
 margin: 0;
 display: block;
 float: left;
}
 
#top ul.login li {
  text-align: left;
 padding: 0 6px;
 display: block;
 float: left;
 height: 38px;
 background: url(images/login_m.jpg) repeat-x 0 0;
}
 
#top ul.login li a {
 color: #33CCCC;
}
 
#top ul.login li a:hover {
 color: white;
}
 
/*Login*/
/* toggle effect - show/hide login*/
#login {
 width: 100%;
 color: white;
 background: #1E1E1E;
 overflow: hidden;
 position: relative;
 z-index: 3;
 height: 0;
}
 
#login a {
 text-decoration: none;
 color: #33CCCC;
}
 
#login a:hover {
 color: white;
}
 
#login .loginContent {
 width: 550px;
 height: 80px;
 margin: 0 auto;
 padding-top: 25px;
 text-align: left;
 font-size: 0.85em;
}
 
#login .loginContent .left {
 width: 120px;
 float: left;
 padding-left: 65px;
 font-size: 0.95em;
}
 
#login .loginContent .right {
 width: 290px;
 float: right;
 text-align: right;
 padding-right: 65px;
 font-size: 0.95em;
}
 
#login .loginContent form {
 margin: 0 0 10px 0;
 height: 26px;
}
 
#login .loginContent input.field {
 border: 1px #1A1A1A solid;
 background: #464646;
 margin-right: 5px;
 margin-top: 4px;
 color: white;
 height: 16px;
}
 
#login .loginContent input:focus.field {
 background: #545454;
}
 
#login .loginContent input.rememberme {
 border: none;
 background: transparent;
 margin: 0;
 padding: 0;
}
 
#login .loginContent input.button_login {
 width: 47px;
 height: 20px;
 cursor: pointer;
 border: none;
 background: transparent url(images/button_login.jpg) no-repeat 0 0;
}
 
#login .loginClose {
 display: block;
 position: absolute;
 right: 15px;
 top: 10px;
 width: 70px;
 font-size: 0.8em;
 text-align: left;
}
 
#login .loginClose a {
 display: block;
 width: 100%;
 height: 20px;
 background: url(images/button_close.jpg) no-repeat right 0;
 padding-right: 10px;
 border: none;
 font-size: 0.9em;
 color: white;
}
 
#login .loginClose a:hover {
 background: url(images/button_close.jpg) no-repeat right -20px;
}

Step 4: The Javascript

First, you will need to download Mootools core. So go visit this page and download Mootools 1.2 with YUI Compression. Create a new folder in your root directory and name it “js“. Save “mootools-1.2-core-yc.js” into it.

Now go to the “More Builder” page and select Fx.Slide. Scroll down to the bottom of the page and select “YUI Compressor” which is the default compression. Click “Download” and save the file (which name should be “mootools-1.2-more.js”) into your js/ folder.

Now, create a new Javascript document. Save it as fx.slide.js (should I tell you to save it into your js/ folder?). Here’s the code:

^?Download download.txt

window.addEvent('domready', function(){
	$('login').setStyle('height','auto');
	var mySlide = new Fx.Slide('login').hide();  //starts the panel in closed state
 
    //Show-Hide login panel when you click the link "Login" on top of the page
    $('toggleLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle(); //show-hide login panel
		e.stop();
	});
 
    //Hide login panel when you click the button close on the upper-right corner of the login panel
    $('closeLogin').addEvent('click', function(e){
		e = new Event(e);
		mySlide.slideOut(); //Hide login panel
		e.stop();
	});
});

Did you notice “toggleLogin” and “closeLogin”? They define the IDs used in our HTML code (Log In and Close Panel). The first one add a “toggle” effect to our “login” link in the top tab. The second one add a “slide out” effect to our button “Close Panel”.

The line var mySlide = new Fx.Slide('login').hide(); will start the panel in a closed sate (.hide();).

You can read the Mootools documentation to get the most out of the Class:Fx.Slide.

You can also use the Class:Fx.Transition to add some nice transitions to your login panel such as a bouncing effect (Bounce.easeInOut) when the panel slide in and out:

^?View Code JAVASCRIPT

var mySlide = new Fx.Slide('login', { duration:800, transition: Fx.Transitions.Bounce.easeInOut}).hide();

Check the documentation here.

Step 5: Insert Scripts into the section

Add the following lines in the section of your page and you should be done:

^?View Code HTML4STRICT

<head>
[...]
 
 <script src="js/mootools-1.2-core-yc.js" type="text/javascript"></script>
 
 <script src="js/mootools-1.2-more.js" type="text/javascript"></script>
 <script src="js/fx.slide.js" type="text/javascript"></script>
 
</head>

Upload all your files and folder to your web server and open index.html in your browser. Everything should work fine. Don’t forget to enable Javascript in your browser.

demoNote: There is a file embedded within this post, please visit this post to download the file.

Conclusion

This tutorial explained you how to add some Mootools effects to your web pages to show/hide a login panel. Next week, we will see a real world application as I will explain you how to use this script to show/hide your WordPress login form on your front page (click “login” on the upper-right corner of this page to see an example).

~~So come back soon or subscribe to RSS to get notified when I publish the next post.~~

Update: read Add a show/hide login panel to your WordPress theme using Mootools »

EDU: A free web template for schools

Jeeremie — Sun, 04 May 2008 10:31:35 +0000

I finally got some time to create a new web template this weekend. This work was entirely aimed towards schools and educational sites in general.

Demo:

DemoNote: There is a file embedded within this post, please visit this post to download the file.

Features:

Google search form.
Contact page (PHP form) with spam check.
Back to top buttons.
Drop down menu with transparent background.

Installation:

Download and unzip the file
Copy all the files to your root Directory

Usage:

Open each page in your web editor (e.g. Notepad) and locate the search form. Change the value line 84: value=”web-kreation.com”. Put your domain name instead.
Open contact.php in your web editor and change the email address line 145:
$to = 'yourname@domain.com';
Remove the Google ads in the sidebar and replace it by your own.

License:

This template is released under Creative Commons Attribution v2.5.

What’s coming next?

First, I will post a new tutorial explaining how to modify the EDU template header in Fireworks. I want to give you the possibility to easily change the header image and colors to match your site.

Second, I am now coding a WordPress theme based on the EDU template. Here’s a screenshot:

The release is expected before the end of this month or beginning of the next.

LightForm ::: Free Ajax/PHP Contact Form

Jeeremie — Thu, 07 Feb 2008 16:37:35 +0000

LightForm is a free Ajax/PHP contact form. It combines FormCheck2 for fields validation and NiceForms to style text fields and textareas.

Preview / Download

DemoNote: There is a file embedded within this post, please visit this post to download the file.

Use of this contact form is free of charge but the copyright notes in the footer must remain intact.
I would appreciate if you send me the URI of your site if you use LightForm.

Changelog:

October 09, 2008: LightForm now works with Niceforms 1.0 which allows to a set a different size for inputs, textareas and buttons. Input bug fixed in IE8 and files have been compressed to improve load time (just one stylesheet and only one images folder. All the javascripts are in the same folder).
May 28, 2008: Textarea bug fixed.

Features:

Form Validation using FormCheck2.
Spam Check.
Display user IP, user agent and referrer in the message.
Display a dialog box when message sent succesfully.
Inputs and textareas are styled with NiceForms.
Works in the most recent browsers (IE6+, Firefox, Opera, Safari and Netscape).

Installation:

Download and unzip the file
Copy all the files to your root Directory

Usage:

Open index.php in your web editor (e.g. Notepad) and change the email address line 55:
$to = 'yourname@domain.com';

License:

The CSS, XHTML, PHP and design is released under Creative Commons Attribution v2.5.

FormCheck2 is released under the MIT license.

NiceForms is released under no specific license. You are free to use and modify but you must provide credits to the author.

Caution

Form validation won’t work anymore if users disable Javascript.

Making DIV a Link – Javascript Vs CSS?

Jeeremie — Fri, 12 Oct 2007 10:18:12 +0000

Few days ago, I was looking for the best way to make a DIV into a link when I came across this website: Almost Effortless!. The author showed how to make a div a link with a little bit of Javascript (see article). It is actually pretty simple:

The Javascript Technique:

^?View Code HTML4STRICT

<div id="header" onclick="location.href='index.php';"  style="cursor:pointer;"><a href="#"></a></div>

By this method, the whole block is clickable with just a single line of code while, with CSS, you will need to set few parameters to get the same result. Pretty cool, no?

Here is the CSS technique:

Now, let’s see how it works with CSS.

First, put a link inside your div:

^?View Code HTML4STRICT

<div id="header"><a href="#"></a></div>

…and now set the link’s display property to 100% to fill the DIV in your stylesheet:

^?View Code CSS

#header {
  width: 300px;
  height: 100px;
  border: solid #EEE;
}
 
#header a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  cursor: pointer; 
}
 
#header a:hover {
  text-decoration: none;
  background-color: #EFEFEF;
}

Conclusion:

As you can see, the Javascript technique is faster than the CSS one but keep in mind that some people might disable Javascript in their browser and won’t see the link.
[tags]javascript, css, links, html, tutorial, technology, webdesign[/tags]

Add File Type Icons next to your links with CSS

Jeeremie — Mon, 24 Sep 2007 15:12:20 +0000

Many people use Javascript to automatically add file type icons to their external links, mailto links, Word, PDF, Excel Document links… when it can be done very easily with CSS 2.1.

Here is an example:

HowTo:

The trick is to use the attibute selector (using the [square brackets]) with the “a” tags. For example, if you want all your external links to display an icon, use a[href^=”http://”] in your CSS stylesheet:

^?View Code CSS

a[href^="http://"] {
background:transparent url(../images/external.png) center right no-repeat;
display:inline-block;
padding-right:15px;
}

The operator “^” means “start with”. Thus the code a[href^=”http://”] will add an icon to links starting with the attribute “http://”.

The operator `$`:

Another useful operator is $ wich means “end with”. You can use it with any extensions you might think of (.doc, .pdf, .xls, .zip, .rar…).

e.g. a[href$='.zip'] will display an icon next to any links to a document ending with the extension .zip :

^?View Code CSS

a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
background:transparent url(../images/zip.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:18px;
}

Some more examples:

You could use this to customize links to PDF documents, Word documents, mailto… Here are some examples you might want to use in the future:

^?View Code CSS

/* PDF document links */
a[href$='.pdf'] {
background:transparent url(../images/pdf.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:15px;
}
 
/* Excel Documents links */
a[href$='.xls'], a[href$='.csv'], a[href$='.xlw'], a[href$='.xlt'] {
background:transparent url(../images/excel.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:15px;
}
 
/* Word Document Links */
a[href$='.doc'], a[href$='.rtf'], a[href$='.wps'], a[href$='.txt'] {
background:transparent url(../images/word.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:15px;
}
 
/* mailto: links */
a[href^="mailto:"] {
background:transparent url(../images/mailto.png) center left no-repeat;
display:inline-block;
padding-left:20px;
line-height:15px;
}

The icons

You can download some free icons at:
IconFinder.net
FamFamFam

Note:

The attribute selector works fine in the most recent browsers.

YOGHOURT – Free Web Template (full website + active contact form)

Jeeremie — Sat, 01 Sep 2007 15:52:41 +0000

I finally release my first free template and I will soon submit it to OSWD. You are free to download it and to use it the way you want (please, read the license below for more details). If you do end up finding a use for the template, send me a message. It’s always nice to see my templates in action.

Snapshot:

Preview / Download

DemoNote: There is a file embedded within this post, please visit this post to download the file.

Update Wed, Sept 18, 2007: Yoghourt v2.0. Final version of this template.
Update Wed, Sept 12, 2007: Yoghourt v1.3. This new version has a footer and I have changed few other things.
Update Wed, Sept 5, 2007: Yoghourt v1.1 has now been replaced by Yoghourt v1.2.

A stylish CSS Vertical Menu – Mouseover Effect

Jeeremie — Sat, 18 Aug 2007 19:16:02 +0000

This is a CSS vertical menu that uses a repeating background image (nav.jpg) that changes when the mouse moves over a link. Besides it displays a link as active for the current page.

Works in IE5+, Firefox, Opera and Safari.

Preview / Download

DemoNote: There is a file embedded within this post, please visit this post to download the file.

Horizontal CSS Menu with mouseover effect.

Jeeremie — Thu, 02 Aug 2007 19:15:59 +0000

This is a clean, professional looking horizontal CSS menu. I added a mouseover effect to it. You can copy everything or use it as a reference to another horizontal CSS Menu. I have tested this menu in IE5+, Firefox, Opera and Safari.

Preview / Download

DemoNote: There is a file embedded within this post, please visit this post to download the file.

CSS 3 columns Liquid Layout (Fluid-Fix)

Jeeremie — Fri, 06 Jul 2007 16:12:42 +0000

Here is another 3 columns Liquid Layout.

I have gathered the skills of different web designers to make my own script. This script is a little bit different from what you can find around there. I was looking for a 3 columns layout but I didn’t want to have a liquid layout for the three columns, only for the content. I didn’t want to make a mess inside my sidebars and needed to have fixed widths. Besides, I needed a sticky footer and equal height columns (Yeah! I know what you think: “He wants everything this guy!”).

Anyway, after mixing different techniques, I could finally get what I wanted. And best of all, I decided to release it to you guys for free.

Preview

Check the demo:

View Demo

And here’s the code (simplified):

^?View Code HTML4STRICT


<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>:::Web-Kreation::: Liquid Layout</title>
 
  
  <style type="text/css">
  	* {
		margin: 0;
		padding: 0;
	}
 
	html, body {
	     border:0;
	     margin:0;
	     padding:0;
	     height: 100%;
	}
 
	body {
	     font: 100%/1.25 arial, helvetica, sans-serif;
	     min-width: 780px;
	}
 
	p { margin: 15px 0; }
 
	p, h1, h2, h3, h4, h2, h6 { padding: 0 1em; } /* Important! Give padding to the text. You could give some padding from leftbar, rightbar and Content but it would not render properly in IE*/
 
	/*****header*****/
	#header {
	     width: 100%;
	     font-size: 1em;
	     color: white;
	     text-align: center;
	     margin: 0;
	     padding: 0;
	     height: 60px;
	     background-color: #494949;
	}
 
	/*****content*****/
	#wrapper {
	     min-width: 960px;
	     padding:0;
	     margin:0;
	     position: relative;
	     min-height: 100%; /* For Modern Browsers */
	     height: auto !important; /* For Modern Browsers */
	     height: 100%; /* For IE */
	}
 
	#InnerWrapper {
	     width: 100%;
	     padding-bottom: 1px;
	}
 
	#WrapContent {
	     padding-bottom: 58px;
	     width: 100%;
	     margin: 0;
	}
 
	#WrapContent:after { /* !important. stick the footer at the bottom*/
	  clear: both;
	  display: block;
	  content: ".";
	  height: 0;
	  visibility: hidden;
	}
 
	#leftbar {
		z-index: 2;
	     float: left;
	     width: 200px;
	     margin: 0;
	     padding: 10px 0;
	     background-color: #ffcccc;
	}
 
	#rightbar {
	     z-index: 5;
	     float: right;
	     width: 200px;
	     margin: 0;
	     padding: 10px 0;
	     background-color: #99ff99;
	}
 
	#content {
	     z-index: 0;
	     display: block;
	     width: auto;
	     padding: 10px 0;
	     text-align: left;
	     margin: 0 200px 0 200px;
	     background-color: #ffff99;
	}
 
	.clear {
	    clear: both;
	    display: block;
	    height: 1px;
	    overflow: hidden;
	    margin: 0;
	    padding: 0;
	}
 
	/*****footer*****/
	#footer {
	     position: absolute;
	     bottom: 0 !important;
	     bottom: -1px; /* For Certain IE widths */
	     clear:both;
	     padding:0;
	     margin:0;
	     width: 100%;
	     height: 58px;
	     color: white;
	     text-align: center;
	     background-color: #494949;
	}
  </style>
 
  </head>
  <body>
	<div id="wrapper">
          <div id="header">Top</div>
	     <div id="InnerWrapper">
	          <div id="WrapContent">
	                <div id="leftbar"><p>Left sidebar</p></div>
	                <div id="rightbar"><p>Right Sidebar</p></div>
	               <div id="content"><p>Content</p></div>
	               <div class="clear"></div>
			</div>
		</div>
		
		<div id="footer">Sticky Footer</div>
	</div>
  </body>
</html>

You are free to use this script. Do whatever you want with it but if you find some use of it drop me a message to let me know.

Web-kreation » HTML / CSS

Sponsor list with CSS Sprites and Mootools 1.2

Preview / Download

Step 1: The HTML

Step 2: CSS Sprites

Hidden jQuery Drop Down Menu for Minimalist Design

Preview/Download

Screenshots

Step 1: HTML

Step 2: CSS (minimalist-menu.css)

Step 3: JS (minimalist-menu.js)

Preview/Download

Conclusion

Sliding login/Signup panel using MooSlide (Mootools 1.2)

The end result:

Preview / Download

Step 1: Creating the HTML structure

Step2: Styling our login form

Step 3: Linking the files together

Step 4: Adding the Javascript effects

Final Note

Links of Interest

Web-Kreation Quote Form – free PHP online quote form

Preview / Download

Installation

Usage

Implement a sliding login panel in to WordPress with Mootools

The end result:

Step 1: The scripts and images

Step 2: The Javascript

Step 3: The HTML/PHP

Step 4: The CSS

Step 5: WordPress Settings

Troubleshooting

Update

Sliding Login Panel with Mootools 1.2

Preview / Download

Step 1: The structure

Step 3: HTML Code

Step3: The CSS

Step 4: The Javascript

Step 5: Insert Scripts into the section

Conclusion

EDU: A free web template for schools

Demo:

Features:

Installation:

Usage:

License:

What’s coming next?

LightForm ::: Free Ajax/PHP Contact Form

Preview / Download

Changelog:

Features:

Installation:

Usage:

License:

Caution

Making DIV a Link – Javascript Vs CSS?

The Javascript Technique:

Here is the CSS technique:

Conclusion:

Add File Type Icons next to your links with CSS

Here is an example:

HowTo:

The operator $:

Some more examples:

The icons

Note:

YOGHOURT – Free Web Template (full website + active contact form)

Snapshot:

Preview / Download

A stylish CSS Vertical Menu – Mouseover Effect

Preview / Download

Horizontal CSS Menu with mouseover effect.

Preview / Download

CSS 3 columns Liquid Layout (Fluid-Fix)

Preview

And here’s the code (simplified):

The operator `$`: