ColorZilla, a company that has created an amazing color analyzer plugin for both Firefox and Chrome, has created a site where web designers can go to generate any CSS Gradient. If you are like me, you’ve got the general cross-browser, hex based, top to bottom gradient down but what about multi-directional gradients, multi-stage gradients, or gradients with opacity? And although some of the cool features are not yet supported on all browsers, ColorZilla’s Ultimate CSS Gradient Generator also provides fallbacks in case a user who is on an older browser comes to visit your site.

This really is the perfect tool! check it out here: http://www.colorzilla.com/gradient-editor/

As CSS standards continue to evolve, web designers and website owners are given the possibility to really revolutionize their brand. In previous years, Web sites did very little to reflect a corporate brand outside of placing images everywhere. Now websites are as much a part of a corporate brand as the logo.

You can easily see this in some of today’s top brands. For one example, just look at the simplicity and the minimalism in Apple’s site. Apple’s site conveys their brand just as much as their logo or products do.

For a recent project, I decided to make a simple logo out of pure CSS, no images, no JavaScript. I got my inspiration while playing with dominoes, placing simple rectangular shapes so that the negative space resembled the letters “dph”. Using CSS, I was able to recreate the effect and include a little hover-over fun. Though this is incredibly simple, it shows how you can also start to use CSS to make your Branding or your Logo interactive.

I can’t wait to see where CSS goes next. There are some amazing new features in CSS3 such as selecting even or odd children, timed animations, rounded corners without images, and so on.

If you have specific uses for CSS that you think will inspire others, share them here!

I have recently been working on a plugin that makes use of many features that can be found elsewhere throughout the WordPress administration pages. I wanted to give the plugin a feel that really fit with WordPress but wasn’t sure where to start. I found this Onextrapixel article extremely helpful to get a start on styling my WordPress Plugin Admin pages.

Also, if you are interested, here is the WordPress documentation on how to create your own link with sub-pages in the WordPress Administration Menu. This is very helpful if you have a plugin that requires multiple admin pages and you want to keep it organized.

It is also very helpful to get Mozilla Firefox or Google Chrome and inspect existing WordPress tables/layouts/images… to find the CSS classes and IDs used by WordPress. Sometimes the easiest way to style your plugin is to use the same classes and IDs in your own code.

Got the Dev Skills?

While OrangeBox3 is on its way to a public beta release, there is a lot to do. If you would like to help out with the development of OrangeBox, contact me! If you have any skills in JavaScript or especially jQuery and want to pitch in some time developing OrangeBox, there’s plenty of room!

Have Suggestions?

If you would like to see something added into this release of OrangeBox, now is the time to request it! Simply add a comment to this post and I’ll consider the addition.

Want to Donate?

The development of OrangeBox takes a lot of work that is right now all done by one guy. I am hard at work Pushing OrangeBox forward and taking into consideration all of your suggestions. If you would like to help get OrangeBox out faster but don’t want to dig into the code, consider donating 50 cents or a dollar… every little bit helps tremendously! To Donate, go to the OrangeBox homepage

But let me spill my two cents anyways:

HTML5 is a set of rules/standards for writing HTML. Basically, imagine it this way… there was once Old English but now many of those words are not used and now we have a lot of new words that perform functions of some of the old words. HTML5 is a new set of words that replace old ones to be more efficient. HTML5 also gets rid of some old words that are no longer needed.

Another function of HTML5 is to say, “we no longer want to read slang, instead we want you to write properly so that more people can understand you”. Makes sense right? Slang is hard to understand for people learning a new language.

Last and probably most important is to know that HTML5′s last function is to create shortcuts for complex tasks. The most commonly known shortcut is the HTML5 <video> tag. In short, this tells your browser, “replace me with some cool JavaScript functions that play a video”.

That is HTML5

It’s Like Comparing a Pogo Stick to a Dictionary

“Um… that’s not very Flash-tastic.” You are correct! HTML5 is not a replacement for Flash. Let me reiterate so that it becomes obvious… Flash makes images move… it displays videos and sounds… it lets users interact with videos. HTML5 is standards… it is a set of rules to write a language. Not even remotely related.

So if HTML5 is not a replacement for Flash… what’s all this talk about then? Notice the final part of HTML5… it “creates shortcuts for complex tasks” by using “some cool JavaScript functions”. JAVASCRIPT, that’s what it is all about. That’s the key.

