BoxieDesigner

Redaxscript – WordPress Alternative

Boxie Designer Team — Wed, 15 Aug 2012 19:16:08 +0000

Redaxscript is a lightweight WordPress alternative that deserves a look, it’s free, open-source, and certainly has potential! Click here to check it out.

20 modern One Page WordPress Themes

Boxie Designer Team — Mon, 25 Jun 2012 18:37:01 +0000

To continue the roundup of design inspiration, have a look at some quite awesome one-page WordPress themes. Click here to check the article out!

30 Beautiful Dark Website Designs for Inspiration

Boxie Designer Team — Sat, 23 Jun 2012 16:14:56 +0000

If you are looking for great design inspiration for your next project. Have a look at these great designs. Check it out now!

Super useful WordPress action hooks and filters

Boxie Designer Team — Fri, 22 Jun 2012 20:43:15 +0000

If you’re looking for some great useful WordPress hooks and filters to sprinkle around your install, this great article from CatsWhoCode shows you around several awesomes. Check it out!

Powerful New CSS- and JavaScript Techniques

Boxie Designer Team — Thu, 21 Jun 2012 20:45:32 +0000

If you’re looking for some awesome new techniques to inspire yourself for CSS and JavaScript, this is definitely the read. Check it out now.

20 New Minimalist WordPress Themes

Boxie Designer Team — Mon, 18 Jun 2012 23:58:50 +0000

With all the feature-rich wordpress themes out there, this great article displays some awesome minimalist WordPress themes.

Click here to check the article out!

Creating an HTML5 Form Using the New Form Types

Boxie Designer Team — Thu, 04 Aug 2011 21:33:14 +0000

A web form is something that we all use at some stage in our online activities. As web designers and developers, we are always finding ourselves building or designing one, which at the least, would be the contact page of our website project. Unfortunately, it is not the nicest job in the world and can become quite a chore as some forms can get very complicated when you start talking about validation, error handling and styling. We either validate and catch our errors using a server side language such as PHP, or we use Javascript, or even both?

Whichever the case, web forms can take up a lot of your development time and this can be a problem. With HTML5 however, some of this pain has been taken away by the introduction of the new form types we can use. And when I say “use,” I mean you can use them right now — without any hacks or workarounds. This does not mean however, that every browser supports them – hell no! That would be way to easy. Instead, any browser that does not support these new types will just revert to ones they do support. So in this tutorial we will explore what is new, what is supported and what they can do. You can download all the code as a zip file at the bottom of the page.

What We Will Be Creating

This is how it will look like once we have finished. Obviously you can get as creative as you want here but unfortunately this is not a design tutorial, rather a tutorial on how to code a nice functional web form using the new HTML5 form types and some CSS3.

The Doctype

Having looked at our finished form, we have a good idea of how we need to set things out. Firstly, open up your favorite text editor and create a new file. Then add in the HTML5 doctype together with a link to your stylesheet. This doctype is recognized by all modern browsers but for those that don’t will only render the page in what is called standards mode.

My shiny new HTML5 form

The wrappers

So that we can center our form using CSS, we need to create two wrappers divs, one called #wrapper and inside that a div called #form. Then looking at our final design we need to add in a h2 tag for our grey form header.


				  

					
My shiny new HTML5 form!

The Form

The mark-up for our form is going to start off as a basic one, so nothing new here. But it’s considered best practice and more semantic to add in the label tags wrapped around our input names.


					Name:

					  
					Email:

						
					Message:

Different Input Tags

You will notice a slight difference here with our input tags. Unlike XHTML when you need a closed tag using the forward slash character ‘/>’, with HTML5 you don’t and this can take some getting used to. However, once you do you can clearly see that this is much cleaner.

In our first input tag, we have added in a new HTML5 attribute called ‘placeholder’. This handy little attribute is one of my favorites as it allows you to use what could only have been achieved using Javascript. So, whatever text the placeholder is holding, will be displayed inside your input field and will disappear and then reappear when that input field in clicked on and off – very handy indeed! Browsers that don’t support the placeholder attribute will simply ignore it.


				   Name:

					 
				   Email:

					
				   Message:

The Email Type

The ‘email’ type is another great addition to our HTML5 form. One thing to note here is although this type is supported and has been for years, it does not really do anything worth writing about – until now of course. In some modern browsers, if you try and add in something other than an email address and try and submit the form, you get a nice little pop up telling us to sort it out! Again, this is something that could only have been achieved using a scripting language.

Email Type on Mobile Devices

Another handy feature of the type=”email” is the way the iPhone interprets it and as soon as the email field is selected, a modified keyboard will appear with a smaller spacebar to allow an ‘@’ symbol and a dot symbol to take centre stage.

The Autofocus Attribute

To help with the user experience, we can add in the autofocus attribute in the first input field and the autofocus will do just that – automatically focus on a particular input field as soon as the page has loaded. Browsers that don’t support this attribute will simply ignore it.

Styling the Form

Now that we have all the mark-up written, it’s time to give our form some style. Without CSS our form will look similar to the image above.

As you can see it’s not nice to look at, is it? But it is considered best practice to create all your HTML first and then add in your styles. So open up your CSS file and let’s think about the background and positioning first. We want to give our page background a nice pattern and then we give our form a width of 400 pixels and then center it on our page.

