October 4, 2010

Targeting Your Fonts in Firefox on Windows

Well, you can use this trick for just about anything in your CSS really. It just so happens that at a certain small weight, Museo Sans really crunches on Windows XP Firefox. Weather or not we can target specifically XP I'm not sure yet.. (if anyone knows chime in!) But we can target all Firefox's on all Window's Machines. So here is how you do it...

1. Make a css file called ff.css and put this code in there:

[code]

@-moz-document url-prefix(){
#hackery {
font-family: Helvetica, sans-serif;
}
}

[/code]

Now that you've made your little hack document...

2. fill up in between the moz brackets with whatever selectors you are trying to change.

3. call your new ff style sheet in your header.php like so:

[code]

<?php if (strpos($_SERVER['HTTP_USER_AGENT'], "Windows", 0) !== FALSE) { ?>
<link rel="stylesheet" type="text/css" media="all" href=&quot;ff.css" />
<?php } ?>

[/code]

voila! Firefox targeted on only windows!

You can now fix your fonts and go from this: (crunchy liberation serif to georgia italic)

to this:

To target Window XP in particular (note that this would not cover versions before that), this should work.

[code]
<?php
if ( false !== stripos( $_SERVER['HTTP_USER_AGENT'], 'Windows NT 5.1' )
|| false !== stripos( $_SERVER['HTTP_USER_AGENT'], 'Windows XP' ) ) :
?>
<link rel="stylesheet" type="text/css" media="all" href="ff.css" />
<?php endif; ?>
[/code]

September 20, 2010

“Beyond the System Font – Advanced Web Typography” at WordCamp Birmingham

sara cannonI had the great pleasure of speaking this past weekend at WordCamp Birmingham. It was an incredible day with some incredible speakers! If you missed it, here are my slides on my session "Beyond the System Font - Advanced Web Typography." I will hopefully have a video of the talk available to you soon.

The talk covered:
– the current state of web typography/web font licensing etc
– the latest practices such as @font-face embedding
– a practical and applicable focus on how to utilize Typekit with WordPress.
– real-time typekit installation demonstration / how to change your h1
– application on mobile devices (ipad challenges)
– challenging and combating “FOUT” with js
– combating type crunch
– focus on supporting type foundries (no illegal pirating. buy licensing)

September 9, 2010

Speaking at WordCamp Birmingham

WordCamp BirminghamIf you've never been to a WordCamp now is the time to go! I'm really excited about this camp. I've even dove into the planning of it through designing, planning, pricing, and gathering sponsors. Speaking of, we now have some incredible sponsors (thank you to the platinum sponsors Vaultpress and MailChimp!) We also have some ABSOLUTELY incredible speakers. (I'm not going to miss Dougal Campbell or Andrew Nacin!) I also have the absolute pleasure to speak alongside this awesome lineup . Dan Gavin designed the WordCamp Bham W that I've put on the tshirts and badges.
REGISTER TODAY .. I'll even give you $5 off with this link!! Its going to be great! Really though: weather you are a non-profit, business, designer, developer, blogger, marketing guru, or social media connoisseur, you will benefit from this conference. My topic is geared more towards designers. Here's a description:

Beyond the System Font: Advanced Web Typography

Presented by Sara Cannon

Interested in pushing beyond the system font? Advanced Web Typography will cover:
– the current state of web typography/web font licensing etc
– the latest practices such as @font-face embedding
– a practical and applicable focus on how to utilize typekit with WordPress.
– real-time typekit install demonstration / how to change your h1
– application on mobile devices (ipad challenges)
– challenging and combating “FOUT” with js
– focus on supporting type foundries (no illegal pirating. buy licensing)

I'll post up slides after the event.. but really.. you should BE THERE!

Speaking about "WordPress and Your Brand" at WordCamp Birmingham last year.

August 27, 2010

Combating IE6: Drop Down Menu Plugin for WordPress “twentyten” Them

twentyten

I'm in love with the newly crafted WordPress theme "twentyten." The code is clean and the included functions are spot-on. So, I've decided to start making Child Themes based on twentyten. The one problem I would run into is in Internet Explorer 6. Now, I know that everyone hates it and that we all need to move on into the future.. but.. I have clients that I really need to continue support of that legacy browser. The problem that I encountered was with the drop down menu system. The code is so beautiful and perfect, but it just uses CSS... which IE6 can't recognize. So I decided to write a plug in (with a bit of helpful advice from some awesome geniuses) that I can install whenever I make a child of twentyten and need it to support drop downs in IE6.

