I’ve used this approach recently for several sites with dynamic page titles with great success.  That doesn’t mean it still has some limitations. The two biggest in my opinion are the inability to select the replaced text, and the lack of a reliable hover option (so you can change the replaced font color on mouse-over). Another issue that has affected me is the lack of small-caps support. Although it’s slated to be included in a future Cufon version, I hacked together an approach that works now using jQuery and JavaScript regular expressions.

The process is fairly simple – first replace your text with Cufón, then run a regular expression that inserts SPAN tags around the first letter of each word, and then use jQuery to increase the font size of these span’s classes. Simply setting the classes font-size larger in CSS before hand does not work.

Below you can see the three stages of the process that I went through – first I loaded up a headline that uses the CSS small caps attribute – it works but it’s not the font I want. The next headline is Cufon replaced – it looks much better, but I’ve lost the small caps effect. Finally using the hack, I’ve achieved the custom font with small caps.

Un-replaced Text with Small Caps

Replaced Text before Small Caps Hack

Replaced Text with Small Caps

The first step is to load in your various javascript files. You can download cufon and create your own font javascript files at cufon.shoqolate.com.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="PATHTO/cufon-yui.js"></script>
<script type="text/javascript" src="PATHTO/font-file-you-create.js"></script>

Then you can set up the styles you want your headlines to have:

<style type="text/css">
h1 {
	font-family:times,times new roman, serif;
	font-size:20px;
	text-transform:uppercase;
	color:#900;
}
</style>

The next step is to create your headline:

<h1>This is the headline I'm font-replacing</h1>

Finally, use the follow JavaScript to create the effect:

jQuery(document).ready(function($) {
	Cufon.replace('h1');
	var text = $('h1').html();
	$('h1').html(text.replace(/\b([A-Za-z0-9])/g,'<span class="caps">$1</span>'));
	$('.caps').css('font-size',30);
});

This script, which loads when the DOM is ready, first replaces the font, then inserts <span class=”caps”> around the first letter of each word, and finally increases the font size on these first letters from 20px to 30px. You can of course change these font sizes to meet your needs. The particular font I used here, Adobe Garamond Pro, had a slight line-height offset after this JavaScript was run – I fixed this with a style for the ‘caps’ CSS class – you may need something similar for the font you choose

h1 span.caps {
	position:relative;
	top:2px;	
}

I hope someone finds this useful.

In this second post, I’m going to explore the code generated by this functionality, and give a simple demonstration of how to style and animate the generated menus using  CSS and jQuery. You can then use these skills to develop your own WordPress 3.0 theme and its menus.

Here’s a demonstration video of the end result. The menus were created using the WordPress Menu Management functionality and are set to animate down and fade in on mouseover, and utilize CSS3 gradients and rounded corners. Refer back to part I to see how the menus were created initially.

Our first step will be to add styling to the menus. As with the previous post, I am basing these instructions on the default WordPress 3.0 Theme “Twenty Ten.” It’s important to understand all of the pieces of code that come together to draw the menus. For this example, 3 files will come into play.

The first is header.php in the theme’s root directly. This is the file that draws the header part of your pages. In the Twenty Ten theme, it includes a call to wp_nav_menu(). This is the function that queries WordPress for the menu in HTML. It takes several optional parameters, which I won’t get into here – they’re described at http://codex.wordpress.org/Function_Reference/wp_nav_menu if you’d like to explore – they let you change CSS classes, wrapper <DIV>s, etc.

<div id="access">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</div>

Sample output of this function is below. You’ll notice that WordPress draws the menu out using unordered lists. They nest secondary menus in additional <ul> tags. This is a very popular method to organize navigation and is highly customizable with CSS. If you’re unfamiliar with this approach, A List Apart has a very good explanation.

