Last year Microsoft held an open source event in Canada called “Make Web Not War”. I have to admit they did a really good job. I was also fortunate enough to speak at the event in Toronto. As part of the event Microsoft held a coding competition called “FTW“, which was very successful, so successful it’s back!

What is The FTW! Coding Competition?

FTW! is where the best and brightest Canadian web developers go toe-to-toe to develop the next great Canadian Web App. How can you participate? Simply code or port a web application onto Windows/IIS or Windows Azure. That’s it, that’s all. All applications that fall into any of the following categories, and are on Windows/IIS or the Windows Azure Cloud are eligible.

Compete in the following categories:

• PHP Application: (PHP on Windows+IIS or PHP on Windows Azure)
• Windows Azure Application: (Any Language: .Net, PHP, Ruby, Python…)
• Open Data Application: (Use of Open Data Catalogues on Windows or Windows Azure on Any Language)

What could you win?

Along with an awesome grand prize worth fighting for (Dell Office Computer Make Over), the FTW! Coding Competition not only grants the winner bragging rights as one of Canada’s top web developers, but awards two runner-ups with top of the line Dell prizes as well. Once the hard work is done, a panel of industry judges will choose three finalists to battle it out for the grand prize at the “Make Web Not War” conference on May 27th in Montreal!

How can you register?

If you want more information on how to register to the competition please visit: http://www.webnotwar.ca/ftw/

See you at the finals in Montreal!

THEPOP

NOT JUST A LABEL

Candy Collective

bitfuul magazine

and i still miss you

As a designer/developer I dug into the core early on (ver 2.0), wanting to get a better understanding of how WordPress works and how I can customize the overall experience for my clients. I’ve designed custom login pages and dashboards for almost every WordPress project I’ve worked on since.

If you have even a basic understanding of CSS and are familiar with how the basics of PHP works in WordPress you can do more than you think quite easily.

How to get started
There are essentially 3 ways we can customize the dashboard.

1. plugins (don’t always meet every need)
2. core files (can change with every new version of WP)
3. functions.php (flexible and simple)

After reading quite a few posts over at wprecipes and wpbeginner, I recommend/prefer using the functions.php file, it’s cleaner, and more flexible when it comes to versioning.

First, let’s take a look at the basic architecture of the dashboard or for the sake of this discussion the admin area. Everything you need to get started is located in the wp-admin directory.

wp-admin (what we need)

• login.css
• dashboard.css
• wp-admin.css
• admin.php
• admin-header.php
• admin-footer.php
• menu.php

These files will allow you to make basic changes to the overall look and feel.

Login Page
Here are 2 great examples

source http://www.wpbeginner.com/showcase/best-of-best-wordpress-custom-login-page-designs/

source http://www.wpbeginner.com/showcase/best-of-best-wordpress-custom-login-page-designs/

Open login.css and you can modify the colours, images, and the form. There are also a handful of plugins available, here are 2 you should check out Custom Admin Branding and BM Custom Login . You should also read “Best of Best WordPress Custom Login Page Designs” by wpbeginner.

You can also add a few lines of code to your functions.php file and achieve the same outcome without having to install a plugin or a lot of coding.

Open up your functions.php file or create one if the theme you’re working on does not have one and add the following code to add a custom logo on the login page.

function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>';
}

The above code modifies the default h1 class by changing the background image to a custom logo file stored in your themes images directory.

Admin Header
If you wanted to change the dashboard logo (top left corner) you could modify admin-header.php. You can also change the visit link and welcome message.

<img src="../wp-includes/images/blank.gif" alt="" width="32" height="32" /> <h1 id="site-heading" <?php echo $title_class ?>><a href="<?php echo trailingslashit( get_bloginfo('url') ); ?>" title="<?php _e('Visit Site') ?>"><span><?php echo $blog_name ?></span> <em id="site-visit-button"><?php _e('Visit Site') ?></em></a></h1>

To change the logo we need to edit line 104 (depending on your editor) or look for img id=”header-logo

All you need to do is change the img src to point to your logo file. One other thing I like to modify is the visit link. Why does it open in the same window? I’m not sure about you? but when I’m working I rather have it open in a new window, so I add target=”_blank” in the href tag.

One more thing you may want to change is the welcome message in the top right corner, “Howdy, webmaster”.

Go to line 108 or search for howdy

<p><?php printf(__('Howdy, <a href="%1$s" title="Edit your profile">%2$s</a>'), 'profile.php', $user_identity) ?>

Change Howdy to whatever you want, simple!

Now, here’s how to do it using functions.php:

add_action('admin_head', 'my_custom_logo');
function my_custom_logo() {
echo '<style type="text/css">
#header-logo { background-image: url('.get_bloginfo('template_directory').'/images/dash_logo.png) !important; }</style>';
}

Admin Footer
Open admin-footer.php and go to line 23 or search for admin_footer_text

echo apply_filters( 'admin_footer_text', '<span id="footer-thankyou">' . __('Thank you for creating with <a href="http://wordpress.org/">WordPress</a>.').'</span> | '.__('<a href="http://codex.wordpress.org/">Documentation</a>').' | '.__('<a href="http://wordpress.org/support/forum/4">Feedback</a>') ); ?></p>

Now add your own text, links, and images.

Now, here’s how to do it using functions.php:

function remove_footer_admin () {
echo "Your own text";
}
add_filter('admin_footer_text', 'remove_footer_admin');

