Tutorials

08

Mar
2012

In

By Mike

How to Calm a (Newborn) Baby

On 08, Mar 2012 | No Comments | In | By Mike

Following my big news, I wanted to write a tutorial that will *hopefully* be of some use, if not mild entertainment, for first-time parents. If you’ve just been crowned diaper-duty-dad (or mom), congratulations on your rite of passage. What follows now are endless nights of sleep deprivation — YAY! — if you have a high-need or colic baby. So, how do you regain some sanity among your first few weeks of all-nighters? You watch two videos on YouTube! First, here’s a good video of what your baby is trying to tell you when he/she cries (skip to 3:23 to get to the gist of the video).

Recap:

All babies up to three months of age have the same cries. If you can decipher the slight variances between each cry and respond to your baby’s needs, then this should help you out tremendously. Below is the list of cries and their definitions.

Neh – I’m hungry = Feed me
Heh – I’m experiencing discomfort = Change me, try a different position/scenery
Owh - I’m sleepy = Put me to sleep (pacifier/swaddle/singing/etc.)
Eairh – I have lower gas = Burp me, bend my legs toward my stomach to push out a fart
Eh – I have gas = Burp me

Next up, here’s a video showing you how to calm your baby using five techniques, which include swaddling, side/stomach position, shushing, swinging (and jiggling) and sucking (skip to 2:45 to hear about the 5S’s).

Recap:

There are five ways to calm a baby. They are…

swaddling – wrapping your baby in a large cloth to pin down his/her arms and legs so he/she won’t fidget and get him/herself riled up again
side/stomach position – laying your baby on its side (you can also try the stomach/football hold position) temporarily until he/she has calmed down
shushing – making a loud continuous shush noise (pretend you want to quite some annoying person at a movie theater)
swinging (and jiggling) – not to be confused with shaking, this involves a gentle yet continuous swing motion or tiny jiggles, whichever your baby prefers
sucking – give your baby a pacifier he/she will like (they come in different shapes and age-appropriate sizes just like diapers, so be sure to use one your baby will like) or try your pinky

Here’s the caveat for both… these techniques will work for up to three months. You can still try them, but rest assured your baby will outgrow them eventually. Then again, after three months, your little one’s (LO’s) tummy should be big enough to retain more milk, which will keep him/her happier longer. Alright newbie parents, class is over… good luck!

Tags | baby, newborn, parenthood

23

Aug
2011

34 Comments

In

By Mike

How to Create a High Resolution Vector-based QR Code for Print Production

On 23, Aug 2011 | 34 Comments | In | By Mike

If you want high-resolution QR Codes for your print material, you’ll be out of luck (for now). Search for any QR Code generator and you’ll only be presented with a range of sizes from small to unusable. Just try to imagine how pixelated a QR code image that’s about the size of your palm on your monitor resized to fit on a large poster or banner. Not pretty. Unfortunately, since there aren’t any vector-based QR Code generators out there right now, we’ll have to do it the screenshot/live trace/live paint way, using Adobe Illustrator. So, off we go…

Step 1: Create your QR Code using an online QR Code Generator