<div id="access">
<div class="menu-header">
<ul id="menu-wordpress-sandbox-menu" class="menu">
	<li id="menu-item-17" class="menu-item"><a href="#">Fruits</a>
		<ul class="sub-menu">
			<li id="menu-item-19" class="menu-item"><a href="#">Oranges</a></li>
			<li id="menu-item-20" class="menu-item"><a href="#">Apples</a></li>
		</ul>
	</li>
	<li id="menu-item-32" class="menu-item"><a href="#">Colors</a>
		<ul class="sub-menu">
			<li id="menu-item-30" class="menu-item"><a href="#">Blue</a></li>
			<li id="menu-item-31" class="menu-item"><a href="#">Red</a></li>
		</ul>
	</li>
	<li id="menu-item-33" class="menu-item"><a href="#">Links</a>
		<ul class="sub-menu">
			<li id="menu-item-34" class="menu-item"><a href="#">Google</a></li>
			<li id="menu-item-35" class="menu-item"><a href="#">Yahoo!</a></li>
		</ul>
	</li>
</ul>
</div>
</div>

Comparing this HTML output to the accompanying sample images and video, you’ll notice the drop-down portion of the navigation is in the nested <UL>s with a CSS class of ’sub-menu’. This is generated automatically by WordPress and this nesting structure is how you can add style and animation. Please note that for this demonstration, the HTML above has been simplified – my links are empty and I have also stripped out many additional class names that WordPress includes automatically for the UL’s and LI’s to make the HTML simpler to read. These classes can be very useful for detailed styling though, so consider reviewing your generated code when you do your implementation.

Now that we know how the menus are drawn in HTML, we can start to style and animate them. As mentioned earlier, my examples work on top of the Twenty Ten default WordPress 3.0 Theme, so I will show code from this theme. This theme has a GNU General Public License so we’re free to modify it and use it near any way we’d like – consider copying it and working on the copied version for your experimentation.

The CSS styles for the Twenty Ten theme are in the file styles.css in the main theme directory. Starting around line 370 of this file (in the RC1 version of WordPress at least), you’ll see a section of the CSS commented ‘Menu’ that starts defining the menu’s styles.

/* =Menu
-------------------------------------------------------------- */
#access {
	background: #000;
	margin: 0 auto;
	width: 940px;
	display:block;
	float:left;
}

Looking through this section of CSS, you’ll see the various styles that set the colors and fonts used in the menus. In my example, I changed the background colors for the nested sub-menu lists. I also added gradients to them (these gradients only work on CSS3 compatible browsers). Specifically I styled “#access ul ul a” like so (the background-image calls set the gradient):

#access ul ul a {
	background:#333;
	height:auto;
	line-height:1em;
	padding:10px;
	width: 160px;
	background-image: -moz-linear-gradient(100% 100% 90deg, #474747, #939393);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#939393), to(#474747));
}

I also added rounded corners to the bottom of each sub-menu. Again this isn’t support on all browsers. To do this I modified “#access ul ul,” adding the following CSS. The extra bottom padding gives room for the rounded corners.

#access ul ul {
	padding-bottom:10px;
	background-color:#474747;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

The key parts of the CSS that tell the menus to appear on mouseover are below:

#access ul ul {
	display:none;
	...
}

and

#access ul li:hover > ul {
	display:block;
}

The first part tells the browser not to initially display the nested menus, but the second says do show them when the parent item is moused-over. To get our animation working, we’re going to comment out the “display:block” CSS – we’re going to instead control the display menu event with JavaScript.

#access ul li:hover > ul {
	/*display:block;*/
}

The simplest way to do this is with the help of a JavaScript library like jQuery. WordPress already comes with jQuery so we need to load it in using the wp_enqueue_script function. The enqueue function is the safe way to add JavaScripts to WordPress to safeguard against various conflicts. We’re also going to load in a second JavaScript file we’re about to create called navigation.js.

Open up the header.php file and add

<?php 
 
wp_enqueue_script('jquery');
wp_enqueue_script('unitzNav', get_bloginfo('template_directory')."/navigation.js");
 
?>

to the HEAD section of the document. We’re now loading up the jQuery library automatically for use with every page. Now it’s time to create the navigation.js file we referenced earlier – create this file in the same directory as the rest of the theme files.

