The classic way to handle rounded corners with CSS is to make sure the module is using the -3 $style selector (discussed in Chapters 3 and 6) and then use the divs Joomla! outputs to set the four corners of the box in place.

Use Photoshop or your favorite graphic editor to make four rounded-corner images. This is usually best done by using the square-shaped drawing tool, which also has the option of letting you set the amount of roundedness for your corners. You’ll then make slices of each corner and output them as GIF files. You can also generate your images by using the following URL: http://roundedcornr.com. Name your new images: left-bot.gif, right-bot.gif, left-top.gif, right-top.gif and reference them in the following CSS, which will place each image into a corner of each of your Joomla! output module divs:

module {
    background: #cccccc;
    background: url(../images/left-top.gif) no-repeat top left;
    /*be sure to set your preferred font requirements*/
}
.module div {
   background: url(../images/right-top.gif) no-repeat top right;
}
module div div {
    background: url(../images/left-bot.gif) no-repeat bottom left;
}
module div div div {
    background: url(roundedcornr_170953_br.png) no-repeat bottom
                                                              right;
}
module div div div, .module div div, .module div, .module {
    width: 100%;
    height: 30px;
    font-size: 1px;
}
module {
    margin: 0 30px;
}

The markup Joomla! outputs with a -3 $style looks something like this. (I’ve added comments so that you can see which div will have which image associated with it. These comments will not be in your Joomla! output.)

<div class="module"> <!--//left-top.gif-->f
<div> <!--//right-top.gif-->
    <div> <!--//left-bot.gif-->
        <div bot right> <!--//right-bot.gif-->
            <h3>Header</h3>
                Content goes in here
        </div>
    </div>
</div>
</div>

