Mobile Monday (MoMo) Bangkok chapter invites you to join our first ever event in Bangkok!

Mobile Monday, established in 2000, is a global community for mobile community.
Original chapter locations included Helsinki, New York, Silicon Valley, London, Sydney, Paris, Mumbai, Beijing, Singapore and Tokyo with 100 cities active now and more planning to launch in 2011.

 

Register for free

Focus of Mobile Monday Bangkok is to:

• Foster an open, independent and innovative platform within the mobile sector
• Facilitate industry networking between small and large companies and individuals
• Bridge partnership exchanges between domestic and international organizations
• To present valuable visions, trends, studies and forecasts from the mobile marketplace
• Provide opportunities for local members to effectively participate in global initiatives

Our Speakers

There will be three presentations from global experts in three subject areas (presentations both in Thai and English).

• BUSINESS: Developing compelling apps by BlackBerry
  Johan Kremer, Head of Alliances at Research In Motion (RIM, www.rim.com )
• TECHNICAL: Digital publishing and monetizing your digital content
  Dr. Polapat Udomphol, business development director of IT Works (www.itworks.co.th)
• START-UP: What you need to know to be a successful startup
  Thomas Kjeldgaard is the cofounder of Pagemodo (www.pagemodo.com)

Event Location:

Novotel Siam Square (Siam BTS exit 4)
392/44 Siam Square Soi 6
Bangkok, Thailand

See more updates on our websites or visit our Facebook page

But just because users all over the world are now linked, does not make them the same. Different cultures have distinct habits and preferences so you will need to think carefully about what each of your target markets will respond to before you begin to design your website.

Looking at the websites of successful companies in each country will give you some indication as to what your audience find appealing. There are also certain steps which can be taken to aid your search engine optimisation (SEO) in each region.

To help you out, here are a few of the aspects you should consider when localising your website:

1. Domain

Invest in an in-country domain name for each of your target markets. While it may be cheaper and more convenient to have one domain name which covers all of your target countries, having dedicated in-country domains helps Google to rank each site on its country-specific search engines, and will therefore boost your rankings.

2. Server Location

Check with your chosen web service providers that their server is actually held in your target country. Again this will help with your SEO, as search engines favour sites which are hosted in their ‘home’ country.

3. Meta Keywords

Ensure that you are including the best possible keywords in your copy, and if possible in your URL.

It isn’t enough to simply translate the keywords that you use on your English site on a word-for-word basis; different nationalities use different phrases in their searching habits, including synonyms, acronyms, colloquialisms and abbreviations, and you will need to adapt your keywords accordingly. Google’s keyword tool can help you with this.

4. Design

While you will want to create cohesive and consistent branding across all of your sites, the design of each site should allow for that country’s cultural preferences.
Using Cascading Style Sheets (CSS) allows for table-less design and separates content from design, meaning that you won’t have to re-design each page from scratch.

Elements to consider in your design include:

• Colour
  Colour can be very culturally significant, with the same colour having vastly different connotations around the world. For example red, in the West, signifies danger, while in China it suggests celebration and in India, purity. Take some time to investigate what your colour scheme may mean to your consumers. A green or blue background with white or black text tends to be the most universally accepted.
• Imagery
  Adjust your images for each site, and ensure that you are culturally aware. For example, a Western travel website may show holidaymakers in bikinis, but this could be considered inappropriate and even offensive in more conservative Eastern cultures.
• Navigation
  Not all languages read from left to right – Arabic for instance, the world’s fifth most influential language, reads from right to left. Choosing a horizontal navigation bar instead of a vertical one will help to combat this issue.
• Font
  It is important to use a common font, so that the text is displayed correctly on most screens. Sans serif fonts such as Arial or Verdana are easy on the eye.
• Use Unicode
  Unicode UTF-8 is a flexible character encoding tool which is compatible with over 90 written languages. Using this will make it easier to switch between languages.
  Bear in mind that different character sets mean changing line heights and widths. Also, certain languages use more characters to express the same ideas, for example German words tend to be longer than English words. So be sure to factor this into your page design.
• Avoid Flash
  The text embedded in Flash is not easily read by engine bots, which will impede your SEO progress. Also, not all countries have high speed Internet access so a Flash site may take too much time to load.

5. Content

The fundamental point here is to make sure that your content is translated correctly. To gain the trust of your potential customers, you will need to ensure that the nuances of the local language and culture are observed.

Tempting though it may be to use an automatic translation program, there is really no substitute for using a professional translator working in their native tongue. Text converted by a machine translation tool rarely reads naturally, and you will run the risk of confusing, or even offending, your target audience.

With these points in mind, the world is your oyster, and your website will be sure to attract new customers across the cosmos.

Credits: Vector tech map by Chadlonius

This step-by-step beginner’s guide takes the pain out of using the world’s best open source e-commerce solution. It guides you through installing the software, configuring your store, populating your store with products, accepting payments, maintaining relationships with your customers, and fulfilling orders.

As your online store grows, you can be sure that this robust e-commerce system will handle your needs. However, getting started with Magento can be difficult without the right guidance. This book provides that guidance in the form of a step-by-step approach to build a simple and effective online store. As you follow along with the guided lessons, you will see how an online coffee store is created from the ground up.

The Cover

Book Description

• Step-by-step guide to building your own online store
• Focuses on the key features of Magento that you must know to get your store up and running
• Customize the store’s appearance to make it uniquely yours
• Clearly illustrated with screenshots and a working example

Free sample for my readers

The publisher sent me a sample chapter (.PDF format) on “Categories and Attributes” that will teach you how to add products to their online Magento store. You can view or download it here.

Where to buy?

You can buy or read more about at PACKT Publishing.

I hope you will find this list useful. Please, if you think this list is incomplete, add your link in the comments.

iPhone GUI:

• iPhone GUI PSD 3.0
  (Photoshop CS4)

  

• Fireworks toolkit for creating iPhone UI mockups
  (Fireworks CS3 and CS4)

  