WordPress Plugin Page: http://wordpress.org/extend/plugins/twentyten-ie6-menus/
DOWNLOAD from WordPress: Twentyten IE6 Menus

Here is the plugin php file: (if you don't want to use it as a plugin.. just steal the jQuery)

[code]
<?php
/**
* Plugin Name: Twentyten IE6 Menus
* Author: Sara Cannon
* Author URI: http://sara-cannon.com
* Description: Make the menu drop down in IE6 (if you care about that sort of thing)
* Version: 1.0
* License: GPL2
*/
function sara_twentyten_ie6_menus_enqueue() {
wp_enqueue_script( 'jquery' );
}
add_action( 'after_setup_theme', 'sara_twentyten_ie6_menus_enqueue' );

function sara_twentyten_ie6_menus_script() {
?>
<!--[if lte IE 6]>
<script type="text/javascript">
jQuery(document).ready( function($) {
$('#access li').mouseover( function() {
$(this).find('ul').show();
});
$('#access li').mouseleave( function() {
$(this).find('ul').hide();
});
$('#access li ul').mouseleave( function() {
$(this).hide();
});
});
</script>
<![endif]-->
<?php
}
add_action( 'wp_footer', 'sara_twentyten_ie6_menus_script' );
[/code]

Feel free to download and use and let me know if you encounter any bugs.
-sara cannon

This probably won't mean anything to you, but I wanted to document this for my reference. Here are some of the sites I visited when initially researching how to make this plug in. There are probably many more that I hit up in my research later on but I just thought I'd throw this in here considering it is on the same subject lines.

http://www.jdmweb.com/resources/jquery_to_wordpress_plugin
http://www.devlounge.net/articles/using-javascript-and-css-with-your-wordpress-plugin
http://www.lost-in-code.com/platforms/wordpress/wordpress-plugins/wordpress-build-a-thickbox-plugin/
http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

August 21, 2010

Presentation: Customizing WordPress Themes / Child Themes – WordCamp Savannah 2010

At WordCamp Savannah today I presented on Customizing Themes / Child Themes. Check out the slides below if you're interested. There have been lots of great presenters today. Check out on twitter #wcsav to check out what has been going on. :)

View more presentations from saracannon.

July 6, 2010

WordPress Tip: Centering the Main Menu in the Twentyten Theme

twentyten

Hello WordPress users! All of y'all know about the stunning new default theme "twentyten" that comes with the new WordPress 3.0 release. I've been working with that theme a lot through child themeing.

If you ever run into a problem/question with customizing your theme or CSS, you can always search the WordPress Codex or Forums - most likely there will have been someone else who has encountered the same or similar problem. Don't be afraid to chime in whenever you think you can help out. Most likely there are people on the forums that know less than you do that you can help out.

Centering the Main Menu in the Twentyten Theme:

By default, the twentyten menu normally floats left. if you want a centered menu, you can change your css style sheet.

[code]

/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
margin: 0 auto;
width: 940px;
display:block;
float:left;
}

[/code]

The above is a segment from the default css in twentyten. You need to take out the "float: left;" and add in "position:absolute; text-align:center;" then add a new line of "#access ul {display:inline-block;}" This will change it to the following:

[code]

/* =Menu
-------------------------------------------------------------- */

#access {
background: #000;
margin: 0 auto;
width: 940px;
display:block;
position:absolute;
text-align:center;
}

#access ul{display:inline-block;}

[/code]

Hope you enjoyed this tip. And remember always: WordPress is for lovers.
-sara

Edit: forgot to add: Make sure you include an IE fix!

put this in its own little ie.css file and conditional comment it into your header. :)

[code]
#access ul{
display:inline;
zoom:1;
}
[/code]

June 28, 2010

Adding Nav Menu Functions to Your Theme in WordPress 3.0

Nav Menu Function for WordPress 3.0 - add to theme

Here is the Admin of my implementation of the Nav Menu Function added to Servants For Haiti