body {


					font-family: Verdana, Arial;

					font-size: 13px;

					color: #000;

					background: url('images/body_bg.png');

				}
				#wrapper {
					margin: 50px auto; /* 50px from the top and auto centered */

					width: 960px;

				}
				#form {

					margin:0 auto;

					width:400px;

				}

Styling The Labels

Now to give our form that familiar look and feel, we can style our label elements by setting them to block level and giving them some room by adding a top margin.

label { display: block; margin-top: 20px; }

Styling the Text Boxes

Let’s give our inputs fields some style. There is nothing new about this CSS rule and I encourage you to experiment on different colors and sizes. But as the input fields and the textarea share the same styles, we don’t want the textarea to be the same height for obvious reasons. So just underneath our first rule let’s add a height of 213 pixels to our textarea.

input, textarea { width: 379px; background: #efefef; border: 1px solid #ddd; font-size: 0.9em; color: #ccc; height: 25px; padding: 10px; margin-top: 3px; }


				textarea {
					height: 213px;

				}

CSS Focus

You saw how we can use the new HTML5 autofocus attribute in a few steps back. Here, we will use the old CSS way and add a light green border.

input:focus, textarea:focus {


					border:1px solid #99cc66;

				}

Styling the Submit Button

Now let’s add some style to the submit button by creating our own button in Photoshop (or whatever is your preferred design software) making sure we give it a height and width. We then indent the default text so you can’t see it and take away its default border. We also make the button appear like a button on hover by using the ‘cursor: pointer’ property and value. Lastly, to add some visual subtleness to the button, we take away some of its opacity on hover.

#submit { width:97px; height:43px; background:url('images/send_btn.png'); text-indent:-9999px; border:none; margin-top:20px; cursor:pointer; }


			#submit:hover {

				opacity:0.9;

			}

Adding The Header Bar

To make our form complete, we can add some styles to our h2 tag so our header looks more like it should.

h2 { color: #fff; background-color: #666; height: 30px; padding: 10px; }

Final Touches

To make our form really stand out of the crowd, we can add some nice new CSS3 rules to our input fields. Here we can add some rounded corners to all input fields and the textarea. Older browsers won’t recognize the ‘border-radius’ property – which is only for the most current versions of the supported browsers. So we need to add the ‘-moz-border-radius’ property for all gecko engine browsers (Firefox) and ‘-webkit-border-radius’ for all (yes you have guessed it) webkit engine browsers such as Google chrome and Safari.

input, textarea {


					-mox-border-radius: 6px;

					-weblit-border-radius: 6px;

					border-radius: 6px;

				}

So that’s all it takes to create an awesome HTML5 form using all the great HTML5 attributes. If you didn’t follow the tutorial, you can download the completed files using the link below.

Download Source Files
Click to Download Source Files.

Web Design Inspiration #6: Creative Designs and Ideas

Boxie Designer Team — Sun, 26 Jun 2011 17:46:26 +0000

This is an Editor’s Pick.

If you’re looking for great web design inspiration, then these creative designs and ideas must definitely be looked at. Check it out now.

Free Download Anywhere Who’s Online Script

Boxie Designer Team — Sat, 23 Apr 2011 18:37:37 +0000

Hello Boxie Designer Readers,

I developed an Anywhere Who’s Online Script quite a while ago and had it available on CodeCanyon.net. I believe the WOL script I developed can be more useful if it’s available to the general public to download freely. It works right out of the box and has great potential to be expanded on to something even better. A full description on the script is right below. The script is released under the General Public License (GPL) and can be read here. A copy of the GPL License is also included in the package. The minimum requirements for this script are: PHP 5+ and MySQL 4+. You can view a demo here, although it doesn’t show off all the features of this script. You can download it freely here.

Description
The Anywhere Who’s Online List is a very flexible Who’s Online List letting you track users from HTML pages, to PHP Pages, to anywhere on your website.

Tracking users on your HTML pages is simple and easy, all you do is include a simple JavaScript code snippet and you’re done! You can even display a minimized version of the list on your HTML pages using another simple JavaScript code snippet. Think of it as your Google Analytics code snippet, without the load delay, as it’s hosted directly on your website.

There is also an alternative PHP implementation which provides great flexibility, implementation, and customization, which makes the integration flawless. A features list is shown below.

Features List

Track your online Users in HTML , PHP, and other pages
Easily implementable within your own site or users system to identify who’s a guest or a user
Displays the location of the guests or users – Or opt in to not display the location on certain or all pages
Relative time, (i.e: Last Seen 10 Seconds Ago)
Set the time of when a user is considered offline
Easily change the HTML table structure through the template files
And other flexibilities

Download

You can download the Anywhere Who’s Online Script (WOL) by clicking here.

Thank you for downloading, I hope everyone finds it useful, and if you have any questions, comments, concerns, do post a comment and I’ll be glad to assist. Don’t forget to share this page and script; we hope to offer more freebies in the future.

Thanks,
BoxieDesigner.com, Imad Jomaa.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

Boxie Designer Team — Sat, 12 Feb 2011 05:25:11 +0000

This is an Editor’s Pick.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using is another great article from Net Tutsplus. It covers some great techniques for HTML5 and CSS3 that are definitely worth having a look. Click here to check it out.