This is an advanced technique brought to you by the folks at Compass Designs (http://www.compassdesigns.net/). Its key feature is that only two images are used (and yet it scales vertically and horizontally). On the whole, it’s similar to the four-corner technique, and it still requires the module $style to be set to -3, but if you make your images compressed there’s a bandwidth advantage in only having to load two images instead of four.

Create two images: left-side.gif and right-side.gif following the guidelines in Figure 9.1. Make sure that when the left-side.gif and right-side.gif are placed together (side by side), the whole rounded-corner image is as large as you would expect any area that uses this effect to be. For example, if the largest rounded-corner area you’re expecting to accommodate is 400 pixels wide by 500 pixels tall, make sure that the total of left-side.gif and right-side.gif equals 400 pixels wide by 500 pixels tall; otherwise, you’ll end up with gaps in your rounded-corner effect.

Figure 9.1 Sample left and right side images

You’ll then reference these two images in the following CSS, which again, places each image as a background for the module divs that Joomla! outputs:

module{
    background: url(../images/right-side.gif) top right no-repeat;
    padding:0;
    margin:0 0 10px 0;
    /*be sure to set your preferred font requirements*/
}
module h3 {
    margin:0;
    padding:0 0 4px 0;
    border-bottom:#ccc 1px solid;
}
module div {
    background: url(../images/left-side.gif) top left no-repeat;
    margin:0;
    padding:6px 0 0 0;
}
module div div{
    background: url(../images/left-side.gif) bottom left no-repeat;
    padding:0 0 0 5px;
}
.module div div div{
    background: url(../images/right-side.gif) bottom right no-repeat;
    padding:0 5px 5px 0;
    height:auto !important;
    height:1%;
}

I’ll be honest. I’m on the cheater’s bandwagon when it comes to rounded corners. I often create locked-width designs, so I always know exactly how much room my columns can take up. Moreover, I really like using the -2 module $style instead of the -3 $style, as I feel that the less markup the better.

This rounded-corner fix only requires the -2 $style to be called and only works for a set width with a variable height. This means that however wide you make your graphic, say 250 pixels wide, that is the maximum width that your module can be to accommodate this rounded-corner effect.

So, if you know the width of your columns and just need the height to expand, you can perform this two-image cheat by only making a top image and an extended bottom image as shown below:

Figure 9.2 sample top and bottom images

Next, reference the images in your CSS so that they are associated with the Joomla! module divs:

module {
    margin:0 0 10px 0;
    padding:0 0 10px 0;
    width: 150px;
    background:url(../images/bot-side.gif) bottom left no-repeat;
    /*be sure to set your preferred font requirements*/
}
module h3 {
    padding:8px 10px 6px 15px;
    margin-bottom:8px;
    /*be sure to set your preferred font requirements*/
   background:url(../images/top-side.gif) top left no-repeat;
}

You can customize each type of module by adding its own suffix, allowing you to draw attention to a particular module with rounded corners (or any other special CSS).

In the Joomla! Administrator’s Panel, go to Modules | Site Modules and select the module that you want to focus on in your design (in our case, Polls).

Underneath the module’s Details area, you’ll see the Parameters area. There, you can create a Module Class Suffix to append to that module.

Figure 9.3 Setting a Module Class Suffix

You’ll now be able to target that module (and any others that you customized with a suffix) using the specific module-suffix name that you created for it as follows:

module-polls {
    margin:0 0 10px 0;
    padding:0 0 10px 0;
    width: 150px;
    background:url(../images/bot-side.gif) bottom left no-repeat;
}
module-polls h3 {
    padding:8px 10px 6px 15px;
    margin-bottom:8px;
    /*be sure to set your preferred font requirements*/
    background:url(../images/top-side.gif) top left no-repeat;
}

Now only our Polls module has rounded corners on it, drawing attention to it, while the rest of our site modules have our existing module standards.

I like to simplify this process by using a simple PHP script with a local TTF (TrueType Font) font to help me quickly generate my header graphics. I can then just include them into my CSS sheet, dynamically setting up the text that the header needs to say.

This technique is very useful if your site is going to be mainly controlled by a client, as they will probably have to let you know every time they make a new header that needs to be a graphic loaded in via CSS. You will be able to accommodate them on the fly (or even better, teach them how to do it) as opposed to having them wait for you to generate the graphic with Photoshop or Gimp and then implement the CSS.

You can place this script’s file anywhere you like. I usually place a script like this in my template’s image directory as I will be referencing them as images (again, update your templateDetails.xml file).

imgtxt.php:
<?php
/*Basic JPG creator by Tessa Blakeley Silver.
Free to use and change. No warranty.
Author assumes no liability, use at own risk.*/
header("Content-type: image/jpeg");
$xspan = $_REQUEST['xspan'];//if you want to adjust the width
$wrd = $_REQUEST['wrd'];//what the text is
if (!$xspan){//set a default width
    $xspan = 145;
}
$height = 20;//set a default height
$image = imagecreate($xspan, $height);
//Set your background color.
//set to what ever rgb color you want
if(!$bckCol){
    $bckCol = imagecolorallocate($image, 255, 255, 255);
}
//make text color, again set to what ever rgb color you want
if (!$txtCol){
    $txtCol = imagecolorallocate($image, 20, 50, 150);
}
//fill background
imagefilledrectangle($image, 0, 0, $xspan, $height, $bckCol);
//set the font size on the 2nd parameter in
//set the server path (not the url path!) to the font location at the
//7th parameter in:
imagettftext($image, 15, 0, 0, 16, $txtCol,
"home/user/sitename/fonts/PLANE___.TTF", "$wrd");//add text

imagejpeg($image,'',80);//the last number sets the jpg compression
//free up the memory allocated for the image.
imagedestroy($image);
?>

From here on, you will only need to reference this PHP script in your CSS, passing your text to it via a query string instead of the images that you were generating:

flash3{
    background: url("../images/imgtxt.php?xspan=300&wrd=Newsflash 3")
                                                no-repeat left top;
}

Each time you have a new graphic to generate, you can do it entirely via the template’s style sheet and the Joomla! Administration Panel.

Figure 9.7 Header Graphic In Page. Looks the same. But it’s not!

Joomla! URLs are dynamic by default. This means they are a query string of the index.php page: index.php?option=com_poll&task=results&id=14.

In the past, dynamic URLs had been known to break SE bots that either didn’t know what to do when they hit a question mark or ampersand or started indexing entire sites as “duplicate content” because everything looked like it was coming from the same page (the index.php page). Generally, this is no longer the case, at least not with the “big boy” search engines but you never know who is searching for you using what service.

Also, by changing the dynamic string URL to a more SEF (Search Engine Friendly) URL, its a little harder for people to directly manipulate your URLs because they can’t clearly see which variable they’re changing once it’s in an SEF URL.

Joomla! has this SEF URL feature built-in (but only if you’re running PHP on Apache). First, you have to go into the root of your Joomla! installation and change the name of your htaccess.txt file to just .htaccess.

Next, in your user administration panel go to Site | Global Configuration and click on the SEO tab. Under Search Engine Friendly URLS, select Yes. You’ll notice that your URLs now display something more along the lines of: index.php/com_poll/results/14/.

SE bots will think the forward slashes are directories and not freak out about question marks and ampersands or assume that everything on your site is really the same page.

The effectiveness of placing keywords into your meta-tags is now widely disputed. (Since it’s so easily subject to misuse and manipulation, there’s even speculation that perhaps the big search engines don’t reference this meta tag at all anymore.) I therefore feel that it’s still wise to place your major keywords into a tag. (Again if nothing else, the smaller, lesser-known search engines may still use them.) I’m not so big on targeting misspellings anymore as the major search engines compensate for misspellings but some people still say it’s important. (Don’t you just love the “exact science” of SEO?)

However, I do find a well-written meta description useful as it seems search engines may randomly choose to display your meta description instead of the relevant bit of text on the page that pertains to the keyword search someone just performed.

When it comes to these two meta tags, I’m an advocate of “less is more”. Do not drop in 200 keywords and a four paragraph description into your meta tags. Simply put in the top 5 to 10 keywords used in your article or page, as well as a one sentence description (or possibly two sentences) that contains at least 3 to 5 of those keywords. Anything more than that, and I believe the GoogleMonster will assume you’re trying to pull some SEOBlackHat stunt and ignore fully indexing your pages.

You may have noticed in your Joomla! Administration Panel, when you edit or create a new content page (be it an article, static page or even a wrapper) there’s a side panel off to the right.

If you click the Meta Info tab, you’ll have two areas to include your content page’s description and keywords.

Figure 9.9 Meta Info Panel in Edit Content Screen

For advanced SEO control over your content and help with generating keywords and meta tags (which is always a pain to do), there’s an excellent plug-in extension that I’ve found useful called JoomlaSEO. You can get it from here: http://www.joomseo.com/.

While we’re here poking around the /components/ directory, you will find many other com_componentName folders: from com_banners to com_wrapper. Inside each of these directories, you may or may not find a componentName.html.php file.

The files that have html in their name are output files that contain the HTML markup that Joomla! uses to wrap content in. You can edit these files just like the content.html.php file that we described earlier.

There is one last thing to consider before you indiscriminately start stripping down the markup of your Joomla! mainBody(); output: The Joomla! CMS was put together by a great Joomla! team of expert PHP coders and web developers with some careful thought. Therefore, they probably had many good reasons for including the core component code and markup that they did. Just be aware that changing this output in any way can affect how the Joomla! CMS works and looks on the whole. For instance, if your site’s editors and contributors are going to be heavily reliant on the WYSIWYG editor (which is very likely), keep in mind that some of the markup produced by the editor may not look good if it’s not contained in a table. Be prepared to do lots of testing if you customize any of these files to make sure that the content display and site features continue working and look as everyone expects them to.