HTML5 has shortcuts for JavaScript which has made JavaScript a competitor for the gaps in the Web that Flash filled. Flash is a tool to create animated images (um… movies) that can be interacted with. However, because there was no way to show a video on a browser, Flash raised its hand and said, “give me the video, I’m pretty good with moving images”.

Flash will not go away anytime soon. Sure, you can create an interact-able animated set of images with JavaScript but it’s going to take a hell-a-lot of math. So until there is a visual program to write all that math (um… like an Adobe Flash Catalyst for JavaScript), Flash will not have a direct competitor.

The Sad Part…

…is that Adobe is getting the short end of the stick.

Apple and others have been so adamant that Flash should die that they already wrote the obituary. “HTML5 kills Flash”. What’s worse is that they blame it on a great company being “Closed Source”. And I’ll add in here that yes, JavaScript is open source… bury that away somewhere in case it is actually useful information.

Let me ask this: Have you ever tried to theme iTunes? Why did it take so long for Apple to let you put a background image on your iPod touch? Did you know that you have to pay $100 a year to be able to create an iPhone app… THAT IS NOT BUILT ON JAVASCRIPT BUT ON A CLOSED SOURCE LANGUAGE CREATE BY APPLE? (Google Cocoa).

I’m not a Hater

Let me add some fine print…

I don’t hate Apple… I have an iPad2 and a Mac Book Pro and an iPod Touch and I want me an iPhone 4s. Apple is very progressive and has revolutionized the computer industry. Apple has created quality standards that now every other software or computer company must live by. They do what they do and they do it very well.

They can also sell anyone on anything… which is good to be able to do. They sometimes just don’t do that very ethically. Trash talking a company that has since the beginning, developed specifically for Apple products (and in fact is probably one of the biggest factors in Apple’s popularity) is not a nice way to say thank you.

So… here is what I want to say: Adobe is a great company, Flash is very good at what it does… there’s no need to bash either.

It will be helpful to have some CSS experience and in the specific use outlined below, some WordPress development experience as well.

What you will need:

• A graphics program (like Adobe Photoshop CS5)
• A simple text editor (Notepad++ is great for Windows… On mac, try Komodo edit)

What you will accomplish in this tutorial:

Let’s get started… Step #1

Fire up your graphics program. You can download a PSD or PNG template to help with the image layout.

Step #2

You will be creating a grid of months, days, and years. My grid has the months in the first column, days in the next two columns and years vertically in the last column. Feel free to try different fonts, just make sure to stay within the grid. You can also change the overall size to create smaller or larger stamps. If you do change the size, you will need to do the math to figure out the CSS. Once your done, save the file as a .png and place it inside an images folder at the root of your theme (where your main style sheet lives).

Step #3

Now for the CSS. Although it looks pretty complex, it is actually really easy. If you used the psd template and kept the image the same size, you won’t need to do any math, just put in the CSS and your done.

The CSS is as follows:

/*Date Sprite */
.postdate {
    position: relative;
    width: 70px;
    height: 65px;
    float: left;
    background:#1EB0BC;
    margin:10px 10px 10px 0;
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari, Chrome */
    border-radius: 5px; /* CSS3 */
}
.month, .day, .year {
    position: absolute;
    text-indent: -1000em;
    background-image: url(images/date_img.png);
    background-repeat: no-repeat;
}
.month {
    top: 10px;
    left: 5px;
    width: 35px;
    height: 30px;
}
.day {
    top: 28px;
    left: 5px;
    width: 35px;
    height: 30px;
}
.year {
    top: 12px;
    right: 0;
    width: 25px;
    height: 60px;
}
.m-01 { background-position: 0 0px;}
.m-02 { background-position: 0 -30px;}
.m-03 { background-position: 0 -60px;}
.m-04 { background-position: 0 -90px;}
.m-05 { background-position: 0 -120px;}
.m-06 { background-position: 0 -150px;}
.m-07 { background-position: 0 -180px;}
.m-08 { background-position: 0 -210px;}
.m-09 { background-position: 0 -240px;}
.m-10 { background-position: 0 -270px;}
.m-11 { background-position: 0 -300px;}
.m-12 { background-position: 0 -330px;} 