If you’re unfamiliar with the power of jQuery there are ample tutorials and discussions online. In a nutshell, jQuery makes once complicated JavaScript tasks very simple, that work in just about every browser. We’re going to be using a simple effect for our menu animation but, many jQuery menu plugins and navigation techniques are available that you can use as well. Here and here are resources to explore many such techniques.

Put the following in your navigation.js file:

jQuery(document).ready(function($) {
	//initial the menus
	$("ul.menu li").mouseover(function() {
		$(this).find("ul.sub-menu").animate({"height": "show", "opacity": "show"}, 800, "swing");
 
		$(this).hover(function() {}, function(){
			$(this).find("ul.sub-menu").animate({"height": "hide", "opacity": "hide"}, "slow");
		});
	});
});

Believe it or not, this short section of code is all it takes to get the drop down menu animation working across most browsers with jQuery. The outer wrapper is a jQuery function call that runs when the page is finished loading. It then tells the browser to animate open the instance of ul class=”sub-menu” whenever a parent list item is moused over. Then, using the hover function, it tells the browser to animate closed this same menu when either the parent item or menu is moused out.

On the jQuery website you can read more about this syntax and the available function parameters – many types of animations and effects can be used here.

This simple approach does have limitations – specifically, although the Twenty Ten theme and WordPress’s menu manager support more than two levels of navigation, this jQuery implementation does not and will break the lower menus. However, considering the relatively simple modifications, the effect is quite effective.

Thanks for taking the time to read these posts – I hope it gets you excited for the power of WordPress 3.0’s menu management and gets your thinking about ways to style and animate your own menus.

To follow along, you’ll need to download WordPress 3.o. You can visit the WordPress development blog to find a link to the latest Beta, and soon version 3.0 will be released officially. WordPress.org provides excellent installation documentation if you need help installing.

What is it?

WordPress has come a long way since starting as purely a blogging platform. Thanks to its open framework, it has been modified through plug-ins to be a powerful content management system (CMS). Developers started using WordPress to drive entire sites full of content – not just blogs.  However, to do so required tricks and kludges to work properly. WordPress 3.0 makes the process much easier and truly makes WordPress a viable CMS platform.

Simple Menus Controlled Through WordPress

WordPress has allowed users to create two different types of content – posts and pages. Posts are the blog posts themselves, generated over time. Pages, which are created through a similar interface, were meant to hold static content. All WordPress installations start with a single About Us “page” that the blogger can use to describe themselves. Developers have utilized these “pages” to create entire sites and used WordPress as a CMS so end users could edit content themselves. These developers used to have to manually create the navigation structure though, digging deep into the code, in order to create links to all of the pages they created. With WordPress 3.0, regular users can now not only create pages but also organize and arrange them into menus through the Menus sections’ simple drag and drop interface.

How do you use it?

This post assumes that you’re using the default WordPress 3.0 Theme, called Twenty Ten, which has support for the menu manager built in. My next post in this series will explain how to modify the theme and change the display of the menu.

To explore the Menus feature,  start by creating a few sample pages in your fresh WordPress 3.0 installation. In my visual examples I have created a few pages named after fruits and colors. If you need help learning how to use the WordPress interface to create pages, WordPress.org has excellent documentation.

The Menus page in WordPress 3.0

Once your pages are created, click on the menus link in the left column of the administration area, under the “Appearance” heading. Please note that users need appropriate permissions to access this link. Two new columns of options appear to the right.

The left column allows you to choose the type of link you want to add to your menu. There are three types of menu items you can add:

• Custom Links allow you to add menu items that link to external web pages. Enter the page’s address in the URL box and the name you want to use in the label box. In my visual examples I have used this section to add links to Google and Yahoo!
• Pages is where you add menu items that link to the WordPress pages you have created – in my examples the colors and fruits pages are available to me.
• Categories is the final option, and if you have created categories of blog posts, pages that list all posts in that category appear here.

Select the check boxes next to the pages you want and click add to your menu. Add a few custom links if you’d like as well. These items will now all appear in the right column in a vertical list. The Twenty Ten theme draws the menus horizontally, so you need to visualize the appearance of the items left to right instead of top to bottom.