• FreshBooks iPhone Application GUI
  (Photoshop)

  

• 320480 – iPHone Interface PSD file
  (Photoshop)

  

• Designing the User Interface of Your iPhone Application
  (Official documentation: iPhone Human Interface Guidelines)

  

Android GUI:

• Android GUI PSD v. 1.0 (for Android 1.5)
  (Photoshop)

  

• Google Android GUI PSD
  (Photoshop)

  

• Android User Interface Guidelines
  (Official documentation)

  

• DroidDraw Beta
  (User Interface (UI) designer/editor for programming the Android Cell Phone Platform)

  

Palm Pre GUI:

• Palm Pre GUI PSD
  (Photoshop CS4)

  

• Palm Pre User Interface Guidelines
  (Official documentation)

  

iPad GUI:

• iPad GUI PSD
  (Photoshop CS4)

  

• ipad vector GUI elements: tabs buttons menus icons
  (Illustrator, Photoshop – Found on Nettuts)

  

• iPad Human Interface Guidelines
  (Documentation: Design an incredible user interface and user experience for your iPad application by following the iPad Human Interface Guidelines. )

  

Let’s get started

For this tutorial, I will assume you are familiar with Aptana and have installed it on your Computer. If not, you can download it for free here. As we speak, version is 1.5.

Launch Aptana Studio and open the Projects and Snippets Views (Window > Show View).

How to Use Code Snippets in your projects

You might not be aware of it but everytime you click on a button in your toolbar you are actually using a code snippet:

Alternatively, you can just expand a folder in the Snippets view and double click a snippet or right click and “Apply snippet” to quickly insert a piece of code into your HTML, CSS, JavaScript, PHP, XML… files.

Edit an existing Snippet

If you want to edit a Snipppet, expand a folder in the Snippets View (e.g. HTML, CSS…), right-click on the snippet you want to edit and select “Edit Snippet”.

Add a new snippet (step by step tutorial)

For this tutorial, we are going to create a new HTML snippet to Wrap text with <a> and prompt users to type link url and title. Our snippet will generate this code: <a href="http://domain.com" title="Your Title Here" target="_blank" rel="nofollow">selected text here</a>.

• To add a new Snippet, you must create a new folder named snippets in any top-level folder of your Project View. You only need to do this the first time you create a snippet.
• In your snippets folder, create a blank HTML file and give it a name (e.g. wrap-with-a-options.html).

   

  

   

• In Snippets View, expand Snippet Templates and select “HTML Snippet Template”. It will open a dialog box and prompt you to enter the name of your Snippet (e.g. “Wrap with <a> (Options)”):

   

  

   

  Aptana will generate the following code for you on top of your HTML file:
  

  ^?View Code HTM4STRICT

  1 2 3 4 5

  <!-- category: HTML name: Wrap with <a> (Options) toolTip: Wrap with <a> (Options) -->

• Next, add your code snippet:
  
  ^?View Code HTM4STRICT

  1 2 3 4 5 6

  <!-- category: HTML name: Wrap with <a> (Options) toolTip: Wrap with <a> (Options) --> <a href="" title="" target="_blank" rel="nofollow"></a>

• Now, we need create some variables to prompt users to enter url and title for the link they want to generate. We will use prompt(var_name): promptText where var_name is the name of the variable and promptText is the text that you want the Snippet to prompt the user with. Here how it goes:
  
  ^?View Code HTM4STRICT

  1 2 3 4 5 6 7 8

  <!-- category: HTML name: Wrap with <a> (Options) toolTip: Wrap with <a> (Options) prompt(url): Enter URL prompt(title): Enter Title --> <a href="${url}" title="${title}" target="_blank" rel="nofollow"></a>

• We will go one step further and wrap our code around ${selection}. This will let you select the text you want to link:
  
  ^?View Code HTM4STRICT

  1 2 3 4 5 6 7 8

  <!-- category: HTML name: Wrap with <a> (Options) toolTip: Wrap with <a> (Options) prompt(url): Enter URL prompt(title): Enter Title --> <a href="${url}" title="${title}" target="_blank" rel="nofollow">${selection}</a>

• Save your file. This snippet is ready to use and should now be filed in the Snippets View under HTML. To use it, place your cursor somewhere in a HTML file or select the text you want to link, and click twice on your snippet to insert it.

Add Snippet to toolbar (optional)

Following our previous example, we are now going to add our snippet to the toolbar:

1
2
3
4
5
6
7
8
9
10
11
12

<!--
	category: HTML
	name: Wrap with <a> (Options)
	toolTip: Wrap with <a> (Options)
	prompt(url): Enter URL
	prompt(title): Enter Title
 
	toolbar: true
	icon: com.aptana.ide.snippets/icons/link.png
	language: text/html
-->
<a href="${url}" title="${title}" target="_blank" rel="nofollow">${selection}</a>

toolbar : if set to “true”, show snippet in toolbar
icon : relative path to icon toolbar item. (default path: com.aptana.ide.snippets/icons/)
language : MIME type of content to wich this item is related. Options: text/html, text/css, text/javascript…

Unfortunately, there seems to be no easy way to add your own set of icons. This has been reported in a ticket and we just have to hope someone will work on this. However, all is not lost. Icons are stored in a JAR archive: C:\Program Files\Aptana\Aptana Studio 1.5\plugins\com.aptana.ide.snippets_1.5.0.24896.jar\icons in Windows (please note path to this folder might be slightly different for you). Copy your icons to this folder and change the name of your icon in the code above and it will appear in toolbar (you will have to restart Aptana first).

The End Result

In the screenshot below, you can see the new icon in the toolbar on the right. Select the text you want to link, click on the button and you will be prompted to enter the url and title for this link:

Last word

I hope you enjoyed this tutorial. Do not hesitate to share your snippets with us in the comments.

Smashing Magazine put together a great list of code snippets repositories. Check their article: 45+ Excellent Code Snippet Resources and Repositories

And you? What software or application do you use to store your snippets?

Preview / Download

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:

1
2
3
4
5
6
7
8
9
10
11
12

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!--
#sponsors {
	width: 940px;
	display: block;
	clear: both;
	border: 1px solid #eee;
	padding: 10px 5px;
	margin: 15px auto;
	text-transform: uppercase;
	font-weight: bold;
	color: #666;
}
#sponsors span {
	display: block;
	float: left;
	padding: 0 10px;
	height: 20px;
	line-height: 20px;
}
#sponsors a {
	display: block;
	float: left;
	height: 20px;
	padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
 
	/*mouseover*/
	a:hover.mootools, 
	a:hover.drupal, 
	a:hover.technorati, 
	a:hover.jquery, 
	a:hover.miro, 
	a:hover.mozilla, 
	a:hover.nbc, 
	a:hover.twitter, 
	a:hover.wordpress {background-position: 0 -20px;} /* reveal color version */
-->

In the initial state, we only want to see the grayscale version. In order to do that, we set the background-position property to “0 0″ in our CSS. On mouseover, we change background-position to “0 -20px” to reveal the color version.

(If you want to learn more about sprites, check this excellent article from Smashing Magazine: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials)

Step 3: the Javascript (js/colorize.js)

I have commented the JS. It should be self-explanatory but if you have any question, ask in the comments below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

window.addEvent('domready', function(){
 
	var sponsors = $$('#sponsors a').setStyle('opacity', 0.5); // Set opacity to 0.5 for grayscale image
 
	sponsors.set('tween',{duration:200, wait:false}).addEvents({
 
		//On mouseenter
		'mouseenter': function(){
			this.setStyle('background-position','0 -20px'); //Reveal color image
			this.get('tween').start('opacity',1); //set opacity to 1
		},		
 
		//on mouseleave
		'mouseleave':function(){
			this.setStyle.delay(500,this,['background-position','0 0']); //set back initial background-position for grayscale image
			var tween =  this.get('tween');
			tween.start.delay(500, tween,['opacity',0.5]); //set back initial opacity
		}
 
	});
});

Step 4: Make it happen!

Finally, add links to the Mootools 1.2 and colorize.js in the head of your html document:

1
2

<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"><!--mce:0--></script>
<script src="js/colorize.js" type="text/javascript"><!--mce:1--></script>

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

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

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.

1
2
3
4
5
6
7
8
9
10

<!-- Our demo Starts Here -->
<div id="header" colla="-">
	<div class="nav-disabled">
		[LOGO OR TITLE HERE]
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>
<!-- /END DEMO -->

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

1
2
3
4
5
6
7
8
9
10
11

<!-- Our demo Starts Here -->
<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>&uarr; MENU</small>
	</div>
	<div class="nav-enabled">
		[YOUR NAVIGATION HERE]
	</div>
</div>
<!-- /END DEMO -->

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<!-- Our demo Starts Here -->
<div id="header">
	<div class="nav-disabled">
		<h1>Hidden jQuery Drop Down Menu - Hover Me!</h1>
		<small>&uarr; MENU</small>
	</div>
	<div class="nav-enabled">
		<ul class="nav">
			<li>Navigation &rarr;</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>&darr;</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>&darr;</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 &raquo;</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>
<!-- /END DEMO -->

That’s it for the HTML.

Step 2: CSS (minimalist-menu.css)

Next, style your header and navigation with CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

// ##################################
//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

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.

If you are new to this blog, the Gorilla Project is an opensource project created by Chris and myself to overcome common issues encountered by a single WordPress theme designer. Our goal is to build a large community of WordPress designers and developers to collaborate together to build FREE Premium WordPress themes, maintain and upgrade the themes to the latest WordPress version, fix bugs, make the themes cross browser and cross OS platform compatible,offer support to users (forum), write tutorials, create a theme framework to speed up themes development, write an extensive documentation (Wiki) for WordPress developers willing to create a theme for the Gorilla Project.

“WPSynergy” in place of “The Gorilla Project”

First of all, after we discovered someone else was using a similar name for his Premium WordPress themes site, we renamed “The Gorilla Project” to “WPSynergy” – even though Matt Mullenweg told us not to on our Google groups. The new name was proposed by Jeffro from WordPress Tavern with the following definition:

Synergy: The enhanced result of two or more people, groups or
organizations working together. In other words, one and one equals
three! It comes from the Greek “synergia,” which means joint work and
cooperative action. The word is used quite often to mean that
combining forces produces a better product.

This was clearly in line with our project so we decided to go for it.

Logo

Logo design followed a long process and after many concepts and feedbacks on Conceptshare, a few votes from the WordPress community and a few other modifications, we finally got our final logo (below). I hope you like it.

Logo, as all of our free themes, is released under a GPL2 license. Illustrator source file can be downloaded here. As usual, feel free to download it, modify it and upload the new version if you don’t like the one you see here.

SVN, Trac, dev site, mailing list

To be more productive while developing our opensource wordpress themes, we created an infrastructure on Chris’ server:

• http://dev.wpsynergy.org/: P2 WordPress theme for any discussion related to development. If you want to Join our team start by creating an account there.
• http://bugs.wpsynergy.org/: Trac to keep track of our themes and report bugs
• http://svn.wpsynergy.org/: SVN for our themes repository
• http://groups.google.com/group/wpsynergy: our mailing list on Google Groups.
  (Register if you want to be part of this mailing list)

On my server – which will host the themes, demos and forum – we installed WordPress MU for the theme demos and BBpress as our support forum.

Our themes

We are actively working on PigNews. You can follow the progress here (please, note we didn’t fix IE6′s bugs yet). However, mostly because of a lack of time and a low involvement from the WordPress community, we are striving to finish the theme. We hope more designers and developers will join our effort after we released a few themes and complete the official site at http://wpsynergy.org.

Pignews color schemes:

If you want to help us develop Pignews, grab the files from the SVN trunk. (If you are new to SVN, start by downloading Tortoise.) (To make a SVN update or commit, you will have to request a password from Chris to access SVN. His email is chris[a-t]wpsynergy {d-o-t}org.)