Googling “qr code generator” yields several sites, so I’m just going to pick the first one by Kaywa (http://qrcode.kaywa.com/ … yes, they do say it’s for non-commercial use only, but *we’ll take that into consideration for the time being*). For this example, let’s do something simple like a web address to your landing page or website.

Step 2: Take a screenshot of your QR Code

Since you can’t “Save the image” like you can do most images online (you’ll find yourself saving a php file instead), you’ll have to use your favorite image editor to take a screenshot (Prnt Scrn button on your keyboard) of the generated image. I prefer Adobe Photoshop, since you’ll be able to this on top on the next step, which is…

Step 3: Crop your QR Code image

You don’t have to be incredibly precise to do this, but avoid cutting off any black parts. Once you’ve got it isolated, go ahead and save it as a GIF (2 colors). The result should look something like this:

Step 4: Import your GIF into Adobe Illustrator

First, create a new print document in Illustrator. Next, import the image into your new document. I typically do this by dragging and dropping the actual image file into the new document itself.

Step 5: Create a Live Trace of your QR Code

Step 5 and Step 6 showcase my two most favorite capabilities in Illustrator. Creating a Live Trace is similar to the old school days of laying some semi-transparent paper over your favorite drawing and then tracing it. This is the same concept, but it’s a gazillion times quicker. Below the main menu bar in Illustrator, you’ll see a few buttons including one labeled Live Trace. Next to that button, there’s a little arrow button, which displays more options when pressed. Go ahead and press that little arrow button to display the options dialog for Live Trace.

Next, it’s important to change at least the Threshold, Resample and some Trace Settings in the Tracing Options box. Give the QR Code the lowest Threshold, since it’s just a Black and White image without feathered edges — while we’re at, you can start out with the Black and White mode. Increasing the value in Resample will trace it more accurate, so give it the highest level possible. In the second Trace Settings column, make sure to check Strokes and Fills. You can also play around with the stroke weight/length, area and angle and check the Preview box to see if you can get an even more accurate trace, but I’ve found the default values in the screenshot below to work fine.

Finally, be sure to select Outlines with Tracing from the Vector drop-down menu at the very bottom of the Tracing Options panel.

Step 6: Colorize your isolated QR Code

After you’ve gone through the Live Trace step, you’ll want to fill in the QR Code with your desired color using Live Paint, which is the button located in the same area as Live Trace.

Once you’ve clicked it, you should see several selected anchor points for your QR Code. While it’s still selected, you can use your swatches to change the color of the code to your heart’s content. The beauty of it is that the QR Code is isolated, meaning that it’s transparent. That also means you don’t have to stick to the boring black and white version. You can go as wild as dark green and pasty Pantone yellow, as long as you have a good contrast between the two colors (you’ll have to create a square box behind it with a solid color to achieve the different color combinations).

What you do from here out is up to you. You can drag’n'drop it into your InDesign file or Photoshop it from there. You can also save it as an eps file and hand it over to your printing company to add it to your new collateral. Above all, you can resize it to accommodate a billboard if you wanted to, since it’s a vector-based QR Code.

Tags | design, print, qr code

23

Mar
2011

40 Comments

In

By Mike

How to customize BuddyPress admin bar

On 23, Mar 2011 | 40 Comments | In | By Mike

When I re-designed AvenueK9.com, I didn’t want to have the default BuddyPress admin bar displayed like the one below.

And when WordPress 3.1 shipped out with the its own admin bar (below), I didn’t want that either!

Both are very useful, but when your only focus is to design something that doesn’t look so out-of-the-box, in terms of BuddyPress and/or WordPress designs, you’ll inevitably find yourself writing writing some custom code snippets. In my case, to de-clutter all whatever-bars, I started from scratch and hard-coded my own navigation. The neat thing is, since my current Avenue K9 BuddyPress theme is a child theme off of the Default BP theme, WP and BP upgrades are still a breeze. I don’t anticipate the actual navigation items changing either, so these following set of mods have worked out for me thus far.

Before I dive straight into the what and how, let me just say this: The following is not an official guide for how to customize the BuddyPress Admin Bar much like my previous how-to BuddyPress post. In fact, I scoured the BP forums on how to do exactly this, so if the php code isn’t quite kosher, feel free to only use whatever information you feel applies to you.

Let’s start. Here’s a picture of what we’re about to do…

As you can see, I’m also running Paul Gibbs’ Achievement plugin on my dog site, so you can see how an unlocked Achievement notice would look like in action.

Step 1: De-cluttering the WP/BP bars

To remove the default BuddyPress Admin bar, open up your wp-config.php file and add this line near the Multi-Site lines..

define ( 'BP_DISABLE_ADMIN_BAR', true );

To remove the WordPress 3.1 admin bar, add the following line to your functions.php file…

<?php add_filter( 'show_admin_bar', '__return_false' ) ?>

If your theme does not have a functions.php file, launch Notepad, create a file called functions.txt, upload it to your server, change the extension from .txt to .php and copy/paste the line above.

Step 2: Create a new BuddyPress function to initialize your custom BP admin menu

Create a new php file labeled bp-functions.php and upload it into your theme folder; this is in addition to your functions.php file — they are two separate files.

Next, copy/paste the code below into the bp-functions.php file:

< ?php function my_bp_adminbar_notifications_menu() {
	global $bp;

	if ( !is_user_logged_in() )
		return false;

	echo '

loggedin_user->domain . ‘”>’; _e( ‘Notifications’, ‘buddypress’ ); if ( $notifications = bp_core_get_notifications_for_user( $bp->loggedin_user->id ) ) { ?> < ?php } echo ‘‘; echo ‘
<a href=”loggedin_user->domain ?>”>

	< ?php
	}

	echo '

';
	echo '';
}
?>

Step 3: Add custom BP admin navigation items to your theme

This step will most likely take place in your theme’s header.php file, unless you’ve got some seriously tricked-out version of your theme. For the AvenueK9.com site, I used the following code:

My K9 Account
< ?php function my_bp_adminbar_notifications_menu() { global $bp; if ( !is_user_logged_in() ) return false; echo ‘
< ?php } echo ‘

‘; echo ‘

';
	}
	?>

<a href=”settings/”>Settings
<a id=”logout” href=”">