Organizing Menu Items in WordPress 3.0

Now click and drag the items in the right column – you will notice that you can arrange them and adjust them left and right. The order you arrange them in is the order in which they appear. The adjustments you make left and right determine their hierarchy in the site. The leftmost items are your primary navigation. Items nested one notch to the right are the secondary navigation of their parent, and so on. In the Twenty Ten theme, the primary navigation items appear at all times at the top of the page, and when you mouse over them the secondary navigation menus appear. The third tier menus and so on appear to the right of their parent items when the parent is moused over.

WordPress generates standard XHTML lists for the menus, which a WordPress template developer can then use to style your navigation menus any way you choose. Check back for part two of this series to see an example of how these menus can be modified visually.

Who will use it?

Although this functionality doesn’t seem particularly groundbreaking, it makes the process of adding pages and organizing content vastly simpler than before. Prior to WordPress 3.0 adding pages and updating navigation menus almost always required a phone call to the developer, which meant additional costs and lost turnaround time. Now website owners of nearly all technical skill levels can easily keep their sites updated and organized, without delay and without sacrificing the look and feel of the navigation.

View a demonstration of the functionality below – I first show the menu with 3 items – then I nest one menu under another through a simple drag and drop and reload the page to show the change.

In my next post, I will discuss the code that the Menus function generates, and show you how to add animation and style changes to it. Thanks for reading!

Does this scenario sound familiar? It’s sometimes hard to believe, but given the rapid speed of Internet growth, the cutting edge technology that companies worked so hard to implement just a few years ago is now outdated and insufficient.  I’ve been working with many companies that are coming to this realization, and an unfortunate trend has appeared. These companies, sadly are completely determined to keep using their 3rd party vendors and service providers.

Services and vendor offerings I am referring to include web hosting, email, e-commerce and payment systems, surveys, content management systems and video and photo services.  Reasons that companies don’t want to change vendors vary – they don’t want to make the effort required to change, they feel entrenched, they’re nervous of possible ramifications, etc.  Although these can sometimes be valid reasons, more often than not this short-sightedness ends up being more expensive, provides customers a sub-par user experience and limits the company in serveral other ways. Read on to learn why.

1. Cost
   Cost is the most straightforward reason to consider a vendor switch. In the last five years, the number of internet service vendors has exploded – which has driven down overall costs. More products are based on open standards and existing frameworks and more are sold as a service and hosted in the cloud. Contrast this to what it took to install something like a shopping cart several years ago – then it was proprietary and customized – at a high cost. Often clients are still paying monthly fees for these outdated services – and drastically overpaying at that. Now they can consider new options and opportunities that improve what they offer their customers, at a much lower cost over the life of the website.
2. Ease of Implementation
   Companies remember the hassles and time required to add that shopping cart or add that video to their site years ago and are hesitant to go through the same ordeal again. The small vendors they selected from limited options years ago took forever to respond and had poor documentation.  However, much has changed – many current providers are bigger with much larger customer bases. They’ve greatly improved the implementation process, with excellent documentation and sample code and robust APIs that give more flexibility for implementations. There are many customers that share sample code and have documented their implementations. Forums and responsive users abound to discuss and help in using the products. Current vendors offer more services that are easier to add and maintain than before, at a reasonable cost.
3. More Available Options
   Today’s established vendors have a more dedicated focus and larger teams working to support their products. They are working to make their products as useful as possible and offer many new features and options. These new features make your website more useful to your own customers.
4. Better Customer Support
   Along with some of the reasons these products are easier to implement is the improved customer support – the vendors are larger or more specialized and have knowledgeable dedicated staff to help your company use their products. And through forums and development websites, more customers are active in the discussions as well – making it much easier to implement the products than in the past.
5. Growth Opportunities
   Finally, the way the product will grow and improve is important to consider. Many of the vendors that have been around for many years have all but given up on keeping their products current. Reasons vary – perhaps their customer base is small and the product isn’t worth upgrading. Perhaps the vendors don’t have the right staff to keep the product current. If your vendor’s offering is the same now as it was five years ago – chances are they aren’t looking for ways to improve their product and your business – switching to a dedicated vendor will better ensure that your website will grow with more and better functionality in the future.