Other themes to be part of WPSynergy

• OneRoom
• Synjob

How can you help us?

Once again, we are asking for help from the WordPress community. If you are a designer or developer, there’s many way to be involved in this project. As a designer, we need you to create stunning themes, design mascots, logos, icons… As a developer, we need you to enhance our themes with options page, add AJAX effects, configure servers, develop our Options theme Framework… and we need everyone to spread the word (on twitter, Facebook, on your blog…) to move this project forward and take it to the next level.

Thanks to everyone for supporting us and a special thanks to Matt Mullenweg for his support since the beginning of this project. We really appreciate.

They created a wiki page hosted on Google Code site to give us a series of tutorials to improve website performance:

What about their code?

I wanted to check if Google put into practice what they teach us on that page so I opened their search page and examined it with Firebug.

Is their code optimized for a better website performance? Yes, definitely!

HTML, CSS, JS

Their Javascript, CSS and html code is compressed to fit on one single line only, no external style sheet.

They use short CSS tags such as “ssb”, “tbd”, “cnt”… to make their code lighter (this is only a sample of their code):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
 <head done="done"></head>
 <body id="gsr">
  <textarea id="csi" style="display: none;"/>
  <div id="header"></div>
  <div id="ssb"></div>
  <div id="tbd" class="med"/>
  <div id="cnt"/></div>
  <br clear="all"/>
  <table id="nav"></table>
  <div class="std"></div>
  <div id="wml"></div>
  <div id="xjsd"></div>
  <div id="xjsi"></div>
</body>
</html>

Images:

They use only one image instead of a few small images:

… and just change background position for each css class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

.w10, .w11, .w20, .w21, .w24, .wci, .wpb, .w4, .w5, .w40, .w41, .w44, .w50, .w51, .w54, li.w0 .w5, li.w1 .w5 {
    background: url(/images/nav_logo6.png) no-repeat;
    border: 0;
    cursor: pointer;
    display: none;
    margin-right: 3px;
    height: 14px;
    vertical-align: bottom;
    width: 14px
}
 
.w10, .w11, .w20, .w21, .w24 {
    height: 16px;
    margin-left: 8px;
    width: 16px
}
 
.w10 {
    background-position: -104px -42px
}
 
.w11 {
    background-position: -134px -27px;
    cursor: default;
    display: inline
}
 
.w20 {
    background-position: -104px -57px
}
 
.w21 {
    background-position: -104px -27px
}
 
.w24 {
    background-position: -134px -44px;
    cursor: default;
    display: inline
}
 
.wci, .w4, .w5, .w40, .w41, .w44, .w50, .w51, .w54, li.w0 .w5, li.w1 .w5 {
    display: inline;
    height: 14px;
    width: 14px
}
 
.w14, .w44, .w54 {
    display: none
}
 
.wci {
    background-position: -119px -87px;
    height: 14px;
    width: 16px
}
 
.wpb {
    background-position: -91px -74px;
    display: inline;
    height: 13px;
    vertical-align: 5px;
    width: 13px
}
 
.w4, .w40, .w41, .w44 {
    background-position: -104px -42px
}
 
.w5, .w50, li.w0 .w5, .w54 {
    background-position: -104px -57px
}
 
.w51, li.w1 .w5 {
    background-position: -104px -27px
}
 
.wcd {
    margin-top: 2px;
    max-width: 42em
}

This is a technic I use often but I never thought to convert all my images in just one big image.

Last Word

Knowing that Google counts some of the best engineers on the web, makes use of the latest web standards and technologies (HTML5, CSS3, AJAX…) and is maybe one of the most innovative company on the web, I think it is definitely worth and good practice to follow their tips and take time to view their source code. There’s a lot to learn in there for anyone eager to learn.

Link: Let’s Make The Web Faster
Firefox Plugin: Page Speed

While it is really great to have so many people contributing to it, there’s some limitations when it comes to free WordPress themes created by individuals:

• They have real difficulties to keep their themes up to date with the latest WordPress releases.
• Their themes are not always cross browsers and cross platforms.
• Their support is limited.
• They usually don’t have all the skills needed to make a Premium Theme.
• After a while, they might completely cease to maintain their themes because of lack of time or boredom.
• As themes are updated by authors, upgrading will usually mean losing any custom styles you’ve added.
• Many themes are offered as “one size fits all”, and can only be customized with knowledge of HTML/CSS.

Here comes the Gorilla Project WPSynergy Project, an opensource project created by Chris and I to overcome these common issues. Our goal is to build a large community of WordPress designers and developers to:

• Collaborate together to build FREE Premium WordPress themes. Some companies (Woothemes, ithemes…) offer excellent premium WordPress themes but you have to pay for it!
  (“A premium theme refers to themes that have more quality in terms of design, or maybe layouts (magazine, grid, showcase, etc) that differs them from the majority free themes. It’s also fair to label them as themes that allows you to do more customization, or even displays content in a different formats” – Hongkiat)
• Maintain and upgrade the themes to support the latest versions of WordPress.
• Fix bugs.
• Make the themes cross browser and cross OS platform.
• Offer support to users (forum).
• Write tutorials.
• Create a theme framework to speed up themes development.
• Write an extensive documentation (Wiki) for WordPress developers willing to create a theme for the Gorilla WPSynergy Project.

We need your help!

The gorilla project WPSynergy Project is going to be a huge and exciting project but we need your help to make it successful. Here’s how you can contribute:

• Designers, we need your talents to design stunning themes, icons, mascots in Photoshop, Fireworks or any other image editor. We have a number of theme designs planned, but it would be nice to have an extra hand in the future.
• Front end developers, we need you to code the theme in valid (X)HTML/CSS.
• Back end developers, right now, Chris is looking for PHP developers to help develop the “Gorilla Theme Options Framework” (GTOF) SYNTOF (WPSynergy Theme Options Framework) which we will be uses as the main framework for our themes. But we are also looking for contributers to other back end development projects – options pages, widgets, plugins…you name it!
• Blog Owners, a section at wpgorilla.org wpsynergy.org will be created for you to report bugs, suggest improvements and new ideas…
• Readers (yes, you too can help!), we need you to spread the word! Tweet it! Digg it! Stumble it! Talk about it on your blog. Help us grow this new community and make this project a reality and you will soon be able to download premium WordPress themes for free!

