For simple sites like this one, Media Queries are a no-brainer – simple to add, and the basic layout allows for easy positional modifications to improve the layout on devices with smaller viewports. The target audience for the aggregator also made a compelling reason to create a responsive layout for the site – after all, there's a high probability an above average number of users will be viewing on an iOS or other mobile device.

Besides, I enjoy playing around with the technology, and there's no better place to do that than one of your own sites.

I have to be honest though, I've never really considered the downsides to Media Queries/RWD until Luke's opinion exploded all over Twitter today – that is, applying RWD techniques in a desktop environment – forcing users to view what is essentially supposed to be the mobile "version" of the site, with no other viewing choices available to them.

There are certainly cases where this would be undesirable to the user. Now, you could just adjust the media queries so that don't apply to the desktop environment (using max-device-width, for example), but what about those users who do in fact want the RWD environment on their desktop?

My solution is to offer a simple Javascript toggle function to the site to allow users to choose the experience they want. So, the RWD layout is active by default, but if the user resizes their browser and doesn't like the layout changes, they can simply disable the effects – basically toggling media queries on and off – not unlike the style switchers that were commonplace a few years ago.

My code is written for jQuery, but is so simple that I'm sure it could be easily ported to other libraries (and of course just plain old JS) by those more experienced with Javascript than I am. If you have another solution then please do let me know in the comments section below.

$(document).ready(function () {
    $("#togglerwd").click(function (e) {
        e.preventDefault();
        $('body').toggleClass("rwd");
    });
});

How It Works