With these reasons in hand, consider your current vendors and if they’re really meeting your needs. If you’re not sure, start researching their competition. Check the services provided and pricing. You may be surprised at what’s possible out of the box now, and how reasonably it can be priced. Good resources, aside from just Googling, include TechCrunch and Mashable.

Let me know your thoughts. Have you found a new vendor that drastically improved your website?

Holiday Lights Display

As the holidays fast approach, millions of us are pulling decorations out of the attic, grabbing extension cords and untangling the lights. Last weekend I set up the tree, put lights outside, and put candle lights in each of my windows. It certainly looked nice and festive, but I quickly dreaded having to plug and unplug each set of lights every day.

Fortunately, I had a solution! Using X10 automation modules, my windows computer and about 30 minutes of effort, my lights now turn on and off automatically every day!  This post details the steps I took to accomplish this, and provides some resources so you can set up a similar solution yourself.

The X10 automation system is technology that send signals across your home wiring, to turn on and off lights and devices you plug in to power outlets. To get up and running yourself, you’ll need a starter X10 kit – I recommend the Firecracker Kit.

X10 Firecracker Kit

Be forewarned – the x10.com store is notorious for popup ads and gaudy design. Despite this, their products are quite reputable. Also please note that most of the items mentioned in this post are available on eBay for a fraction of the cost. The Firecracker kit has four items – a transceiver which receives the on/off signals and sends them through the house wiring (and can turn on/off an item plugged into it), a lamp module which can turn lights plugged into it on and off when it receives a signal sent by the transceiver, and a computer interface and remote control – both of which send the on/off signals to the transceiver. You can purchase any additional lamp outlets you may need on eBay inexpensively as well.

The x10 transceiver lets you select a letter from A-P via a simple dial.  This is the ‘house code’ for that transceiver. Each of your lamp modules then let you pick both a house code and unit number from 2 to 16 (the transceiver itself is unit 1). Each combination of house and unit numbers must be unique. So to get started, set your transceiver to house code A, plug a set of Christmas lights into it, and plug it into the wall. Then take your lamp module, set it to house code A and unit number 2, and also plug lights into it and plug it into the wall. You’re ready to turn these on and off using the included remote control! Set your remote to house code A, and then hit the unit 1 and unit 2 on buttons – voila! the lights turn on. With more lamp modules you can set all the lights you want to control throughout your house this way, as long as the unit numbers are all unique.

After setting this up, you could just stop here. You can now turn off all of the lights with the push of a few buttons – much simpler than walking all over the house twice every day! But I wanted the lights to turn on and off completely automatically. To accomplish this, I utilized the fourth item that came with the Firecracker kit – the computer interface, called the CM17A. This tiny little item plugs into your computer’s serial port and sends the same signals that the remote control sends, only you can configure your computer to send the signals automatically. The following explanation is done on a computer running Windows 7, but the same steps can be accomplished on other versions of Windows, though the steps may look a bit different.

X10 Command Line Example

X10.com offers software packages for a fee that allow you to set up complicated macros – this was overkill for me as I just needed to send on and off signals once a day. I used a very simple command line tool created by Adam Davis instead. Once you have the CM17A plugged into your computer, visit his website and download the CM17A.zip file. Create a c:\cm17a\ directory and unzip the files there. Then start up the ‘Command Prompt’ under the accessories section of the start menu.

Type ‘CD C:\cm17a\’ into the command prompt, as illustrated in the screen shot. The cm17a program is in this directory and is called with two or more parameters. The first is the COM port number of your actual cm17a device on your computer. The second parameter is the device you want to control. If you want to turn the lights plugged into the lamp module you set as house code A, unit 2, the parameter is ‘a2on,’ and to turn it off, it is ‘a2off.’ You can string multiple commands in a row, separated by spaces, so if your cm17a device was on COM port 2, and you want to turn lamp modules a2, a3 and a4 on, you would type ‘cm17a 2 a2on a3on a4on’ into the command prompt and press enter. All three sets of lights should now turn on. By the way, if you don’t know the COM port of your device, it is likely 1,2,3 or 4, so you can type a few sample commands varying the code to see which one works.