Ready to help?

If you are ready to help, you can contact us at joinus {a t} wpgorilla {d o t} o r g joinus {a t} wpsynergy {d o t} o r g or head to Launchpad our DEV site and pick a project. We are just starting out so you are not going to find much there at the moment but you can be the first one to propose a new project or you can help us develop the “Gorilla Theme Options Framework” (GTOF) SYNTOF till completion – anyone interested in finding out more can email chris {at} wpgorilla {dot} org chris {at} wpsynergy {dot} org for more information.

If you need help with Launchpad, read this »

Pignews theme – our first theme to be part of this project – is going to be on hold until we finish Gorilla Theme Options Framework (GTOF) SYNTOF but in the meantime you can review the concepts on Flickr and give us your feedback.

All the themes created by the Gorilla WPSynergy community will be hosted at www.wpgorilla.org www.wpsynergy.org. The site is under construction at the moment (see screenshot below). If you want to help me with the development of this site, contact me at jeremie {a-t} wpgorilla {d-o-t} org jeremie {a-t} wpsynergy {d-o-t} org. The fastest we build this site and the fastest we will be able to release free premium themes there.

Benefits of this project

If you run a WordPress blog, the benefits are quite obvious: you will be able to download free Premium WordPress themes and plugins developed and maintained by a large community of WordPress developers.

If you are a designer or developer (or both!), you will be able to work with various professionals, make contacts, learn new ways to build a WordPress theme and hopefully make WordPress a better CMS. We plan to create a page on WPGorilla.org WPSynergy.org to list our most active team members with a bio and a link to their site.

In the end, everyone will benefit from this project… so don’t forget to spread the word!

Links

Official Site: http://wpgorilla.org/

Projects:https://launchpad.net/~wpgorilla

Theme Concepts: http://www.flickr.com/groups/wpgorilla/

Google Group: http://groups.google.com/group/wpgorilla

UPDATE:

Official Site: http://wpsynergy.org/

SVN:SVN

TRAC: Bugs

Discussions: Dev Site

Then, a few weeks ago, when one of my client asked me if I could design some Twitter illustrations for one of his project, I thought it would be nice to design a couple of Twitter icons to give away on my blog. I started to sketch out a few ideas and finalized them in Illustrator. Here’s the end result:

Download

The zip contains two transparent PNG icons available in resolutions of 128×128 pixels, 256×256 and 512×512:

Alternatively, you can download the source files if you need to modify text or colors. The sources are in AI files (Adobe Illustrator CS3), PSD files and EPS files:

You can freely use them for both your private and commercial projects, including templates and themes. A link back or some credits would be nice but not mandatory.

Conclusion

That’s my small contribution to the Twitter community. Leave me a note in the comments if you like them or Follow Me! I have a couple of other sketches waiting in my notebook so I might create more icons in the future if you really like them.

Update:

You can preview the icons on my Flickr account if you want to see how they look when size is reduced:

Andreas Papula made a green version of one of the icon above (PSD file). To download this icon, use this direct link: http://www.studio0611.de/misc/break_the_egg_green.psd.zip

Before I give you the code, let me briefly explain you what we want to achieve.

If user didn’t log in or register yet, we will show the login and register forms in the sliding panel with a short Welcome Message:

Once user is logged in, we will change panel content to show a dashboard menu with a short “Welcome Back” message. This is what our code will look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- Panel -->
<div id="toppanel">
<?php 
	global $user_identity, $user_ID;	
	// If user is logged in or registered, show dashboard links in panel
	if (is_user_logged_in()) { 
?>
 
<!-- Dashboard menu will come here -->
 
<?php 
	// Else if user is not logged in, show login and register forms
	} else {	
?>
 
<!-- Login and Register forms will come here -->
 
<?php } ?>	
</div> <!--END panel -->

Simple, isn’t it?

WordPress, since version 2.0, introduced user roles and capabilities. To take advantage of this, we are going to use the current_user_can() function to control what links users can or cannot see depending on the role attributed to them. This is done like this:

1
2
3

<?php if ( current_user_can('level_10') ) : ?>
<!-- Content placed here will only be seen by ADMINS of the site! -->		
<?php endif ?>

“level_10″ is the highest level in WordPress and gives user full control and access to the site. This level is reserved to the owner of the site and admins. You can read more about user roles here »

Below is a screenshot of the panel display for admins (‘level_10′):

Below is a screenshot of the panel display for authors (‘level_2′):

Below is a screenshot of the panel display for subscibers (‘level_0′):

The last screenshot looks really empty because Subscribers have only a limited access to the dashboard. You can try to fill the panel with some extra content for subscribers and contributors if you don’t want your panel to look so empty. It is up to you.

STEP 1: The HTML code

(Note: For the sake of this tutorial, I am going to implement the script into the default WordPress 2.7 theme (wp-content/themes/default).)

Open header.php in your text editor or log in to your dashboard and navigate to Appearance > Editor and select this file. Find the code below and delete it:

1
2
3

<?php wp_head(); ?>
</head>
<body>

Replace it by this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

<?php wp_head(); ?>
 
  	<!-- PNG FIX for IE6 -->
  	<!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
	<!--[if lte IE 6]>
		<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/pngfix/supersleight-min.js"></script>
	<![endif]-->
 
    <!-- jQuery - the core -->
	<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.3.2.min.js" type="text/javascript"></script>
	<!-- Sliding effect -->
	<script src="<?php bloginfo('template_url'); ?>/js/slide.js" type="text/javascript"></script>
 