.d-01 { background-position: -35px 0;}
.d-02 { background-position: -35px -30px;}
.d-03 { background-position: -35px -60px;}
.d-04 { background-position: -35px -90px;}
.d-05 { background-position: -35px -120px;}
.d-06 { background-position: -35px -150px;}
.d-07 { background-position: -35px -180px;}
.d-08 { background-position: -35px -210px;}
.d-09 { background-position: -35px -240px;}
.d-10 { background-position: -35px -270px;}
.d-11 { background-position: -35px -300px;}
.d-12 { background-position: -35px -330px;}
.d-13 { background-position: -35px -360px;}
.d-14 { background-position: -35px -390px;}
.d-15 { background-position: -35px -420px;}
.d-16 { background-position: -35px -450px;}
.d-17 { background-position: -70px -0px;}
.d-18 { background-position: -70px -30px;}
.d-19 { background-position: -70px -60px;}
.d-20 { background-position: -70px -90px;}
.d-21 { background-position: -70px -120px;}
.d-22 { background-position: -70px -150px;}
.d-23 { background-position: -70px -180px;}
.d-24 { background-position: -70px -210px;}
.d-25 { background-position: -70px -240px;}
.d-26 { background-position: -70px -270px;}
.d-27 { background-position: -70px -300px;}
.d-28 { background-position: -70px -330px;}
.d-29 { background-position: -70px -360px;}
.d-30 { background-position: -70px -390px;}
.d-31 { background-position: -70px -420px;} 

.y-2009 { background-position: -105px 0;}
.y-2010 { background-position: -105px -60px;}
.y-2011 { background-position: -105px -120px;}
.y-2012 { background-position: -105px -180px;}
.y-2013 { background-position: -105px -240px;}
.y-2014 { background-position: -105px -300px;}
.y-2015 { background-position: -105px -360px;}
.y-2016 { background-position: -105px -420px;}

Explanation:

.postdate – Sets the width and height of the entire date stamp. In this case we are going to make our date fit into a box 70px by 65px.

.month, .day, .year – Sets the width and height of the individual elements that make up our whole date stamp. Our months and days are 35px wide by 30px high. The years are 25px wide by 60px high. When you put these elements together they make a box 70px wide by 65px high. It also attaches the graphic we made in step #1 so we can position it for each individual element in the Sprite.

.m-01 through .m-12 – are our months. This part of the CSS positions our image to display the months. As you can see I set the image to move on an X Y axis based on where it appears on the image. The easiest way to figure out where the top left corner (0,0) of each month, day, or year is on the larger image is to open up Photoshop and press ctrl-r to see the ruler. Set the ruler in pixels by right clicking the ruler and selecting pixels. Now follow the guideline to the ruler to see what pixel it is on.

.d-01 through .d-31 – Is used for exactly the same thing as .m-01 – .m-12 except their used for the days rather than the months.

.y-2009 through .y-2016 – Same as above only we use them for the years.

Step #4

Open up the loop in WordPress. Using the default WordPress setup, the loop in WordPress is in the page(s) that display(s) your blog posts. This is usually the index.php page. Dates show up on other pages too but this tutorial only replaces the dates in the main loop.

Search for something along this line in your loop:

<?php the_time('F jS, Y') ?>

Replace with these lines:

<div class="postdate">
    <div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?> </div>
    <div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
    <div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>

Step #5

Upload your image, and the changes to your CSS and index.php. Check out your page live in a browser to see the results! You just created your own styled date stamp using CSS sprites.

MichelleKayHamilton was designed and developed as a photography website. The goal was to create a site that could showcase the best photographs. The site features a full screen presentation for the photographs. Visitors can easily move between photographs and display the photographs in a slideshow. The site also includes a full featured photoblog with great social tools and a simplistic user experience.

Get Supersized

To display the images, the site uses a jQuery plugin called Supersized. This amazing plugin allows images to be displayed full screen and automatically resizes them with the browser window. It also allows transitions between images. Check out the plugin here.

SlideShowPro

I’ve said it before but SlideShowPro Director is the Content Management System for photographers. With the powerful API, you can access all of your images in various sizes and image qualities. The images are neatly organized in galleries and albums. Be sure to check it out if your looking for a system to organize your photographs.

The site is coming soon!

The following article has an example of how to create animated navigation without the animation buildup: Quick Tip: Prevent Animation Queue Buildup » Learning jQuery – Tips, Techniques, Tutorials

It’s pretty easy to implement if you have worked with the WordPress API previously.

The first step is to prepare your HTML. Put it in your print admin page function. You want to have a text input for the image URL, and a button that will launch the uploader dialog.

<tr valign="top">
<th scope="row">Upload Image</th>
<td><label for="upload_image">
<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />
<br />Enter an URL or upload an image for the banner.
</label></td>
</tr>