$("#togglerwd").click(function (e) {

This first line sets up the click event for an element with the "togglerwd" ID. You will need to add a link in your HTML which will essentially be your toggle "button"/text link:

<a href="#" id="togglerwd">Toggle Responsive Layout</a>

Next, we disable the browser's default onclick behavior for the "#" link (which will stop the page from jumping to the top):

e.preventDefault();

Before finally toggling a class for the element:

$('body').toggleClass("rwd");

Remember to give your a class of "rwd" (or whatever hook you use) by default, which will make sure the responsive layout is enabled by default.

We now have a class we can apply to our media query rules which will allow the toggle to work. All we need to do is write the media query rules as normal, prefixing each with ".rwd" so they only apply when the responsive layout is active:

@media only screen and (max-width: 480px) {
    .rwd #wrapper {background-image:none;padding:0 10px 10px 10px;}
}

Don't forget you should use the same class prefix to style up the toggle button to give visual feedback to the user as to whether "RWD mode" is active or not.

Saving the Preference

So, our toggle feature is all working well – but what about on a more complex site with different pages? Or what if the user doesn't ever want to see the site in "mobile mode" every time he or she revisits the site?

To do this, we need to store the user's preference in a cookie which will be updated each time the toggle button is pressed.

Thanks to jQuery, and a plugin called Cookie, this is really simple to implement – just a few lines of code (the plugin can be packed pretty small) and a few changes to our script, and we're all set:

$(document).ready(function () {
    var rwdcookie = $.cookie('rwdcookie');
    if (rwdcookie == 'rwdoff') {
        $('body').removeClass("rwd");
    }
    $("#togglerwd").click(function (e) {
        e.preventDefault();
        $('body').toggleClass("rwd");
        if ($('body').is('.rwd')) {
            $.cookie('rwdcookie', 'rwdon');
        } else {
            $.cookie('rwdcookie', 'rwdoff');
        }
    });
});

Our new code first checks for the status of the cookie – if it's available and RWD has previously been disabled, then it will immediately remove the .rwd class from the layout, setting the user's preference.

Next, if the click/toggle event is fired, we first check to see if the body class now has ".rwd" applied to it. If so, then we write the "on" preference, otherwise we set the preference to "off". There's probably a cleaner way to do this, but I'm no JS guru, and this did what I needed it to do. I'm always interested in cleaner solutions though – so please let me know if you have an alternative method!

And that's it – one Reponsive Web Design layout toggler with cookie storage all ready to go. Try it out for yourself at toolboxdigital.com/geekkarting.

During the initial discussions it was determined that the "outages" were in fact PHP script errors, which in some server configurations are disabled by default, displaying a rather useless blank white screen instead.

You can easily enable error reporting by using a local PHP override either in a php.ini file or, if that won't work, setting PHP flags inside your .htaccess file:

php_flag display_errors on

As soon as the errors were being displayed, the problem was indeed revealed as a PHP script error:

Warning: include_once() [function.include-once]: Unable to allocate memory for pool. in /var/www/vhosts/httpdocs/app/Mage.php on line 49

Whilst not immediately useful, it does at least provide some food for Google in order to begin a search for potential solutions. During this research phase, I actually turned up very little relating to Magento specifically, but there was quite a lot of information in relation to PHP. In many cases, an Apache module known as "APC" kept cropping up. Apache APC ("Alternative PHP Cache") is "a free and open opcode cache for PHP. Its goal is to provide a free, open, and robust framework for caching and optimizing PHP intermediate code.".

A quick check of server options using phpinfo(); confirmed that APC was indeed running on the server.

The Solution: Disable APC

I find the Magento's cache system quite comprehensive, and set-up correctly should provide an adequate caching system/performance boost for your Magento site. If you have alternative thoughts or can offer more information on how APC can benefit a site, I'd welcome your comments.

So, in this case, I decided to disable the APC module for this particular virtual host on the server (this way it's still available for other sites running on the server). Disabling the module is very simple, and easy enough to re-enable if you need to do so in the future. It requires another line added to your .htaccess file:

php_flag apc.cache_by_default Off

You can re-run phpinfo(); again to confirm the APC is disabled correctly – and of course, test the live site to see if it fixes your problem!

It's just another example of how you can do cool stuff in CSS3 where you'd normally have no choice but to rely on images.

The other cool thing here is that we have loads more flexibility since we're just using ordinary images which are manipulated by the CSS – so we could use dynamic images, or slideshows quite easily inside the polaroid design, and the CSS takes care of all the tricky bits for us.

View the Live Demo here.

First Things First

As before, we’re using CSS3 here so you’ll need to view the demo in a browser that supports the effects (namely gradients and box-shadow). I recommend the latest versions of Firefox, Safari or Chrome – I’m afraid I’ve not tested beyond these browsers, but as long as yours supports the properties above then there should be no problem.

The Code

Here's the HTML we'll be using for this experiment:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
	<div class="canvas">
		<ul class="box left">
  			<li>
  				<img src="flower.jpg" width="300" height="380" alt="" />
  			</li>
		</ul>
		<ul class="box right">
  			<li>
  				<img src="shells.jpg" width="300" height="380" alt="" />
  			</li>
		</ul>
	</div>
</body>
</html>

You can replace the IMG files with your own images of course. Remember to size them according to the dimensions set-out in the CSS, minus the top, bottom, left and right borders (all 10px each).

Here's the CSS to work the magic:

.canvas {
	position:relative;
	margin:50px auto 0 auto;
	width:540px
}

ul.box {
	top:25px;
	position:absolute;
	margin: 0;
	padding: 0;
	clear: both;
	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
	z-index:1;
}

ul.right {
	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	left:240px;
	top:0;
	z-index:2;
}

ul.left:hover {z-index:3;}

ul.box li {
	list-style-type: none;
	margin: 0 30px 30px 0;
	padding: 0;
	width: 320px;
	height: 400px;
	border: 1px solid #efefef;
	position: relative;
	float: left;
	background: #ffffff; /* old browsers */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

ul.box li:after {
	z-index: -1;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	right: 19px;
	bottom: 10px;
	transform: skew(15deg) rotate(6deg);
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); }

ul.box li:before {
	z-index: -2;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	left: 19px;
	bottom: 10px;
	transform: skew(-15deg) rotate(-6deg);
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); }

ul.box img {
	border:10px solid #fff;
	width:300px;
	height:380px;
}

View the Demo.

Feel free to experiment with different dimensions for the boxes; remember you'll probably need to adjust the left,right and bottom position values for the shadows (which are created in the li:before and li:after definitions), or else they may not sit properly in your corners.

You can also adjust the shape and intensity of the shadows by tweaking the transform and RGBa opacity values in the same properties.

Used this code in your own project or experiment? We'd love to see what you've done – let us know!

One such effect is a box, with an applied gradient to it, and an elliptical shadow. These combined effects give the impression that the box is lifting in the middle, giving a shadow beneath.

Here's how I did it in CSS.

First Things First

We're using CSS3 here so you'll need to view the demo in a browser that supports the effects (namely gradients and box-shadow). I recommend the latest versions of Firefox, Safari or Chrome – I'm afraid I've not tested beyond these browsers, but as long as yours supports the properties above then there should be no problem.

Of course, there's nothing to stop you using this effect on projects now, just remember that older browsers won't be able to see the goodies.

The Code

Here's the HTML we'll need for our page:

<!DOCTYPE html>
<html>
<head>
	<title>CSS 3D Box Test</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
	<div class="box">
		<div class="box-shadow"></div>
		<div class="box-gradient">
			...some content can go here...
		</div>
	</div>
</body>
</html>

And the CSS:

.box {
	position:relative;
	width:600px;
	height:300px;
	margin:100px auto 0 auto;
}

.box-gradient {
	position:absolute;
	width:100%;
	height:100%;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC));
}