As many of you already know, WordPress has just released their latest version WordPress 3.0. If your site runs on WordPress and you haven't already, Update Your Blog. If you aren't running on WordPress, this is the best time to give it a shot. You will not be disappointed. They have added so many new features and improved old ones, it is truly incredible.

One of the features they have added is the ability to have Navigation Menu function control in the admin panel. No more coding in what pages to exclude in the menu! No more downloading plug-ins to sort the menu for you!

One thing: you have to retro-fit your old themes to allow this function. (and don't forget to code it in to any new theme releases!) Here is how you do it:

1. open to your theme's functions.php
2. add this line of code in there:

add_theme_support( 'menus' );

3. open your theme's header.php (typically where your main menu will be) and replace your previous menu code

which is typically something like:

<?php wp_list_pages($args); ?> 

with:

<?php wp_nav_menu($args); ?>

Check out the codex for the different parameters you can include in your wp_nav_menu( ) here: http://codex.wordpress.org/Function_Reference/wp_nav_menu

newbie note: $args should be empty or filled with parameters from the codex.

June 17, 2010

WordPress TV: Mitcho Erlewine: Abstract Your Code

This is the video from my favorite session from WordCamp San Francisco. Mitcho Erlewine did a wonderful talk on abstracting code that really challenged me to produce better, cleaner, reusable code. Here is the video description:

Mitcho Erlewine discusses avoiding programming disasters by properly abstracting the code you write and how you can make sure to write code both you and others can reuse in the future.

Read my WordCamp San Francisco recap post

- sara cannon

May 27, 2010

Happy 7th Birthday WordPress!

WordPress LogoThe wonderful open source platform that is WordPress was released seven years ago today through the talented Matt Mullenweg. Here is his post in 2003 announcing the release of WordPress to the world. Since then, WP has grown into a widely used and incredible tool for anyone who wants to share ideas, manage content, and much more. In Scott Berkun's "The Future of WordPress" session at WordCamp San Francisco, He said "WordPress is the Platform for Revolution." I totally agree. So many people have been able to find their voice through WordPress, and have been able to form communities of change. Examples of this are:

MidEastYouth - a student-owned independent network that promotes constructive dialogue and understanding within the Middle East and North Africa.
Kloop.info - the largest blog platform in Kyrgyzstan that dared to cover beginning of the recent revolt

Not only has WordPress helped people find their voice and support their causes, but it has been the basis for employment for many people worldwide. This is why it is important to contribute in any way you possibly can to the WordPress community... be it core, plugins, free themes, or volunteering or speaking at a WordCamp.

Thank you WordPress and all of those who have contributed to it. May you thrive and your community grow!
- Sara Cannon

Scott Berkun - WordCamp San Francisco

Scott Berkun at WordCamp San Francisco - "WordPress is the Platform for Revolution"

May 17, 2010

WordCamp San Francisco 2010 Recap

I had the amazing privilege of attending WordCamp San Francisco this year. Having spoken at WordCamp Birmingham and WordCamp Atlanta on WordPress, I was thrilled to go to a WordCamp where I was just there to learn and absorb as much information in as possible.

I really enjoyed the sessions and absolutely loved meeting some of the really awesome people who attended. Personally, I was really challenged as a designer/developer to focus on themeing for future expansion and improvements, international capabilities, and for future sharing in the open source community.

One of the most informative sessions to me was Mitcho's "Abstract Your Code!" here is the description from the WordCamp SF website:

Abstract Your Code!
presented by Michael “mitcho” Erlewine

Writing code isn’t just about getting the job done, it’s about getting the job done right. In addition to being easier to read and maintain, one great advantage to writing properly abstracted code is that it is then easy to open-source it and give back to the WordPress community. Come learn about some best practices for writing portable, modular WordPress code and later open-sourcing that code as a plugin. Learn about the experiences of other programmers who have done client-sponsored open-source WordPress work and the benefits they reaped.

If anyone knows where there are videos or slides of that session.. I'd love to know and share it!

For those of you who were not able to attend, here's Matt Mullenweg's "State of the Word"

I would like to return to this mecca of WordCamp's next year if at all possible. A truly wonderful and challenging conference.

- sara cannon

Sara Cannon is a Design and Digital Strategy Consultant, UX/UI Designer, Creative Director, & Artist.
Have a project I could help you with? Contact me at sara@saracannon.com.

Skip to content