X10 Batch Script Example

Okay cool, so now we have a way to control the lights via our computer, now what? The next step is to load up notepad – we have to create a very simple batch script. This simply means we type the command that you’d use through the command prompt into a file that we can run automatically later. Follow the screen shots to see how to type the command and how to save the file – its important to select save as file type ‘any file’ and save the file with .bat at the end. Otherwise it will append .txt to the end and this won’t work.

Save as a .bat file in Notepad

After you created a lightson.bat, now do the same process again, changing the on’s in the file to off, and save it as lightsoff.bat.

The final step is to tell windows to run these batch scripts automatically. This is done using the windows ‘Task Scheduler, which is in Start -> Accessories -> System Tools. When the task scheduler is up and running, select Action -> Create Basic Task. We’re going to create two of these, one to turn the lights on, and one to turn the lights off. Name and describe the task any way you’d like. Under Trigger, select daily, and then pick the time you want the lights to turn on. Under action, select Start a Program, and then browse to C:\cm17a\ and selected the lightson.bat script that you created. Also, under the ‘Start In’ box, type in ‘c:\cm17a\.’  Once you’ve finished the lights on task, do the same thing to create a lights off task, which runs at a different time and calls the lightsoff.bat program instead. Optionally you can refine the tasks further by editing their properties, telling the computer to turn itself on if it’s in sleep mode to run the task, along with other options.

This was the last step! Now your Holiday lights will turn themselves on and off each day without you having to lift another finger. Happy holidays from Unitz!

Additional Notes and Tips:

The bigger your house or your lighting needs, the more complex this setup can become. The following are a few additional tips that might help.

• Your whole house isn’t necessarily on the same wiring circuit. This means that some light modules might not respond to transceiver signals. There are a few solutions here. X10 offers hardware to bridge your circuits, but this requires opened up your power panel. A simpler solution is to just buy an additional transceiver and set it to another house code – then set the light modules on this circuit to the new house code.
• To avoid buying lots of lamp modules, you can use extension cords and power strips to turn on multiple lights with one receiver – make you’re only using low wattage lights though.
• Newer computers don’t always have serial ports. Fortunately for just a few dollars on eBay you can buy Serial to USB converters, which solve this problem.
• The wireless range of CM17A might not be wide enough to reach your transceiver(s). You can purchase serial extension cables (or in a USBextension if using a USB to serial adapter.)
• Obviously this solution can be used for many more uses aside from Christmas lights.
• If you want to do more complex actions, or involve other X10 products like video cameras, they do offer software that has more control.
• X10 lamp modules do not currently work well with compact fluorescent bulbs.
• This same approach can be used with other operating systems. In Linux it can be done with bash scripts and cron jobs – the following explains how to control the CM17a in Linux.
• If you only want to control some devices automatically, you can still use the remote control to power other devices.
• http://www.iopus.com/guides/winscheduler.htm has additional examples of how to schedule tasks in windows.

Reese provides step-by-step instructions to configure his plugin for a Git version control repository, but although his plugin supports Subversion, no walkthrough was available for an SVN scenario. Configuring the SVN plugin correctly took some trial and error, so I decided to document the process for others who want to get Mantis and SVN to play nicely.

Prerequisites

• MantisBT 1.2.0
  • As of this post, the latest development version is 1.2.0rc2
• Mantis Source Integration plugin
  • This post refers to development snapshot version Fri, 2 Oct 2009 10:50:07
• Subversion command-line binaries
  • The binaries must be available on the web server where MantisBT is installed
• A Subversion repository
  • It’s not necessary for the repository itself to reside on the web server where MantisBT is installed
• WebSVN, a web front-end for Subversion respositories
  • It’s not necessary for WebSVN to reside on the web server where MantisBT is installed or the server where your Subversion repository resides
  • WebSVN should be configured to access the Subversion repository you’ll integrate with Mantis