.box-shadow {
	position:absolute;
	left:50%;
	margin:400px 0 0 -290px;
	bottom:10px;
	width:580px;
	height:16px;
	background:#fff;
	border-radius:290px / 8px;
	-moz-border-radius:290px / 8px;
	-webkit-border-radius:290px / 8px;
	box-shadow:0 10px 20px #000;
	-moz-box-shadow:0 10px 20px #000;
	-webkit-box-shadow:0 10px 20px #000;
}

Don't forget to check out the live demo to see if working for real in your browser, and examine the source code to see how it all fits together. You can also generate more exaggerated shading effects by altering the gradient values and vertical positioning of the shadow DIV.

Please do share your experiments in the comments, I'd love to see more examples of how CSS can be used to enhance a site's design without the need for images.

Whilst wp_nav_menu allows us to build such complex multi-tiered menus, it unfortunately doesn't (yet) let us have as much flexibility as we sometimes need – for building more flexible split-level menus, for example.

For this method we use a combination of careful page-hierarchy assignments and wp_list_pages to render the output in the sidebar.

Building the Hierarchy

First, you will need to make sure your pages are correctly assigned for this to work. This is done by simply assigning your sub-navigation pages as child pages of the top-level page (navigation parent).

For example, our navigation structure might be this:

Products
    – Toy Cars
    – Lego
            - Technic
            - Atlantis
            - Lego City
    - Dolls

Our page hierarchy must then echo this same structure by assigning your pages to the appropriate parent page.

Pre-requisites

This code uses the is_subpage() function to determine the parent page ID. To install this, simply copy the code below into your template's functions.php file:

function is_subpage() {
global $post;
if ( is_page() && $post->post_parent ) {
$parentID = $post->post_parent;
return $parentID;
} else {
return false;
};
};

The Code

Here's the code that generates the sub-navigation (level 2-3). It should be placed in the sidebar, or wherever you want the sub-navigation to appear:

<?php
$subPage = is_subpage();
$ancestor = $post->ancestors[1];
if ($subPage) : // we're on a sub-page:
if ($ancestor) : // we're a sub-sub nav item...
echo "<ul class=\"page-list\">";
wp_list_pages("title_li=&child_of=$ancestor&sort_column=menu_order");
echo "</ul>";
else :
echo "<ul class=\"page-list\">";
wp_list_pages("title_li=&child_of=$subPage&sort_column=menu_order");
echo "</ul>";
endif;
endif;
?>

Don't forget to style the menu list as you need to via the main stylesheet.

Alternative Plug-in

There's a great little plug-in you might want to try first, called "Gecka Submenu":

http://gecka-apps.com/wordpress-plugins/gecka-submenu-pro/

It utilised the wp_nav_menu function to generate split menus, so in some ways is easier to organize and change your navigation. Unfortunately though, what it cannot seem to do is give a persistent split menu on the bottom-level menu – so if you are browsing the 3rd level menu, since there are no menus in the structure beyond this level, the menu disappears.

Our solution enables the 3rd level to always remain active, which in most cases, is what you need it to do.

Have any ideas or feedback? We'd love to hear from you, so leave us a comment.

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 – you don't want to be diluting your Analytics with all that noise.

So, how can the same be acheived in Joomla? Well, quite easily actually. Read on to find out how…

Modify the Template

For this to work we will need to make a simple logic change in the site's template index.php file, which you can find in template/your_template directory of your site. First we'll need to get the $user variable loaded into the template, so, near the top, add the following line of PHP:

$user =& JFactory::getUser();

This will load an array of variables into $user that we can use to determine who's currently logged-on to the front-end of your website. The particular value we're looking for is the User ID, contained in $user->gid (the current user's Group ID) – 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.

Add the logic code

Next step is to locate your GA tracking code, which should be right at the bottom of your index.php file, just before the 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:

<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 type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12345678");
pageTracker._trackPageview();
} catch(err) {}</script>

Then add the PHP test to selectively load the scripts, which looks like this:

<?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>

<?php endif; ?>

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:

• 18 – Registered
• 19 – Author
• 20 – Editor
• 21 – Publisher
• 23 – Manager
• 24 – Administrator
• 25 – Super Administrator

Disable tracking for anyone who isn't a guest user (not logged-on):

if (!$user) :

Disable tracking for all back-end users:

if (!$user == 23 || !$user == 24 || !$user == 25) :

Disable tracking for all registered users:

if (!$user == 18) :

I'm sure you get the gist!

Got a better idea or know of a plugin that can do this for you? Please share it in the comments, we'd love to hear your ideas!

Every menu link in a Joomla website has one; and they are unique to each and every link on your site.

But what if you need to style entire sections of a site based on a handful of top-level (parent) menu items?

This article explores the methodology of styling sub-level pages respective of their common parent menu links.

Method 1: Modifying the mod_breadcrumb Module Code

The mod_breadcrumb module is native to Joomla, and by it'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'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's more code-heavy than method 2, but provides an easier-to-understand output that works in exactly the same way.

Let's first examine the original code:

defined('_JEXEC') or die('Restricted access');