Notice that the line below (second nav item from the top) links to the directory for the Achievements plugin. You do not need this line, if you don’t want to display it or if you’re not running the plugin on your site.

<li><a href="<?php echo bp_loggedin_user_domain() ?>achievements/">My Achievements</a></li>

Step 4: Applying CSS to your Custom BP admin navigation

This step is all up to you and how you want to display your nav items. I decided to stick with the multi-dropdown navigation but you could as easily also display it as a horizontal bar (like an older version of the official BuddyPress.org site had it, if you were lucky enough to see it!). There are a thousand different ways to style this, so suffice to say that I won’t go over this step in detail. Just style away!

Step 5: Hiding custom BP admin navigation for logged out users (optional)

If you even want to go a step further with your BP mods, you can do the same thing I did at my dog site — hiding the buddypress admin menu for logged out users like so…

This actually serves two purposes: Not only will logged out users not see a bunch of useless nav items (they won’t work if you’re not registered), but replacing “My Account” with “Become a K9ner” actually utilizes this space to register new users. Obviously, the call to action could be something completely different and doesn’t even need to point to your registration page, but if you’ve already dedicated some real estate to the BP admin menu, you might as well use it efficiently.

Here’s how:

I’ve actually created a new nav item and placed it above the custom BP admin code like so (bold)…

<ul id="signup"> <li><a href="http://avenuek9.com/signup/">Become a K9ner</a></li> </ul>
<ul id="navk9">
<li><a href="#">My K9 Account</a>
<ul>

Since the Default BP theme ships with body classes, I can control which navigation is displayed or hidden using the body class .logged-in like so…

body.logged-in ul#signup{display: none}
body.logged-in ul#navk9{display: block}

So if you’re logged in, this css will hide the Become a K9ner link and display the customized My Account nav instead.

That’s it!

If you’ve previously customized your navigation menus on your BP site, you can easily copy over all your css rules and apply them to your newly-created admin navigation. Cheers!

Tags | admin bars, BuddyPress, custom menu, how-tos

08

Jul
2010

32 Comments

In

By Mike

How to add a Custom Menu into your BuddyPress theme (WordPress 3.0)

On 08, Jul 2010 | 32 Comments | In | By Mike

Please note: By adding using a Custom Menu in your BP theme, you will have to re-create all the links (ie. Activity/Forum/Blog/etc.)! Before you begin, make sure you are running the latest BuddyPress / WordPress versions and that everything works properly. PLUS, keep a backup of everything just in case something goes south.

This tutorial will explain how to add a basic Custom Menu into your existing BuddyPress theme a la WordPress TwentyTen (see functioning custom menu at http://2010dev.wordpress.com/). I’d rate the difficulty for this as average with an estimated time of completion at around 20-30 minutes if you’re good at copy/pasting. Below is a screenshot of what we’re about to accomplish:

We’ll start by registering the Custom Menus function in the functions.php file. This step is almost identical to adding sidebars into your theme.

Open up functions.php in your existing theme folder and add the following code (I pasted this right after my last sidebar):

if ( function_exists( 'register_nav_menus' ) ) {

	register_nav_menus( array(
		'primary' => __( 'Primary Navigation'),
	) );
}

If you don’t have a functions.php file in your BuddyPress theme folder, do not copy it over from the Default BP theme, as this may break your theme. Instead, create a new functions.php file and upload it into your theme folder with the following code:

< ?php if ( function_exists( 'register_nav_menus' ) ) { 	register_nav_menus( array( 		'primary' => __( 'Primary Navigation'),
	) );
}
?>

Next, we’ll want to initialize the Custom Menu in your site’s navigation, so we’ll have to edit the theme’s header.php file. If your BP theme doesn’t have a header file, go ahead and copy it over from the BP Default theme, located in plugins >> buddypress >> bp-themes >> bp-default >> header.php

Open your header.php file and replace this code…

class=”selected”< ?php endif; ?>> ” href=”/< ?php echo BP_ACTIVITY_SLUG ?>/&phpMyAdmin=ArnvRH-YBGopVGsI37%2Czbv5xdx8″>< ?php _e( ‘Activity’, ‘buddypress’ ) ?>

< ?php endif; ?>

class=”selected”< ?php endif; ?>> ” href=”/< ?php echo BP_GROUPS_SLUG ?>/&phpMyAdmin=ArnvRH-YBGopVGsI37%2Czbv5xdx8″>< ?php _e( ‘Groups’, ‘buddypress’ ) ?>

< ?php if ( bp_is_active( ‘forums’ ) && ( function_exists( ‘bp_forums_is_installed_correctly’ ) && !(int) bp_get_option( ‘bp-disable-forum-directory’ ) ) && bp_forums_is_installed_correctly() ) : ?>

class=”selected”< ?php endif; ?>> ” href=”/< ?php echo BP_BLOGS_SLUG ?>/&phpMyAdmin=ArnvRH-YBGopVGsI37%2Czbv5xdx8″>< ?php _e( ‘Blogs’, ‘buddypress’ ) ?>

< ?php endif; ?> < ?php wp_list_pages( ‘title_li=&depth=1&exclude=’ . bp_dtheme_page_on_front() ); ?> < ?php do_action( ‘bp_nav_items’ ); ?>

with:

< ?php wp_nav_menu( array( ‘menu_class’ => ‘menu-header’ ) ); ?>

You can pass a lot more parameters as listed at http://codex.wordpress.org/Function_Reference/wp_nav_menu but since we’re keeping it simple, this will do for now.

At this point, you should be able to see Menus in your Dashboard under Appearance >> Menus. Create your custom menu, give it a name and press Save (I labeled mine Main Nav). Then, under Menus, go to Theme Locations >> Primary Navigation >> Main Nav and press Save.

Finally, copy over the CSS for the menu (#access) section of the TwentyTen theme into your BP theme’s stylesheet, style.css.

#access {
	background: #000;
	margin: 0 auto;
	width: 960px;
	display:block;
	float:left;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float:left;
	position: relative;
}
#access a {
	display:block;
	text-decoration:none;
	color:#aaa;
	padding:0 10px;
	line-height:38px;
}
#access ul ul {
	display:none;
	position:absolute;
	top:38px;
	left:0;
	float:left;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left:100%;
	top:0;
}
#access ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	padding:10px;
	width: 160px;
}
#access li:hover > a,
#access ul ul :hover > a {
	color:#fff;
	background:#333;
}
#access ul li:hover > ul {
	display:block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
}

* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color:#fff;
}

You may have to tweak your CSS as necessary. In my case, I adjusted the #access width, the #header height and the #container margins. This process will be the same for most BP themes.

To add your BP links back into your custom menu, use the Custom Links option under Appearance >> Menus as pictured.

Below is a quick overview for your old BP links. Just replace the yourdomain part with your actual domain name. All other existing pages should be listed under Pages within your Menus section. As a reference, here’s what your linking structure should look like.

Activity: http://yourdomain.com/activity/
Members: http://yourdomain.com/members/
Groups: http://yourdomain.com/groups/
Forums: http://yourdomain.com/forums/

*** BuddyPass Members can download the sample Blackstar Custom Menu-enabled theme in the Download Center under the Miscellaneous section. Enjoy =) ***

To learn more about Custom Menus, visit the WordPress codex at
http://codex.wordpress.org/Appearance_Menus_SubPanel

Tags | BuddyPress, theming

19

Feb
2010

19 Comments

In

By Mike

How to display Activity Stream in BuddyPress

On 19, Feb 2010 | 19 Comments | In | By Mike

First, be sure that you’ve got both WP/WPMU and BuddyPress installed properly. Then, to display the Activity news feed on the homepage of your BuddyPress installation, go into the Dashboard, then Settings and click on the Reading sub-menu link. Once there, select Activity Stream from the dropdown menu for the Front page display settings and make sure you have A static page selected. Press the Save Changes button and see your changes.

If you want your BuddyPress blog to be on on a page named News, for example, go to the Dashboard, then Pages and click on the Add New sub-menu link. Give the page a name by entering a title and then press the Publish button. Then, go to Settings then Reading and select your News page from the drop-down menu for Post page. Press the Save Changes button and see your changes.

Tags | BuddyPress, theming

08

How to Calm a (Newborn) Baby

23

How to Create a High Resolution Vector-based QR Code for Print Production

Step 1: Create your QR Code using an online QR Code Generator

Step 2: Take a screenshot of your QR Code

Step 3: Crop your QR Code image

Step 4: Import your GIF into Adobe Illustrator

Step 5: Create a Live Trace of your QR Code

Step 6: Colorize your isolated QR Code

23

How to customize BuddyPress admin bar

Step 1: De-cluttering the WP/BP bars

Step 2: Create a new BuddyPress function to initialize your custom BP admin menu

Step 3: Add custom BP admin navigation items to your theme

Step 4: Applying CSS to your Custom BP admin navigation

Step 5: Hiding custom BP admin navigation for logged out users (optional)

That’s it!

08

How to add a Custom Menu into your BuddyPress theme (WordPress 3.0)

19

How to display Activity Stream in BuddyPress

About Michael Kuhlmann

Recent Comments

Bloggity

Archives

Topics

Recent Comments

Tweets

Topics of Interest