Technically, WebSVN is optional: the Source Integration plugin will pull in your Subversion history using the command-line binaries alone. However, without WebSVN, links to browse the repository and view files or diffs from within MantisBT won’t work.

Source Integration Plugin Setup

Follow John Reese’s instructions through Step 4.  You should now have the plugin installed in your MantisBT environment:

Next, click on the Subversion / WebSVN Integration link to access the configuration for the SVN plugin:

Fill in the location where the SVN command-line binaries reside on the web server.  In the example above, my SVN binary is /usr/local/bin/svn.  Be sure to only enter the directory portion of the path.  Beware: if you enter the path incorrectly, the form will not return an error message.

Proceed with Steps 5 through 7 in Reese’s instructions, selecting WebSVN as the repository type.  When you reach Step 8, the repository settings screen will look like this:

The settings are a little ambiguous at first: we’re creating a WebSVN repository, so does the URL field refer to the WebSVN address or the URL to the SVN repository itself?  The WebSVN URL field calls for a trailing slash, but what about the WebSVN Path?

Beta software being what it is, the instructions will surely improve as the software evolves.  For now, here are some additional guidelines to clarify the usage of each field shown above.

• Name
  • A title of your choosing that will be used to describe this repository in the Mantis repositories list.
• URL
  • The full Subversion (not WebSVN) repository URL
  • In the example above, the repository resides at svn://svnserver/myproject/subdir
• SVN Username
  • A valid username for accessing the SVN repository you entered in the URL field
• SVN Password
  • The corresponding password for the username you entered
• WebSVN URL
  • The base URL of your WebSVN installation: that is, the WebSVN landing page where you select from a list of repositories to browse
  • In the example above, the WebSVN landing page is located at http://svnserver/websvn/
• WebSVN Name
  • The name you entered in your WebSVN settings to describe the SVN repository
  • In the example above, the WebSVN repository name is myproject
  • Keep in mind that WebSVN names are not necessarily related to the SVN repository URL.  Check your WebSVN config file (or compare with the repository list on the WebSVN landing page) to make sure you are using the appropriate spelling and capitalization here.
• WebSVN Path
  • This is the path to the Subversion repository, relative to the top-level folder in your WebSVN repository
  • In the example above, we have a WebSVN repository named myproject which is configured in our WebSVN settings to point to the Subversion URL svn://svnserver/myproject
  • Since we want this MantisBT repository to point to svn://svnserver/myproject/subdir (one level deeper), the WebSVN path, relative to the WebSVN top-level path, is /subdir/
  • In my testing, it was necessary to include both leading and trailing slashes in the WebSVN Path field
• Standard Repository
  • Check this box if you use the conventional Subversion folder structure. In other words, the Subversion repository URL you entered should have subfolders named trunk, branches and tags, respectively.
• Trunk Path/Branch Path/Tag Path
  • If you didn’t check the Standard Repository box, and if you use a different folder layout for your trunk/branches/tags folders, enter the paths here.
  • I assume that these paths are relative to the Subversion URL.  However, I haven’t tested these settings and some trial and error may be needed.
• Ignore Other Paths
  • If you didn’t check the Standard Repository box, and if you  entered your custom trunk/branches/tags folder paths in the previous fields, you can tell Mantis to ignore any other paths under the Subversion repository URL by checking this box.

When you’re finished, click the Update Repository button and proceed with the remaining instructions.

Thanks to John Reese and the other plugin contributors for a useful add-on.

I had the opportunity to tackle this shortcoming for a recent project and you can find a copy of my script below, followed by an explanation of the approach I used. With this script, you’ll be able to set your own color scheme for an embedded Google Calendar. To illustrate, here are some screenshots showing “before” (on the left) and “after” (on the right):

Of course, you can use this script to make your embedded calendar appear any color you like.

Requirements

• PHP 4.3.0 or later
• Support for one of the following JSON libraries:
  • PECL JSON extension (built in to PHP 5.2.0 and higher) or
  • PEAR::Services_JSON package