class modBreadCrumbsHelper
{
	function getList(&$params)
	{
		global $mainframe;

		// Get the PathWay object from the application
		$pathway =& $mainframe->getPathway();
		$items   = $pathway->getPathWay();

		$count = count($items);
		for ($i = 0; $i < $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 =& 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;
	}
}

We can immediately remove the second part of the code that sets the separator, since we don't need that. Also, since we only need to return the parent item's text, we don't need the loop in place. We shall also use the Application Object since
$global mainframe will be removed in Joomla 1.6, so:

$global mainframe;

Becomes:

$app = &JFactory::getApplication();

Which gives us the completed code below:

class getParentMenuTitle {
	function getList() {
		$getParent = &JFactory::getApplication();
		// Get the PathWay object
		$pathway =& $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;

How To Use The Code

This block of code can be inserted directly into your active template's index.php file before the HTML is started. Remember to enclose the code block in PHP tags. Alternatively you can include it from an external file.

Once working in the template, you can apply the variable $parentmenu 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 – for example:

<body id="<?php echo $parentmenu; ?>">

…will allow you to influence the design across the whole template, such as:

body#menu-link-name a {color:red;}

…which will change all links on the page to red for that particular top-level menu link.

Method 2: Using the Jsite Object

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's by far the recommended method of the two. It uses the Jsite object to obtain the parent menu's ItemID and stores it in a variable which can then be applied to any class/id in the template:

$parentmenu = JSite::getMenu()->getActive()->tree[0];

You can obtain the ItemID of any menu links in the pathway by altering the value of tree[0].

How To Use The Code

Again, this code needs to be inserted into the template. The ItemID is stored in the $parentmenu variable, just as it was before, so you can use a similar method to above – but prefix the class/id with something or else you may have problems, for example:

<body id="menuID-<?php echo $parentmenu; ?>">

Why Would You Need To Use Method 1?

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 – 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.

Something to Share?

Have an alternative technique, or have you used this (or something similar) on a site before? Please do share it in the comments.

Many thanks to Gergő Erdősi and Amy Stephen for the code presented in method 2 above.

Panic Coda

Web: panic.com/coda | License: Commercial, $99

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.

Filezilla

Web: filezilla-project.org | License: Free

Simple to use and packed with great features – one of the best free FTP clients out there.

Adobe Fireworks

Web: www.adobe.com/products/fireworks | License: Commercial, ~$299

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's particularly useful if you work with designers who prefer to work in Photoshop.

VMware Fusion

Web: www.vmware.com/products/fusion | License: Commercial, $79.99

Set-up multiple operating systems which can be run in OS X without needing to reboot. Essential for effective cross-browser testing.

MAMP

Web: www.mamp.info | License: Free (Pro version: £39)

Localhost server environment to enable fast, live development – provides a one-click server running Apache, PHP and MySQL.

Quicksilver

Web: docs.blacktree.com/quicksilver/quicksilver | License: Free

Quickly access all of your applications at the touch of a button – no more searching around in your Apps folder!

Apple Time Machine

Web: www.apple.com/macosx/what-is-macosx/time-machine.html | License: Free (ships with Mac OS X)

The perfect incremental backup solution – and best of all, ships with OS X and is seamlessly integrated. Just add an external disk drive!

Betterzip

Web: macitbetter.com | License: Shareware, $19.95

Brilliant archive utility offering a variety of formats and and easy-to-use interface.

Skype

Web: www.skype.com | License: Free

Communicate with worldwide clients for free, or add a real phone number without needing a physical phone line.

Process

Web: www.jumsoft.com/process | License: Shareware, $39

Useful task-list and project tracking.

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 "SSL Enabled" flag in the menu settings needed to be set to the "Off" setting in order to force the majority of the site to run in non-SSL mode:

The obvious solution is to go through each menu item one at a time at set this manually – but there'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.

So, instead, we set about using simple find & 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:

NOTE: Please ensure you make a full backup of your database before proceeding – if there's a problem, you will easily be able to restore the database and try again.

update TABLE_NAME set FIELD_NAME = replace(FIELD_NAME, 'string to find', 'new string')

Use a program such as PHPMyAdmin to easily make edits to your database. Most hosting providers give easy access to this via your hosting control panel – this will allow you to find the table/field names and run the query easily.

So, in our case, it's fairly obvious we'll find the setting we need to adjust in the jos_menu table, so, browse the table, then click the edit icon to open up the contents of one of the rows:

You'll see I've indicated the bit we need to change on the image above – it's in the field named params. 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 "secure=0" (so, any menu SSL settings that are set to "ignore"), and the setting we need to change to (like on the diagram) is "secure=-1" ("Off). If you're in any doubt as to the setting that's needed, just change it in Joomla and view the string in PHPMyAdmin.

This now allows us to construct the final query that we will run on the database:

update jos_menu set params = replace(params, 'secure=0', 'secure=-1')

Simple, isn't it?

To run the query, simply click the "SQL" tab in PHPMyAdmin, paste your query into the box, and click go. Once it's run successfully, log into the Joomla administrator and check that everything was changed as expected.

Getting Started

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…however you make it, just make sure it's designed as you'd like the final newsletter to appear.

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 – but I personally prefer to see exactly what's going on, so tend to hand-code once the basic structure is defined.

Note that the table I've used here is quite narrow (600px) and centered – you can use your own dimensions and alignment here, but this arrangement seems to work best for most email clients and display resolutions.

I've also left the border active (border="1") 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.

Adding Content

Once you have your basic structure in place, you're ready to start adding content (text and images) to the newsletter. For now, don't worry about the styling; just add the bulk of the text and any images you have to the layout.

If you don'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.

Images should be added using the absolute path to the server where they are stored:

<img src="http://mydomain.com/images/header.jpg" alt="" />

…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 – it is not possible to override this.

Adding the Style

This is where most of the time is consumed – actually adding the inline CSS to the layout in order to get the look to match the design you've made. Inline styling offers the best and most widely compatible method to add styling to the newsletter. If you're comfortable with hand-coding the styles, this is the best way – but of course you can always use a visual editor…just keep an eye on the way the styling is added to the document – some editors (such as Dreamweaver) may define styles in a stylesheet format which won't work for the newsletter.

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:

<table width='600px' border='1' cellspacing='0' cellpadding='5' align='center' style='font-family: Georgia, 'Times New Roman', Serif; color: #222222; font-size: 13px>

This will give you your text style for any text that does not have it's own definition. Much of the styling information will be applied to things like headers and links:

<h2 style="font-size:18px; font-weight:bold; color:#FF3300">Here's My Title</h3>
<p>Check out the following link:</p>
<a href="http://www.mylink.com" style="color:#3F84BA; text-decoration:underline">My Link</a>

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 style="font: bold 14px/120% Arial,Sans-Serif">This is my paragraph.</p>

Viewing the Newsletter in Other Formats

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.

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.

The finished example (click to view the actual document in your browser)