</head>
<body>
<!-- Panel -->
<div id="toppanel"> 
<?php 
	global $user_identity, $user_ID;	
	// If user is logged in or registered, show dashboard links in panel
	if (is_user_logged_in()) { 
?>
	<div id="panel">
		<div class="content clearfix">
			<div class="left border">
				<h1>Welcome back <?php echo $user_identity ?></h1>
				<h2>Headline</h2>				
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				<h2>Dashboard</h2>
				<ul>					
					<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Go to Dashboard</a></li>
				</ul>
			</div>
			<div class="left narrow">			
				<h2>My Account</h2>				
				<ul>					
					<li><a href="<?php bloginfo('url') ?>/wp-admin/index.php">Global Dashboard</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Edit My Profile</a></li>
					<?php if ( current_user_can('level_1') ) : ?>
						<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-comments.php">Comments</a></li>
					<?php endif ?>
	        		<li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>"><?php _e('Log out'); ?></a></li>
				</ul>	
				<?php if ( current_user_can('level_10') ) : ?>		
				<h2>Appearance</h2>				
				<ul>						
					<li><a href="<?php bloginfo('url') ?>/wp-admin/themes.php">Themes</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/widgets.php">Widgets</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/theme-editor.php">Theme Editor</a></li>
				</ul>
				<?php endif ?>
			</div>
			<?php if ( current_user_can('level_2') ) : ?>
			<div class="left narrow">			
				<h2>Posts</h2>				
				<ul>					
					<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Post</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/edit.php">Edit Posts</a></li>
				<?php if ( current_user_can('level_3') ) : ?>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-tags.php">Tags</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/categories.php">Categories</a></li>
				<?php endif ?>
				</ul>
				<?php if ( current_user_can('level_10') ) : ?>		
				<h2>Plugins</h2>				
				<ul>						
					<li><a href="<?php bloginfo('url') ?>/wp-admin/plugins.php">Plugins</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-install.php">Install a Plugin</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/plugin-editor.php">Plugin Editor</a></li>
				</ul>
				<?php endif ?>
			</div>
			<?php endif ?>
			<?php if ( current_user_can('level_2') ) : ?>
			<div class="left narrow">
				<?php if ( current_user_can('level_3') ) : ?>	
				<h2>Pages</h2>				
				<ul>		
					<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">New Page</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/edit-pages.php">Edit Pages</a></li>
				</ul>
				<?php endif ?>			
				<h2>Library</h2>				
				<ul>					
					<li><a href="<?php bloginfo('url') ?>/wp-admin/upload.php">Library</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/media-new.php">Add New</a></li>
				</ul>
				<?php if ( current_user_can('level_3') ) : ?>		
				<h2>Users</h2>				
				<ul>						
					<li><a href="<?php bloginfo('url') ?>/wp-admin/users.php">Author &amp; Users</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/user-new.php">Add New</a></li>
				</ul>
				<?php endif ?>
			</div>
			<?php endif ?>
			<?php if ( current_user_can('level_10') ) : ?>
			<div class="left narrow">			
				<h2>Settings</h2>				
				<ul>						
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-general.php">General</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-writing.php">Writing</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-reading.php">Reading</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-discussion.php">Discussion</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-media.php">Media</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-privacy.php">Privacy</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-permalink.php">Permalinks</a></li>
					<li><a href="<?php bloginfo('url') ?>/wp-admin/options-misc.php">Miscellaneous</a></li>
				</ul>
			</div>
			<?php endif ?>
		</div>
	</div> <!-- /login -->	
 
    <!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
	    	<li class="left">&nbsp;</li>
	    	<!-- Logout -->
	        <li><a href="<?php echo wp_logout_url(get_permalink()); ?>" rel="nofollow" title="<?php _e('Log out'); ?>"><?php _e('Log out'); ?></a></li>
			<li class="sep">|</li>
			<li id="toggle">
				<a id="open" class="open" href="#">Show Dashboard</a>
				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>	
			</li>
	    	<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->
<?php 
	// Else if user is not logged in, show login and register forms
	} else {	
?>
	<div id="panel">
		<div class="content clearfix">
			<div class="left border">
				<h1>Welcome to Web-Kreation</h1>
				<h2>Sliding login panel Demo with jQuery</h2>		
				<p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>
				<h2>Download</h2>
				<p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/articles/implement-a-nice-clean-jquery-sliding-panel-in-wordpress-27" title="Download">article &raquo;</a></p>
			</div>
			<div class="left">
				<!-- Login Form -->
				<form class="clearfix" action="<?php bloginfo('url') ?>/wp-login.php" method="post">
					<h1>Member Login</h1>
					<label class="grey" for="log">Username:</label>
					<input class="field" type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="23" />
					<label class="grey" for="pwd">Password:</label>
					<input class="field" type="password" name="pwd" id="pwd" size="23" />
	            	<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
        			<div class="clear"></div>
					<input type="submit" name="submit" value="Login" class="bt_login" />
					<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
					<a class="lost-pwd" href="<?php bloginfo('url') ?>/wp-login.php?action=lostpassword">Lost your password?</a>
				</form>
			</div>
			<div class="left right">
			<?php if (get_option('users_can_register')) : ?>	
				<!-- Register Form -->
				<form name="registerform" id="registerform" action="<?php echo site_url('wp-login.php?action=register', 'login_post') ?>" method="post">
					<h1>Not a member yet? Sign Up!</h1>	
					<label class="grey" for="user_login"><?php _e('Username') ?></label>
					<input class="field" type="text" name="user_login" id="user_login" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" />
					<label class="grey" for="user_email"><?php _e('E-mail') ?></label>
					<input class="field" type="text" name="user_email" id="user_email" class="input" value="<?php echo attribute_escape(stripslashes($user_email)); ?>" size="25" tabindex="20" />
					<?php do_action('register_form'); ?>
					<label id="reg_passmail"><?php _e('A password will be e-mailed to you.') ?></label>
					<input type="submit" name="wp-submit" id="wp-submit" value="<?php _e('Register'); ?>" class="bt_register" />
				</form>
			<?php else : ?>
				<h1>Registration is closed</h1>
				<p>Sorry, you are not allowed to register by yourself on this site!</p>
				<p>You must either be invited by one of our team member or request an invitation by email at <b>info {at} yoursite {dot} com</b>.</p>
 
				<!-- Admin, delete text below later when you are done with configuring this panel -->
				<p style="border-top:1px solid #333;border-bottom:1px solid #333;padding:10px 0;margin-top:10px;color:white"><em>Note: If you are the admin and want to display the register form here, log in to your dashboard, and go to <b>Settings</b> > <b>General</b> and click "Anyone can register".</em></p>
			<?php endif ?>			
			</div>
		</div>
	</div> <!-- /login -->	
 
    <!-- The tab on top -->	
	<div class="tab">
		<ul class="login">
	    	<li class="left">&nbsp;</li>
	    	<!-- Login / Register -->
			<li id="toggle">
				<a id="open" class="open" href="#">Log In | Register</a>
				<a id="close" style="display: none;" class="close" href="#">Close Panel</a>			
			</li>
	    	<li class="right">&nbsp;</li>
		</ul> 
	</div> <!-- / top -->			
<?php } ?>	
</div> <!--END panel -->