Widgets
Creating custom widgets are very useful and a lot of fun. Let’s add a simple ads window that will be viewable to all users logged in. I’m only going to show you how to do this in functions.php, it’s a lot easier. However, if you are feeling adventuress you can do this in the core.

To modify the core open dashboard.php located in wp-admin/includes/. You will notice all the main dashboard widgets are at the top of the file ending around line 50 in my editor. You can also play around with the current widgets, for example you can change the default WordPress dev feeds to any feed you want. I usually load feeds from my other blogs or resource sites.

…ok, so let’s add a widget using functions.php.

Add the following code to you functions.php file:

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

function my_custom_dashboard_widgets() {

global $wp_meta_boxes;

wp_add_dashboard_widget('custom_ad_widget', 'Ads', 'custom_dashboard_ad');

}

function custom_dashboard_ad() {

echo '<p>Check out some other cool stuff</p><br /><img src="http://www.dropthedigibomb.com/dropit.jpg" />';

}

A few things to note: The second last line is where you define the name of the widget that displays in the dashboard ‘Ads’, so you can name this anything you want. The echo, this is where you can add any basic html to output text and images. If you have a more advanced knowledge of PHP, then you can go ahead and add CSS or jQuery, pretty much anything.

Now go and have fun!

Resources:

http://wpengineer.com

http://www.wprecipes.com

http://www.wpbeginner.com

http://buildinternet.com/2010/01/create-custom-option-panels-with-wordpress-2-9

So I started thinking, wouldn’t it be cool if there was some kind of monthly publication dedicated to showcasing all the great designers online, who doing what, what they’re doing, and how there doing it?
I looked, couldn’t find anything other than more blogs…So, that’s when I decided I would do it myself!

I figured instead of blog I wanted to publish and online magazine every month that would fill this need. That’s when créer magazine was born!

The name créer is French for create, why a French name? Why not, I live in Montreal, besides aren’t design mags suppose to have French, Italian, or German names

Put simply, créer is an online magazine dedicated to serving the design community, specifically those who blog or who are considering setting up a blog. It is our goal to educate and inspire individuals from all walks of design.

Each month we will interview/showcase professional and student talent/profiles, provide insight on new trends, communities, and much more.

We have a great lineup of designers and writers for inaugural issue:
Feature designer/cover/interview: Chris Spooner – http://www.spoongraphics.co.uk
Designer interview/showcase: Illustrator Anton Peck – http://www.antonpeck.com
Independent photographer: Alyssa Katherine Faoro ( akFAORO ) – http://www.akfaoro.com
Student designer profile: Matt Jones – http://warhead1.blogspot.com
Special Article: Keir Whitaker – Carsonified – Community Manager and Think Vitamin Editor

Plus a handful of other designers, bloggers, photographers, and writers.

creermag.com just launched and you can find out more there, in the interim you can follow us on twitter, join our facebook page, or submit work to our flickr pool.

Our first issue goes live in March, so wish me luck!

http://flashart.brendanserashriar.com

Now, I’m just having fun doing them, I have still hundreds of sketches to convert, so keep checking back.

Enjoy!

I usually tweet, facebook, and stumble a good majority of the articles I find, and people are always asking me where I get this stuff? So I decided to post my 30+ favorites here (in no particular order). enjoy!

http://www.uxbooth.com/

http://webdesignledger.com/

http://carsonified.com/blog/

http://sixrevisions.com/

http://www.webdesignerdepot.com/

http://www.webdesignerwall.com/

http://tutsplus.com/

http://www.sohtanaka.com/web-design-blog/

http://buildinternet.com/

http://www.usabilitypost.com/

http://css-tricks.com/

http://webdesignernotebook.com/

http://www.noupe.com/

http://www.smashingmagazine.com/

http://vandelaydesign.com/blog/

http://www.catswhocode.com/blog/

http://24ways.org/

http://spyrestudios.com/

http://www.tutorial9.net/

http://www.webappers.com/

http://designinformer.com/

http://www.blog.spoongraphics.co.uk/

http://colorburned.com/

http://abduzeedo.com/

http://www.problogdesign.com/

http://www.alistapart.com/

http://inspectelement.com/

http://www.ilovecolors.com.ar/

http://blog.creativityden.com/

http://workawesome.com/

http://www.inspiredm.com/

http://davidwalsh.name/

http://www.jayhollywood.com.au/the-blog/

http://thinkdesignblog.com/

Tetris

Super Mario

Enjoy!

Over the past few weeks I have received many emails and tweets on a job well done. I have also been featured on at least 4 design showcases that I could find. I just want to say thank you everyone for the pat on the back! If you have seen my listed somewhere else let em know.

ONEPAGELOVE.com

CSSBOMB.com

CSSDEPOT.com

INDEZINER.com

Thank you!

Project52 aims to achieve fresh content and better blogging on the web. The goal is to write at least 1 new article per week for 1 year starting Jan 1st 2010. A lot of  us find ourselves dreaming about content we would like post and never start and create drafts that we never finish. A successful website, blog, or community is one that stays relevant and fresh, why else would readers come back?

I think this is a great idea, and I officially take the pledge to write one post per week, new and unique content, for one year starting with this post and ending Dec 2010!

I will post everything under a new category, Project52, and tweet new posts using #p52 , for those of you interested in following.

If you have a blog or community I encourage you to take the challenge as well!

Wish me luck!