• Support for one of the following http methods:
  • cURL extension or
  • allow_url_fopen configuration option

Check your phpinfo screen to see if your server meets the requirements — or, if you’re feeling lucky, just cross your fingers and run the script.

Installation and Usage

1. Create your Google Calendar and embed the calendar on your web site using your preferred size and settings. Make sure it appears correctly with the default Google Calendar “skin”.

2. Download the wrapper script (version 2010-05-16) as a ZIP file

3. Unzip the archive to extract the script itself, gcalendar-wrapper.php

4. Edit gcalendar-wrapper.php in a text editor, such as Notepad

5. Customize the following lines at the top of the script according to your needs:

23
24
25
26
27
28
29
30

/**
 * Set your color scheme below
 */
$calColorBgDark      = '#c3d9ff';	// dark background color
$calColorTextOnDark  = '#000000';	// text appearing on top of dark bg color
$calColorBgLight     = '#e8eef7';	// light background color
$calColorTextOnLight = '#000000';	// text appearing on top of light bg color
$calColorBgToday     = '#ffffcc';	// background color for "today" box

You can use a tool like the one at html-color-codes.info to pick your HTML color codes.

6. Upload gcalendar-wrapper.php to your web server

7. On the pages where you display an embedded Google Calendar, change the calendar embedding code to point to gcalendar-wrapper.php instead of http://www.google.com/calendar/embed (or the equivalent URL if you’re using Google Apps for Domains).  For example, if your embedding code currently looks like this:

<iframe src="http://www.google.com/calendar/embed?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

edit the HTML to look like this instead:

<iframe src="gcalendar-wrapper.php?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

8. Browse to your page to test out your customized calendar! If you still see the standard Google Calendar appearance, make sure to clear your browser’s cache and try again.

Limitations

To keep things simple, this script reduces the Google Calendar color scheme to just 5 different colors, even though Google’s original stylesheet uses more shades. In addition, images within the interface (such as the month previous/next arrows and Print icon) can’t be customized and will still appear in their original color (blue).

After creating this solution, I came across a similar skinning effort called MyGoogleCal4 RESTYLEgc that allows more fine-grained control over the calendar appearance.  It takes more legwork to create your own theme, but anyone interested in replacing the calendar graphics or making advanced stylesheet changes should definitely give it a look.

Technical Details

The gcalendar-wrapper.php script works by downloading the embedded Google Calendar source code from Google’s server, modifying CSS styles and JavaScript on the fly, then outputting the customized calendar code to the user’s browser. The Google Calendar embedding code contains a JSON-encoded data structure with information about the calendar events plus external links to a JavaScript library and CSS stylesheet located elsewhere on Google’s servers. For simplicity, this script just inserts new CSS and JavaScript directly into the main embedding code to override the relevant parts of those external files.

To change the color scheme, I started by scraping the stock Google Calendar stylesheet and identifying the minimal set of styles needed to apply new colors. New style rules are generated dynamically based on the color scheme settings to save the hassle of repeatedly copying and pasting color codes in several places. These custom styles are then inserted at the end of the HEAD section of the embedding code with priority set to override the original styles.

Google Calendar’s code makes use of relative links and file references that get thrown off when routed through the wrapper script, so it’s also necessary to make a change to the base URL within the JSON data structure that holds calendar event data. The JSON string first has to be spliced out using a regular expression and converted to a PHP data structure we can manipulate, then serialized back into a JSON string to replace the original data.

Keep in Mind…

The calendar customization script is closely tied to Google Calendar’s underlying stylesheets and JavaScript code.  When Google launches a new version of Google Calendar (as they’ve done in the past when launching new features) this script may need to be updated to reflect Google’s changes.  When that happens, your embedded calendars may revert to the standard Google Calendar appearance or may even show an error message.  Don’t forget to check up on your calendars periodically so you’ll know if Google has made any major changes.  I’ll make an effort to post an updated wrapper script whenever I see that Google has revised its code.

Feel free to respond in the comments below with questions or suggestions. I hope you find the script useful!