STEP 2: Copy the CSS in style.css

Expand the code below, copy it and save it at the bottom of your theme stylesheet (e.g. wp-content/themes/default/style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

/* sliding panel */
#toppanel {
    position: absolute;   /*Panel will overlap  content */
    /*position: relative;*/   /*Panel will "push" the content down */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 130%; /* font-size set to 130% for the default Kubrick Wordpress theme */
}
 
#panel {
	width: 100%;
	height: 280px;
	color: #999999;
	background: #272727;
	overflow: hidden;
	position: relative;
	z-index: 3;
	display: none;
}
 
#panel h1 {
	font-size: 1.6em;
	padding: 5px 0 10px;
	margin: 0;
	color: white;
	text-align: left;
}
 
#panel h2{
	font-size: 1.2em;
	padding: 10px 0 5px;
	margin: 0;
	color: white;
	text-align: left;
}
 
#panel p {
	margin: 5px 0;
	padding: 0;
}
 
#panel a {
	text-decoration: none;
	color: #15ADFF;
}
 
#panel a:hover {
	color: white;
}
 
#panel a-lost-pwd {
	display: block;
	float: left;
}
 
#panel ul {
	margin: 0 0 5px 0;
	padding: 0;
	line-height: 1.6em;
	list-style: none;
}
 
#panel .content {
	width: 960px;
	margin: 0 auto;
	padding-top: 15px;
	text-align: left;
	font-size: 0.85em;
}
 
#panel .content .left {
	width: 280px;
	float: left;
	margin-bottom: 25px;
	padding: 0 15px;
	border-right: 1px solid #333;
	min-height: 220px;
}
 
#panel .content .border {
	border-left: 1px solid #333;
}
 
#panel .content .narrow {
	width:120px !important;
}
 
#panel .content form {
	margin: 0 0 10px 0;
}
 
#panel .content label {
	float: left;
	padding-top: 8px;
	clear: both;
	width: 280px;
	display: block;
}
 
#panel .content input.field {
	border: 1px #1A1A1A solid;
	background: #414141;
	margin-right: 5px;
	margin-top: 4px;
	width: 200px;
	color: white;
	height: 16px;
}
 
#panel .content input:focus.field {
	background: #545454;
}
 
/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
	display: block;
	float: left;
	clear: left;
	height: 24px;
	text-align: center;
	cursor: pointer;
	border: none;
	font-weight: bold;
	margin: 10px 0;
}
 
#panel .content input.bt_login {
	width: 74px;
	background: transparent url(images/bt_login.png) no-repeat 0 0;
}
 
#panel .content input.bt_register {
	width: 94px;
	color: white;
	background: transparent url(images/bt_register.png) no-repeat 0 0;
}
 
#panel .lost-pwd {
	display: block;
	float:left;
	clear: right;
	padding: 15px 5px 0;
	font-size: 0.95em;
	text-decoration: underline;
}
 
/* Panel Tab/button */
.tab {
  	background: url(images/tab_b.png) repeat-x 0 0;
	height: 42px;
	position: relative;
    top: 0;
    z-index: 999;
}
 
.tab ul.login {
	display: block;
	position: relative;
  	float: right;
  	clear: right;
  	height: 42px;
	width: auto;
  	font-weight: bold;
	line-height: 42px;
	margin: 0;
	right: 150px;
  	color: white;
  	font-size: 80%;
	text-align: center;
}
 