The easy part is out of the way, so now it’s time to make your HTML do something. You need to enqueue some scripts and styles. Here’s an example function to show how it’s done:

function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
}

We need the media-upload script, the thickbox script/stylesheet and jQuery, which is already included. We also need to register and enqueue our own JavaScript file, my-script.js, which will handle the media uploader functionality.

The if (…) block ensures that the scripts and styles will only be included on a specific admin page. Your plugin’s (or theme’s) admin page URL should have a ?page=some_string at the end. Replace ‘my_plugin_page’ for that string.

Here is the JavaScript that calls the uploader. This will go in your my-script.js file.

jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}
});

The click() function opens the media uploader dialog when the “Upload Image” button is clicked. It also stores the name of the URL input field in a variable, for later use.

The second function overrides the send_to_editor() function in the media-upload script. This modifies the “Insert into Post” button in the uploader dialog so that it grabs the URL of the image that was chosen and stores it into the form.

That’s it. You should now have a button that allows you to add an image URL via the WordPress media uploader in your theme or plugin’s option page

The Basics

WordPress is a content management system. In simple terms that means it allows you to manage all the text on your site without knowing how to write code.

It also allows you to manage images and other media in your site. Just like you can add an image to a Word document, you can in WordPress as well.

WordPress also allows you to allow visitors to comment on the things you write. As a site admin, you can moderate these comments.

Posts, Comments, Pages & Links

These are your three types of content in WordPress. Traditionally WordPress is known as a blogging host but over time it has become a complete Content Management System.

Posts are the bread and butter of blogs. They are short sets of content that are organized in to categories, archived by date and tagged with keywords. The key is that they are kept fresh… there is always new content to find and old content gets pushed to the back of the shelf. The second key ingredient is comments (see below).

If a post is the bread and butter of a blog, comments are a its jam. Comments are for visitor’s discussions and questions about the post. This help people get involved.

Pages are what you find on most websites. The key to a pages is that they are stale… they stay where they are and don’t change often.

Links are for you to show the things you like on the web. This is a place to share websites that relate to yours or links to other blogs that you want to recommend to visitors.

The WordPress Dashboard

To get started using your WordPress site, get familiar with the WordPress Admin Dashboard. Here are some basics to the Dashboard.

The WordPress Dashboard is comprised of three main sections: Overview, Content, and Set Up. The main page is the overview of everything on your site. Posts, Media, Links, Pages, and Comments are where you manage your content. Appearance, Plugins, Users, Tools, and Settings are where you set up your site.

The Dashboard Home Page is used to hold a couple widgets that help you see your entire site at a glance. It shows how many posts, pages, and comments you have and has other useful information as well.

Posts: This is where you manage and create your posts. This page shows a list of all the posts that you have created. You are also able to create new posts (read more below).

The Media page is where you can upload images and videos for use on your site. You can change media descriptions and set default sizes and other settings for your media here.

Links: This is where you store your links. You can categorize them so that links related to your site and links that are unrelated can be separated. You can also manage many options for individual links.

Pages is where you manage and create new web pages. Once you have your site set up, you will mainly use this to update/edit your page content (read more below).

Comments: This is where you can read all the comments that are coming in and where you can moderate the comments. You can approve, delete and mark comments as spam.

Appearance: Here you can choose a theme for your site. There are many free themes available. You can also customize some theme’s settings here. There is also a place to add widgets to your theme’s sidebars.

Plugins can be added to your site to do complex tasks for you very easily. If you are trying to add a Twitter feed to your site, want your site to automatically update Google sitemaps, speed your site up with caching… check this section out.

Users: This area is set up for you to manage users on your site. If you want to have a guest publisher or a site editor on your site, you can simply add them as a user.

Tools are for backing up or restoring your site as well as some other more advanced features that will not be covered in this post.

Settings is a place to store all your default options for your site and plugins.

Creating a Post

To create your first post:

• Go to the post tab on the left of your dashboard
• Click Add New post
• Give your post a title
• Add content

You can see that you can either visually write your content like in MS Word or write html for more advanced styling. On the right, you can select a category for your post and add tags/keywords to your post. This is it, just click save draft to edit it later or publish to send it online.

Editing a Page

To edit a page:

• Click the Pages tab on the left of your dashboard
• Hover over the one you want to edit and click Edit (you can also click quick edit but this has fewer options)

Here you can edit the content of your page. I advise against changing the title for search engines sake. You can preview the changes that you make before you publish.

Hope this helped!