<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Toolbox Digital Services &#187; Development</title>
	<atom:link href="http://toolboxdigital.com/tag/development/feed/" rel="self" type="application/rss+xml" />
	<link>http://toolboxdigital.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Thu, 05 Aug 2010 09:15:28 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Disabling Google Analytics for front-end Administrators in Joomla</title>
		<link>http://toolboxdigital.com/2010/03/disabling-google-analytics-for-front-end-administrators-in-joomla/</link>
		<comments>http://toolboxdigital.com/2010/03/disabling-google-analytics-for-front-end-administrators-in-joomla/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 10:26:29 +0000</pubDate>
		<dc:creator>Dan Luton</dc:creator>
				<category><![CDATA[Joomla]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://toolboxdigital.com/?p=610</guid>
		<description><![CDATA[A good question, raised by Jack Bremer, prompted the writing of this brief post in case it&#8217;s of use to somebody else at some point (including myself).  The GA ...]]></description>
			<content:encoded><![CDATA[<p>A good question, raised by <a href="https://twitter.com/jackbremer/status/10015777644">Jack Bremer</a>, prompted the writing of this brief post in case it&#8217;s of use to somebody else at some point (including myself).  The GA plugin in WordPress has this option, which is great for larger sites with loads of front-end admins all working on the site &#8211; you don&#8217;t want to be diluting your Analytics with all that noise.</p>
<p>So, how can the same be acheived in Joomla? Well, quite easily actually.  Read on to find out how&#8230;</p>
<span id="more-610"></span>
<p>
<img src="http://toolboxdigital.com/wp-content/uploads/2010/03/ga-shot.jpg" alt="Google Analytics" title="Google Analytics" width="774" height="280" class="alignnone size-full wp-image-627" />
</p>
<h3>Modify the Template</h3>
<p>For this to work we will need to make a simple logic change in the site&#8217;s template index.php file, which you can find in template/your_template directory of your site.  First we&#8217;ll need to get the $user variable loaded into the template, so, near the top, add the following line of PHP:</p>
<pre class="brush:php">
$user =&#038; JFactory::getUser();
</pre>
<p>This will load an array of variables into $user that we can use to determine who&#8217;s currently logged-on to the front-end of your website.  The particular value we&#8217;re looking for is the User ID, contained in $user->gid (the current user&#8217;s Group ID) &#8211; this value is zero (false) if a guest is browsing the site, but will be a specific figure depending on which group they are assigned to when logged-on.</p>
<h3>Add the logic code</h3>
<p>Next step is to locate your GA tracking code, which should be right at the bottom of your index.php file, just before the </body> tag.  We need to wrap this in some PHP test code to selectively load the tracking script based on the outcome of our condition, so first locate your tracking code which will look like this:</p>
<pre class="brush:javascript">
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12345678");
pageTracker._trackPageview();
} catch(err) {}</script>
</pre>
<p>Then add the PHP test to selectively load the scripts, which looks like this:</p>
<pre class="brush:php">
&lt;?php if (!$user->gid == 25) : ?>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12345678");
pageTracker._trackPageview();
} catch(err) {}</script>

&lt;?php endif; ?>
</pre>
<p>This example above will disable the GA tracking code only for Super Administrators logged-on to the front end.  You can add your own test conditions depending on your requirements, by using the list below as a reference for the group to test:</p>
<ul class="chev">
<li>18 &#8211; Registered</li>
<li>19 &#8211; Author</li>
<li>20 &#8211; Editor</li>
<li>21 &#8211; Publisher</li>
<li>23 &#8211; Manager</li>
<li>24 &#8211; Administrator</li>
<li>25 &#8211; Super Administrator</li>
</ul>
<br />
<p><strong>Disable tracking for anyone who isn&#8217;t a guest user (not logged-on):</strong></p>
<pre class="brush:php">
if (!$user) :
</pre>
<p><strong>Disable tracking for all back-end users:</strong></p>
<pre class="brush:php">
if (!$user == 23 || !$user == 24 || !$user == 25) :
</pre>
<p><strong>Disable tracking for all registered users:</strong></p>
<pre class="brush:php">
if (!$user == 18) :
</pre>
<p>I&#8217;m sure you get the gist!</p>
<p><strong>Got a better idea or know of a plugin that can do this for you?  Please share it in the comments, we&#8217;d love to hear your ideas!</strong></p>]]></content:encoded>
			<wfw:commentRss>http://toolboxdigital.com/2010/03/disabling-google-analytics-for-front-end-administrators-in-joomla/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Advanced Techniques: The Joomla Parent Menu ItemID</title>
		<link>http://toolboxdigital.com/2010/03/advanced-techniques-the-joomla-parent-menu-itemid/</link>
		<comments>http://toolboxdigital.com/2010/03/advanced-techniques-the-joomla-parent-menu-itemid/#comments</comments>
		<pubDate>Wed, 03 Mar 2010 22:50:56 +0000</pubDate>
		<dc:creator>Dan Luton</dc:creator>
				<category><![CDATA[Joomla]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://toolboxdigital.com/?p=411</guid>
		<description><![CDATA[Joomla&#8217;s ItemID system offers a great way of customizing sites by giving the opportunity to style major parts of a template or page based on the menu links ItemID.  ...]]></description>
			<content:encoded><![CDATA[<p>Joomla&#8217;s ItemID system offers a great way of customizing sites by giving the opportunity to style major parts of a template or page based on the menu links ItemID.  Every menu link in a Joomla website has one; and they are unique to each and every link on your site.</p>
<p>But what if you need to style entire sections of a site based on a handful of top-level (parent) menu items?</p>
<p>This article explores the methodology of styling sub-level pages respective of their common parent menu links.</p>
<span id="more-411"></span>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/menusystem.jpg" alt="menusystem" title="menusystem" width="774" height="283" class="alignnone size-full wp-image-487" /></p>
<h3>Method 1: Modifying the mod_breadcrumb Module Code</h3>
<p>The mod_breadcrumb module is native to Joomla, and by it&#8217;s core function maintains a trail of menu link hierarchy leading to the current page.  This code can be utilized in order to obtain the top-level menu&#8217;s textual name (rather than an itemID number).  This method expands the code further to reformat this text into a usable, readable format which can be used to style a page in an understandable way.  It&#8217;s more code-heavy than method 2, but provides an easier-to-understand output that works in exactly the same way.</p>
<p>Let&#8217;s first examine the original code:</p>
<pre class="brush:php">
defined('_JEXEC') or die('Restricted access');

class modBreadCrumbsHelper
{
	function getList(&#038;$params)
	{
		global $mainframe;

		// Get the PathWay object from the application
		$pathway =&#038; $mainframe->getPathway();
		$items   = $pathway->getPathWay();

		$count = count($items);
		for ($i = 0; $i &lt; $count; $i ++)
		{
			$items[$i]->name = stripslashes(htmlspecialchars($items[$i]->name));
			$items[$i]->link = JRoute::_($items[$i]->link);
		}

		if ($params->get('showHome', 1))
		{
			$item = new stdClass();
			$item->name = $params->get('homeText', JText::_('Home'));
			$item->link = JURI::base();
			array_unshift($items, $item);
		}

		return $items;
	}
	
	function setSeparator($custom = null)
	{
		global $mainframe;

		$lang =&#038; JFactory::getLanguage();

		if ($custom == null) {
			if($lang->isRTL()){
				$_separator = JHTML::_('image.site', 'arrow_rtl.png');
			}
			else{
				$_separator = JHTML::_('image.site', 'arrow.png');
			}
		} else {
			$_separator = $custom;
		}
		return $_separator;
	}
}
</pre>
<p>We can immediately remove the second part of the code that sets the separator, since we don&#8217;t need that.  Also, since we only need to return the parent item&#8217;s text, we don&#8217;t need the loop in place.  We shall also use the <em>Application Object</em> since <strong><br />$global mainframe</strong> will be removed in Joomla 1.6, so:</p>
<pre class="brush:php">
$global mainframe; 
</pre>
<p>Becomes:</p>
<pre class="brush:php">
$app = &#038;JFactory::getApplication();
</pre>
<p>Which gives us the completed code below:</p>
<pre class="brush:php">
class getParentMenuTitle {
	function getList() {
		$getParent = &#038;JFactory::getApplication();
		// Get the PathWay object
		$pathway =&#038; $getParent->getPathway();
		$items = $pathway->getPathWay();
	return $items;
	}
}
$list = getParentMenuTitle::getList();
$count = count($list);
if ($count !== 0) :
	$parentmenu = $list[0]->name;
	$parentmenu = ereg_replace(" ", "-", $parentmenu); // replace spaces with a dash
	$parentmenu = ereg_replace("[^+A-Za-z0-9-]", "", $parentmenu); // strip special characters
	$parentmenu = strtolower($parentmenu); //set name to lowercase
else :
	$parentmenu = "home"; // Set parentmenu to "home" if there are no items
endif;
</pre>
<h3>How To Use The Code</h3>
<p>This block of code can be inserted directly into your active template&#8217;s <strong>index.php</strong> file before the HTML is started.  Remember to enclose the code block in PHP tags.  Alternatively you can include it from an external file.</p>
<p>Once working in the template, you can apply the variable <strong>$parentmenu</strong> to a top-level container to initiate a CSS hook.  Where you add this will depend on what you need to influence in the design, but the further up the hierarchy the more things you will be able to affect in the design &#8211; for example:</p>
<pre class="brush:php">
&lt;body id="&lt;?php echo $parentmenu; ?>">
</pre>
<p>&#8230;will allow you to influence the design across the whole template, such as:</p>
<pre class="brush:css">
body#menu-link-name a {color:red;}
</pre>
<p>&#8230;which will change all links on the page to red for that particular top-level menu link.</p>
<h3>Method 2: Using the Jsite Object</h3>
<p>This method is by far the simplist of the two methods, and unless you need a more human-readable format for the menu class/ids then it&#8217;s by far the recommended method of the two.  It uses the Jsite object to obtain the parent menu&#8217;s ItemID and stores it in a variable which can then be applied to any class/id in the template:</p>
<pre class="brush:php">
$parentmenu = JSite::getMenu()->getActive()->tree[0];
</pre>
<p>You can obtain the ItemID of any menu links in the pathway by altering the value of <strong>tree[0]</strong>.</p>
<h3>How To Use The Code</h3>
<p>Again, this code needs to be inserted into the template.  The ItemID is stored in the <strong>$parentmenu</strong> variable, just as it was before, so you can use a similar method to above &#8211; but prefix the class/id with something or else you may have problems, for example:</p>
<pre class="brush:php">
&lt;body id="menuID-&lt;?php echo $parentmenu; ?>">
</pre>
<h3>Why Would You Need To Use Method 1?</h3>
<p>The first method could be useful in instances where you (as the developer) might want to pass more control onto someone who is less technically-minded &#8211; the class/id names which are generated using this method are very easy to predict, whereas method 2 requires the administrator to lookup the itemID for each menu item that requires styling.</p>
<h3>Something to Share?</h3>
<p>Have an alternative technique, or have you used this (or something similar) on a site before?  Please do share it in the comments.</p>
<span class="small">Many thanks to <a href="http://joomline.org/">Gergő Erdősi</a> and <a href="http://www.alltogetherasawhole.org">Amy Stephen</a> for the code presented in method 2 above. 
]]></content:encoded>
			<wfw:commentRss>http://toolboxdigital.com/2010/03/advanced-techniques-the-joomla-parent-menu-itemid/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Ten Useful Mac Apps For Web Development</title>
		<link>http://toolboxdigital.com/2010/01/ten-useful-mac-apps-for-web-development/</link>
		<comments>http://toolboxdigital.com/2010/01/ten-useful-mac-apps-for-web-development/#comments</comments>
		<pubDate>Wed, 27 Jan 2010 14:46:21 +0000</pubDate>
		<dc:creator>Dan Luton</dc:creator>
				<category><![CDATA[Apple]]></category>
		<category><![CDATA[Miscellaneous]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[mac]]></category>

		<guid isPermaLink="false">http://toolboxdigital.com/?p=490</guid>
		<description><![CDATA[We&#8217;ve compiled a list of our most used development-centric applications for Mac, from coding to design tools &#8211; here are our ten favourites!
Panic Coda
Web: panic.com/coda &#124; License: Commercial, $99

All the ...]]></description>
			<content:encoded><![CDATA[<p>We&#8217;ve compiled a list of our most used development-centric applications for Mac, from coding to design tools &#8211; here are our ten favourites!</p><span id="more-490"></span>
<h3>Panic Coda</h3>
<p>Web: <strong><a href="http://panic.com/coda">panic.com/coda</a></strong> | License: <strong>Commercial, $99</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/coda-ss.jpg" alt="Coda" title="coda-ss" width="774" height="431" class="noborder" /></p>
<p>All the coding tools you could need in one place, including syntax-highlighted editing of all major code-types such as PHP, CSS, HTML, Ruby, Javascript, XML and more.  I particularly love the excellent Site Manager which stores all of your sites in one place and provide easy access for direct, live editing of the site code using FTP, and the clips manager that serves as a snippets repository for reusable code.</p>

<h3>Filezilla</h3>
<p>Web: <a href="http://filezilla-project.org/"><strong>filezilla-project.org</strong></a> | License: <strong>Free</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/filezilla-ss.jpg" alt="filezilla" title="filezilla-ss" width="774" height="431" class="noborder" /></p>
<p>Simple to use and packed with great features &#8211; one of the best free FTP clients out there.</p>

<h3>Adobe Fireworks</h3>
<p>Web: <a href="http://www.adobe.com/products/fireworks/"><strong>www.adobe.com/products/fireworks</strong></a> | License: <strong>Commercial, ~$299</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/fireworks-ss.jpg" alt="fireworks" title="fireworks-ss" width="774" height="437" class="alignnone size-full wp-image-499" /></p>
<p>Easy to use graphics editor with the best support for PNGs for web use.  Build rapid designs and slice them up ready to build into a template.  Fireworks can also handle (most) Photoshop PSDs with ease, so it&#8217;s particularly useful if you work with designers who prefer to work in Photoshop.</p>

<h3>VMware Fusion</h3>
<p>Web: <a href="http://www.vmware.com/products/fusion/"><strong>www.vmware.com/products/fusion</strong></a> | License: <strong>Commercial, $79.99</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/vmware-ss.jpg" alt="vmware fusion" title="vmware-ss" width="774" height="435" class="alignnone size-full wp-image-500" /></p>
<p>Set-up multiple operating systems which can be run in OS X without needing to reboot.  Essential for effective cross-browser testing.</p>

<h3>MAMP</h3>
<p>Web: <a href="http://www.mamp.info"><strong>www.mamp.info</strong></a> | License: <strong>Free (Pro version: £39)</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/mamp-ss.jpg" alt="mamp" title="mamp-ss" width="491" height="394" class="noborder" /></p>
<p>Localhost server environment to enable fast, live development &#8211; provides a one-click server running Apache, PHP and MySQL.</p>

<h3>Quicksilver</h3>
<p>Web: <a href="http://docs.blacktree.com/quicksilver/quicksilver"><strong>docs.blacktree.com/quicksilver/quicksilver</strong></a> | License: <strong>Free</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/quicksilver-ss.jpg" alt="quicksilver" title="quicksilver-ss" width="268" height="109" class="noborder" /></p>
<p>Quickly access all of your applications at the touch of a button &#8211; no more searching around in your Apps folder!</p>

<h3>Apple Time Machine</h3>
<p>Web: <a href="http://www.apple.com/macosx/what-is-macosx/time-machine.html"><strong>www.apple.com/macosx/what-is-macosx/time-machine.html</strong></a> | License: <strong>Free (ships with Mac OS X)</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/timemachine-ss.jpg" alt="time machine" title="timemachine-ss" width="774" height="484" class="alignnone size-full wp-image-504" /></p>
<p>The perfect incremental backup solution &#8211; and best of all, ships with OS X and is seamlessly integrated.  Just add an external disk drive!</p>

<h3>Betterzip</h3>
<p>Web: <a href="http://macitbetter.com/"><strong>macitbetter.com</strong></a> | License: <strong>Shareware, $19.95</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/betterzip-ss.jpg" alt="betterzip" title="betterzip-ss" width="774" height="281" class="noborder" /></p>
<p>Brilliant archive utility offering a variety of formats and and easy-to-use interface.</p>

<h3>Skype</h3>
<p>Web: <a href="http://www.skype.com"><strong>www.skype.com</strong></a> | License: <strong>Free</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/skype.jpg" alt="skype" title="skype" width="400" height="183" class="noborder" /></p>
<p>Communicate with worldwide clients for free, or add a real phone number without needing a physical phone line.</p>

<h3>Process</h3>
<p>Web: <a href="http://www.jumsoft.com/process/"><strong>www.jumsoft.com/process</strong></a> | License: <strong>Shareware, $39</strong></p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/process-ss.jpg" alt="process" title="process-ss" width="653" height="382" class="alignnone size-full wp-image-507" /></p>
<p>Useful task-list and project tracking.</p>]]></content:encoded>
			<wfw:commentRss>http://toolboxdigital.com/2010/01/ten-useful-mac-apps-for-web-development/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Advanced Techniques: Mass Settings Changes In Joomla!</title>
		<link>http://toolboxdigital.com/2010/01/advanced-techniques-mass-settings-changes-in-joomla/</link>
		<comments>http://toolboxdigital.com/2010/01/advanced-techniques-mass-settings-changes-in-joomla/#comments</comments>
		<pubDate>Wed, 20 Jan 2010 10:21:08 +0000</pubDate>
		<dc:creator>Dan Luton</dc:creator>
				<category><![CDATA[Joomla]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[MySQL]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://toolboxdigital.com/?p=461</guid>
		<description><![CDATA[Ever need to do a bulk settings change to an established site in Joomla?  Perhaps you forgot to make the changes are you were building the site.  This ...]]></description>
			<content:encoded><![CDATA[<p>Ever need to do a bulk settings change to an established site in Joomla?  Perhaps you forgot to make the changes are you were building the site.  This article describes how you can perform mass settings changes in Joomla using a simple MySQL query.</p>
<span id="more-461"></span>
<p>We recently worked on a development which already had a complex hierarchy of menu links set-up on the system (approx. 200 links), but realised later in the development that the &#8220;SSL Enabled&#8221; flag in the menu settings needed to be set to the &#8220;Off&#8221; setting in order to force the majority of the site to run in non-SSL mode:</p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/ssl-off.jpg" alt="ssl-off" title="ssl-off" width="596" height="289" class="noborder" /></p>
<p>The obvious solution is to go through each menu item one at a time at set this manually &#8211; but there&#8217;s a risk that some may be missed, and of course, the time it would take to do this to 200+ links would be considerable.</p>
<p>So, instead, we set about using simple find &#038; replace commands, we can run a query directly on the database to do this for us in one step.  The query we will be using has this structure:</p>
<p><strong>NOTE: Please ensure you make a full backup of your database before proceeding &#8211; if there&#8217;s a problem, you will easily be able to restore the database and try again.</strong></p>
<p>update <strong>TABLE_NAME</strong> set <strong>FIELD_NAME</strong> = replace(<strong>FIELD_NAME</strong>, &#8217;string to find&#8217;, &#8216;new string&#8217;)<p>
<p>Use a program such as <a href="http://http://www.phpmyadmin.net" target="_blank">PHPMyAdmin</a> to easily make edits to your database.  Most hosting providers give easy access to this via your hosting control panel &#8211; this will allow you to find the table/field names and run the query easily.</p>
<p>So, in our case, it&#8217;s fairly obvious we&#8217;ll find the setting we need to adjust in the <strong>jos_menu</strong> table, so, browse the table, then click the edit icon to open up the contents of one of the rows:</p>
<p><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/phpmyadmin.jpg" alt="phpmyadmin" title="phpmyadmin" width="774" height="739" class="noborder" /></p>
<p>You&#8217;ll see I&#8217;ve indicated the bit we need to change on the image above &#8211; it&#8217;s in the field named <strong>params</strong>.  So, we now know the name of the table, and the field that we need to modify.  The text to search for (in this case) will be &#8220;secure=0&#8243; (so, any menu SSL settings that are set to &#8220;ignore&#8221;), and the setting we need to change to (like on the diagram) is &#8220;secure=-1&#8243; (&#8221;Off).  If you&#8217;re in any doubt as to the setting that&#8217;s needed, just change it in Joomla and view the string in PHPMyAdmin.</p>
<p>This now allows us to construct the final query that we will run on the database:</p>
<pre class="brush:sql">
update jos_menu set params = replace(params, 'secure=0', 'secure=-1')
</pre>
<p>Simple, isn&#8217;t it?</p>
<p>To run the query, simply click the &#8220;SQL&#8221; tab in PHPMyAdmin, paste your query into the box, and click go.  Once it&#8217;s run successfully, log into the Joomla administrator and check that everything was changed as expected.</p>

]]></content:encoded>
			<wfw:commentRss>http://toolboxdigital.com/2010/01/advanced-techniques-mass-settings-changes-in-joomla/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Anatomy of a Newsletter</title>
		<link>http://toolboxdigital.com/2010/01/anatomy-of-a-newsletter/</link>
		<comments>http://toolboxdigital.com/2010/01/anatomy-of-a-newsletter/#comments</comments>
		<pubDate>Mon, 04 Jan 2010 11:12:59 +0000</pubDate>
		<dc:creator>Dan Luton</dc:creator>
				<category><![CDATA[Miscellaneous]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Newsletters]]></category>

		<guid isPermaLink="false">http://toolboxdigital.com/?p=418</guid>
		<description><![CDATA[We&#8217;ve recently been tasked with designing and building a bunch of newsletters for different sites.  Newsletter crafting can be pretty straightforward but cumbersome at times due to the way ...]]></description>
			<content:encoded><![CDATA[<p>We&#8217;ve recently been tasked with designing and building a bunch of newsletters for different sites.  Newsletter crafting can be pretty straightforward but cumbersome at times due to the way they must be constructed in order to retain the original designs &#8211; even more so if the designs are quite complex and laden with images.</p>
<p>This article describes the basics for turning your newsletter designs into functional newsletters.</p>
<span id="more-418"></span>
<h3>Getting Started</h3>
<p>First off, work from a design so you know how the final construction will look.  This can be a full-blown Photoshop mock-up, or a wireframe&#8230;however you make it, just make sure it&#8217;s designed as you&#8217;d like the final newsletter to appear.</p>
<p>Once your design is ready, you will need to create the framework of the newsletter, using HTML tables and a combination of carefully defined table-cells. You can save some time here by using a visual (WYSIWYG) editor such as Dreamweaver to visually create the layout; this will save a significant amount of time over hand-coding the table layout.  In fact, you can use a visual editor to create the whole thing &#8211; but I personally prefer to see exactly what&#8217;s going on, so tend to hand-code once the basic structure is defined.</p>
<img src="http://toolboxdigital.com/wp-content/uploads/2010/01/table-layout.jpg" alt="table-layout" title="table-layout" width="774" height="619" class="noborder" />
<p>Note that the table I&#8217;ve used here is quite narrow (600px) and centered &#8211; you can use your own dimensions and alignment here, but this arrangement seems to work best for most email clients and display resolutions.</p>
<p>I&#8217;ve also left the border active (<strong>border=&quot;1&quot;</strong>) which will help when I add content to the layout.  You can disable this later if you do not wish the borders to be displayed in the final newsletter.</p>
<h3>Adding Content</h3>
<p>Once you have your basic structure in place, you&#8217;re ready to start adding content (text and images) to the newsletter.  For now, don&#8217;t worry about the styling; just add the bulk of the text and any images you have to the layout.</p>
<p>If you don&#8217;t have final images, use exact-sized placeholders until the graphics are ready.  This will help to get the layout exactly right, and show where any fine adjustments to the table layout is needed.</p>
<p>Images should be added using the absolute path to the server where they are stored:</p>
<pre class="brush:html">
&lt;img src="http://mydomain.com/images/header.jpg" alt="" />
</pre>
<p>&#8230;this will ensure the images load correctly into the document.  Note that many email clients will require user approval before they fully display embedded images &#8211; it is not possible to override this.</p>
<h3>Adding the Style</h3>
<p>This is where most of the time is consumed &#8211; actually adding the inline CSS to the layout in order to get the look to match the design you&#8217;ve made.  Inline styling offers the best and most widely compatible method to add styling to the newsletter.  If you&#8217;re comfortable with hand-coding the styles, this is the best way &#8211; but of course you can always use a visual editor&#8230;just keep an eye on the way the styling is added to the document &#8211; some editors (such as Dreamweaver) may define styles in a stylesheet format which won&#8217;t work for the newsletter.</p>
<p>The styles must be applied to each and every element that needs to be altered from the default.  You can of course apply a global style to the whole container (the main table definition) to set a standard font size/colour/style to start you off:</p>
<pre class="brush:html">
&lt;table width='600px' border='1' cellspacing='0' cellpadding='5' align='center' style='font-family: Georgia, 'Times New Roman', Serif; color: #222222; font-size: 13px>
</pre>
<p>This will give you your text style for any text that does not have it&#8217;s own definition.  Much of the styling information will be applied to things like headers and links:</p>
<pre class="brush:html">
&lt;h2 style="font-size:18px; font-weight:bold; color:#FF3300">Here's My Title&lt;/h3>
&lt;p>Check out the following link:&lt;/p>
&lt;a href="http://www.mylink.com" style="color:#3F84BA; text-decoration:underline">My Link&lt;/a>
</pre>
<p>It is necessary to add all styling information in this way.  You should also refrain from using shorthand CSS as some email clients will ignore this method of styling, such as:</p>
<pre class="brush:html">
&lt;p style="font: bold 14px/120% Arial,Sans-Serif">This is my paragraph.&lt;/p>
</pre>
<h3>Viewing the Newsletter in Other Formats</h3>
<p>If your mass-mail system supports a plain-text version of the newsletter, you should take the time to create this alongside your HTML version so that users who cannot view mail in HTML format can still read the email.</p>
<p>If this is not practical or possible, provide a link to the HTML document on your server at the top of the email, this way readers who cannot properly view the newsletter will at least have the option to view the newsletter in their browser, which has a good chance of being rendered as you intended it.</p>
<a href="http://www.wickwarbrewing.co.uk/eflyer/december09e60a95f3f443e37f5a47210d9b340a05.html" target="_blank"><img src="http://toolboxdigital.com/wp-content/uploads/2010/01/newsletter-example.jpg" alt="newsletter-example" title="newsletter-example" width="774" height="619" class="alignnone size-full wp-image-441" /></a>
<span class="caption">The finished example (click to view the actual document in your browser)</span>]]></content:encoded>
			<wfw:commentRss>http://toolboxdigital.com/2010/01/anatomy-of-a-newsletter/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Calling all Joomla! Developers&#8230;</title>
		<link>http://toolboxdigital.com/2009/10/calling-all-joomla-developers/</link>
		<comments>http://toolboxdigital.com/2009/10/calling-all-joomla-developers/#comments</comments>
		<pubDate>Fri, 30 Oct 2009 14:37:16 +0000</pubDate>
		<dc:creator>Dan Luton</dc:creator>
				<category><![CDATA[Joomla]]></category>
		<category><![CDATA[Community]]></category>
		<category><![CDATA[Development]]></category>

		<guid isPermaLink="false">http://toolboxdigital.com/?p=403</guid>
		<description><![CDATA[The undisputed queen of Joomla, Amy Stephen, has set up a new Ning social community group especially for Joomla! professionals and developers. In just over a month it&#8217;s amassed over ...]]></description>
			<content:encoded><![CDATA[<p>The undisputed queen of <a href="http://www.joomla.org">Joomla</a>, <a href="http://twitter.com/amystephen">Amy Stephen</a>, has set up a new <strong>Ning</strong> social community group especially for<strong> Joomla! professionals and developers</strong>. In just over a month it&#8217;s amassed over 400 members and is growing rapidly.</p><span id="more-403"></span>
 
<p><img src="http://toolboxdigital.com/wp-content/uploads/2009/10/ataaw.jpg" alt="AllTogetherAsAWhole" title="AllTogetherAsAWhole" width="774" height="312" class="alignnone size-full wp-image-405" /></p>

<p><strong>&#8220;We are an UNOFFICIAL Joomla! Developer and Site Builder Network for collaboration and involvement. This is a professionals network, please use the Joomla! Forums for support.&#8221;</strong></p>

<p>The site already has the support and involvement from some of the top minds in the Joomlasphere, so is the place to be if you have something to offer or are involved with Joomla development in some way.</p>

<p>Sign up for your free account over at <a href="http://www.alltogetherasawhole.org/">AllTogetherAsAWhole</a> and be sure to <a href="http://www.alltogetherasawhole.org/profile/DanLuton">connect with us</a>. See you there!</p>]]></content:encoded>
			<wfw:commentRss>http://toolboxdigital.com/2009/10/calling-all-joomla-developers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hiding your WordPress development site on a live server</title>
		<link>http://toolboxdigital.com/2009/09/hiding-your-wordpress-development-site-on-a-live-server/</link>
		<comments>http://toolboxdigital.com/2009/09/hiding-your-wordpress-development-site-on-a-live-server/#comments</comments>
		<pubDate>Wed, 23 Sep 2009 13:48:43 +0000</pubDate>
		<dc:creator>Dan Luton</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://toolboxdigital.com/?p=49</guid>
		<description><![CDATA[I recently wanted to develop a WordPress site on a live web server, in the root of the server, using the final domain name &#8211; however, I didn&#8217;t want the ...]]></description>
			<content:encoded><![CDATA[<p>I recently wanted to develop a WordPress site on a live web server, in the root of the server, using the final domain name &#8211; however, I didn&#8217;t want the public to be able to view the work in progress site.  This article will show you how this can be achieved with ease!</p><span id="more-49"></span>

<p>What I would normally do in this situation is add an index.html file to the site root, then the following code into .htaccess to ensure the HTML file takes priority over WP&#8217;s PHP version of the same file:</p>

<pre class="brush:plain">
DirectoryIndex index.html index.php
</pre>

<p>However, this won&#8217;t work with WordPress; it rewrites the URL to the domain root (as specified in the WP Settings panel), leaving me with access to my HTML holding page only.</p>

<p>So I set about a different technique.  How about only allowing access to the WordPress files to my IP, and displaying the traditional HTML if the IP does not match?  Well, that&#8217;s what I did.</p>

<p>By adding a simple snippet of code to the WordPress template, you can deny access to the WP site to everyone except you (or, to be more specific, your IP address).  The code looks like this:</p>
<pre class="brush:php">
&lt;?php $ip=$_SERVER['REMOTE_ADDR'];
if ($ip !== "111.222.333.444") : ?>
    &lt;!-- HTML holding page code -->
&lt;?php else : ?>
    &lt;!-- WordPress template code -->
&lt;?php endif; ?></pre>

<p>Since my WP site used a static page for the landing page, this code needed to be inserted into my page.php template file.  If you&#8217;re showing posts on your landing page, add the code to the index.php template.</p>

<p>If you move to a different internet connection or use a dynamic IP, you will need to update the file with your <a href="http://www.whatismyip.com/">current IP address</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://toolboxdigital.com/2009/09/hiding-your-wordpress-development-site-on-a-live-server/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