.tab ul.login li.left {
  	background: url(images/tab_l.png) no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
.tab ul.login li.right {
  	background: url(images/tab_r.png) no-repeat left 0;
  	height: 42px;
	width: 30px;
	padding: 0;
	margin: 0;
  	display: block;
	float: left;
}
 
.tab ul.login li {
 	text-align: left;
  	padding: 0 6px;
	display: block;
	float: left;
	height: 42px;
  	background: url(images/tab_m.png) repeat-x 0 0;
}
 
.tab ul.login li a {
	color: #15ADFF;
}
 
.tab ul.login li a:hover {
	color: white;
}
 
.tab .sep {color:#414141}
 
.tab a.open, .tab a.close {
	height: 20px;
	line-height: 20px !important;
	padding-left: 30px !important;
	cursor: pointer;
	display: block;
	width: 100px;
	position: relative;
	top: 11px;
}
 
.tab a.open {background: url(images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(images/bt_close.png) no-repeat left -19px;}

Note: I have set font-size to 130% for #toppanel because the panel font was too small in the Default theme. If you use this code with another theme and font is too big, modify this value or just delete “font-size: 130%;”.

STEP 3: Add the Javascript files & Images to your theme.

Click here to download the sliding panel from my previous article. When prompted save Sliding_login_panel_jquery.zip on your desktop. Uncompress the file (with 7zip for example) and copy the “js” folder (all of it) into wp-content/themes/default/. Copy all the images from the zip file and save them in wp-content/themes/default/images/.

By now, if you saved the files to the right folders and added the HTML and CSS code to the right files, the panel should slide as expected. To test your sliding panel, you can create different users in Users > Add New and select a different role for each. Then sign in with the different accounts you just created to see how the panel behaves.

Let’s now take care of the register form.

STEP 4 (Optional): Register form

If you want the register form to appear in your panel, you will need to follow one last step. Go to Settings > General and check “Anyone can register”. If you don’t check this box, this is what you will see:

When you succesfully register or get an error you will be redirected to http://yoursite.com/wp-login.php?action=register. I would have prefered to handle errors and messages directly from the sliding panel but that was not possible without adding a lot of code to it.

I was surprised to see there was so little documentation about adding a register form to the front page. I found a few plugins but nothing really interesting.

If you know something interesting about it, let me know.

Not Working. Help!

You followed all the steps above but it didn’t work. Don’t worry! I have bundled this jQuery Sliding Panel with the default theme. Just download it below and install it as you would normally do for any theme:

If it still doesn’t work, make sure jQuery doesn’t conflict with another AJAX library (Mootools, Prototype…).

Conclusion

I tried to make this tutorial as simple as I could for you to implement this script into your WordPress theme. However, depending on the theme you use, you might run into a problem. If so, ask your questions below and I will try to help you.

Update: Plugins for WordPress, Drupal, Joomla, Tutorials…

(Note: If you created a plugin based on this script for another CMS, feel free to contact me or leave a comment below and I will add it to this list).

Preview/Download

This script is distributed under the GNU General Public License version 3.

The sliding panel works like a charm in IE6, IE7, Firefox, Safari, Opera and Chrome. I didn’t test it in IE8 yet. Let me know if it does.

Please note the Login and Register forms in this demo will not work “out of the box” without a user login system pre-installed on your site (e.g. PHP/MySQL user login system)!

What’s new in this version?

• Panel has been redesigned to be “slicker”.
• Panel overlaps content instead of “pushing” it.
• Images are transparent… and work in IE6! (Thanks to 24Ways for their IE PNG Fix.) This means, you can change the background color of the body as you wish or even set a background image.
• Login button that slides the panel down changes from “Log In | Register” to “Close Panel” on click and I have added some nice rollover images:

Login button when panel in closed state:

Close button when panel in opened state:

Toggle effect (.toggle() in the javascript code below) behaves differently in jQuery than in Mootools and makes it dead simple to switch the login and close buttons on click. Here’s how I proceded:

1
2
3

	<li id="toggle">
	<a id="open" class="open" href="#">Log In | Register</a>
	<a id="close" class="close" style="display: none;" href="#">Close Panel</a></li>

… and the javascript to expand/collapse panel and switch the buttons on click:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function() {
 
	// Expand Panel
	$("#open").click(function(){
		$("div#panel").slideDown("slow");
	});	
 
	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");
	});		
 
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(function () {
		$("#toggle a").toggle();
	});		
 
});

Check the jQuery documentation for usage.

Known Bugs

• Rollover effect for the login button doesn’t work in IE6 because of 24Ways’ script. Knowing alpha transparency works perfectly in this browser I think we can disregard that minor bug.

Preview/Download

How to have the panel “push” the content down?

Many people ask me how to have the panel “push” the content down instead of overlapping it so I thought I would answer it here instead of answering each comment individually. This is actually extremely easy to do so. All you have to do is open slide.css (Appearance>Editor) and find:

1
2
3
4
5
6
7
8
9
10

/* sliding panel */
#toppanel {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Change position:absolute; for position:relative;. That’s it!

Update: Plugins for WordPress, Drupal, Joomla, Tutorials…

(Note: If you created a plugin based on this script for another CMS, feel free to contact me or leave a comment below and I will add it to this list).

I have tried all the text and WYSIWYG editors you can think of for Windows: Dreamweaver, PSPad, Blueflish, NVU, Webuilder, Notepad++, Amaya, Aptana… but none really met my expectations of what a text editor should be. Don’t get me wrong. Some of them are really good editors… just not what I was looking for.

“E is a new text editor for Windows, with powerful editing features and quite a few unique abilities. It makes manipulating text fast and easy, and lets you focus on your writing by automating all the manual work. You can extend it in any language, and by supporting TextMate bundles, it allows you to tap into a huge and active community”

I tried it for a full day and bought a license the next morning. For only $34.95, it is worth the expense.

Screenshot:

If you know this text editor, share your thoughts in the comments or let us know what software you use for your day-to-day developement work.

Link: E-TextEditor website »

I ran into a lot of issues while exporting and importing in to phpMyAdmin. The database was large and phpMyAdmin was importing only half of it (timeout???) even though it said “Your SQL query has been executed successfully”. I retried it a few (dozen of) times. I exported it as Zip, GZip, split the sql file into 4,6,8… smaller files. Nothing worked.

And at 7:16pm… Hallelujah! it works!

You can’t imagine what I was feeling at this very moment. It was like… I don’t know… like finding some water after 15 days in the desert, maybe!?

So, here it is, all posts restored, just a few comments lost (no more than 5 I think), and I have upgraded to WordPress 2.7.1 while I was at it.

What happened in the last two days taught me a few important things:

• 1- Upgrade WordPress and plugins to the latest release if possible
• 2- Repair/optimize database every once in a while with phpMyAdmin
• 3- The phpMyAdmin import/export Functionalities suck!
• 4- Don’t count too much on your host company to support you when you are in a deep shit!

Anyway, I am still wondering what went wrong with the Popularity Contest plugin. Did anyone had a similar problem?

P.S.: I received a message on Twitter saying “… and pls backup!” Well, I backup on a current basis. Actually, once a week or so or after any big site update. I can’t be held responsible when a backup get corrupted. It just happens! That’s why it is really important to always have a few backups. Mines are stored on my server and on two external hard drives.