Cordova statusbar for iOS Plugin

Since iOS 7 was released a month or so ago I’ve been completely stumped with fixing my Cordova iOS app that relied on jQueryMobile. I couldn’t find a clean solution to fix the now changed handling of the statusbar in iOS 7. I had come up with some CSS hacks to work around, but was having a hard time getting my fixed headers to cooperate with jQueryMobile.

I finally noticed that a statusbar plugin had been released for Cordova (PhoneGap). I immediately went to the command line and added it to my project!

I did have a little bit of a time figuring out how to make my statusbar behave like an iOS 6 app. It turned out to be much simpler than I was expecting and of course I was over thinking it.

I just had to edit the config.xml file. In my case I set the preference tag “StatusBarOverlaysWebView” true and a custom color for the statusbar in the preference tag “StatusBarBackgroundColor” as well. Then the plugin worked it’s magic!



visitavalonnj.comFinished up one of the cooler projects I’ve had the pleasure to work on a few weeks ago. The site is

I’ve worked with the client in the past and they were looking for a new site to help with the tourism of Avalon, NJ (a very nice place). Working with them is excellent and probably the best overall client relationship I’ve had to date. They know what that want, and present a professional design/concept and I build them a web solution to meet their needs.

In this case they really wanted a site that would be easy for them to maintain and add and edit content on a regular basis. Oh yeah, and they also needed it done before the start of their tourism season (middle of March ideally).

With only a few seconds into the conversation I knew that Drupal would be the perfect match for their needs.

Some modules featured in the creation of this project were:

  • Views – while I use it in every Drupal site I’ve ever worked on, it was heavily used in this project and really helped cut down on development time.
  • Calendar and Date – they needed an events calendar and the Calendar module was great to build upon. They also used dates with other content types and the Date module was a real life saver in these cases too.
  • Media – the client wanted the ability to add images inline view a wysiwyg editor. While still not a perfect solution, the Media module did help us give the client such a ability.
  • Facebook OAuth – they wanted users to have the option to login with their Facebook account instead of having to create a separate account for their site. This module was simple to set up and got the job done.
  • Google weather – this allowed us to easily bring in and display the latest weather in Avalon without too much hassle. Just some minor CSS tweaking was involved to get it done.
  • Social media – a very new module and it’s release was most timely. An excellent way to bring the now common social media button onto a website.
  • Webform – again a well known staple that just gets the job done.
  • Omega Theme – a real lifesaver for building a responsive web design. I highly recommend it as a starter theme for any new site.

The whole building block structure of Drupal really allowed us to deliver some cutting edge features without having to start from scratch. This really saved us a great deal in time and costs ($$$) and allowed me to concentrate more of the really unique aspects of the site.

Most impressive was how well the client has been able to use Drupal to manage the site. Our training simply consisted of a few minutes on a phone call. The admin interface was very intuitive to them and I did make sure to label all content types and fields so that each part was clear to them when it came time for them to manage the site.

Again, this was a pretty impressive project and and absolute treat to work with them again! I’m very impressed with it’s outcome and am very excited to check back with it’s performance in a few months.

Lots of fun.


Make CKEditor match your site’s CSS in Drupal 6

I’ve been converting a pretty big site over to Drupal 6 recently and have been trying to get the CKEditor to very closely appear like the sites CSS styles. By default it was doing an ok job, but not good enough for how the site’s content managers would be working with it.

Through a bit of research I did find an excellent tutorial on the subject. This was a tremendous help and exactly what I was looking to do.

Just a few simple adjustments in the ckeditor.config.js was all it took.

First I just changed the value of:

config.bodyId = '';

Now the majority of my site’s styles were cascading onto the CKEditor. There were still some minor tweaking that needed to be done.

Adding a few lines using:

config.extraCss += "";

and I was all set. Now the CKEditor editor is displaying content almost identically than how it will actually appear on the site.


Developing Hybrid Applications for the iPhone

Developing Hybrid Applications for the iPhonePicked up a copy of Developing Hybrid Applications for the IPhone by Lee S. Barney earlier this week. Had a 33% off coupon at Borders and was itching for something new to read.

Been messing with iPhone development for a bit and since I’m a web developer figured I’d take a hard look at writing web applications for the iPhone vs going the SDK Objective-C route.

I’m really glad I picked this book up. They do an excellent job of reminding me how cool Dashcode is for developing web applications for the iPhone. My only knock on Dashcode in the past was the lack of documentation, but this book does a decent job of covering it. Still wish there was more documentation on Dashcode if anyone is reading this.

The book covers both using the QuickConnect and PhoneGap frameworks for developing hybrid iPhone apps. It’s a fairly easy read and they do cover most of the iPhone functionality that would be used in the majority of projects. While the SDK and Objective-C are still the best way to go, sometimes web applications or hybrid applications do make sense, and that’s where this book was very handy. Just for me to rediscover Dashcode alone justified the purchase.


Incorporating Lightbox 2 effect with WordPress gallery

I wanted my client to be able to add pictures to a gallery using the build in WordPress gallery, but was hoping to customize the display of the gallery thumbs a bit. I was hoping to get it to display as the following:

      use the Lightbox 2 script
      able to override the CSS that is being written to the page

Since the default CSS that the gallery generates is written in the page, overriding the styles was kinda a pain to do in the site’s stylesheet I was using. However I did find that I could edit the default CSS that is being written to the page by the gallery by editing the following file:


Locate the following code and edit as necessary:

	$output = apply_filters('gallery_style', "
		<style type='text/css'>
			#{$selector} {
			#{$selector} .gallery-item {
				float: left;
				text-align: center;
			#{$selector} img {
			#{$selector} .gallery-caption {
				margin-left: 0;
		<!-- see gallery_shortcode() in wp-includes/media.php -->
		<div id='$selector' class='gallery galleryid-{$id}'>");

You can see I’ve removed some styles in this case.

Further edits can be made to the gallery from this file as well. I chose to use a little bit of javascript to attach the rel attribute to my anchors instead of editing the php file. Personally, I’d rather do that so in case a future version of WordPress altered the media.php file it’d be one less thing for me to worry about.

Very basic javascript to add the rel attribute that Lightbox 2 requires to the image anchors:

var galleryDivs = YAHOO.util.Dom.getElementsByClassName('gallery', 'div', 'bd');
for (var i = 0; i < galleryDivs.length; i++) {
    var imageAnchor = galleryDivs[i].getElementsByTagName('a');
    for (j = 0; j < imageAnchor.length; j++) {
        imageAnchor[j].setAttribute('rel', 'lightbox[gallery]');

I use the YUI Dom collection to help me gather nodes.

Then it’s just a matter of calling the relevant dependancy scripts and styles into your page and it should work for you.