Modal windows using Mootools are pretty useful. It's great to include AJAX effects and functionality easily within Joomla.

I was recently tasked with creating a popover form, but the catch was that it had to load automatically. A quick post to the Joomla forums didn't yield an immediate response (...not that the forums aren't great but I needed some advice very quickly. As I write, there's probably someone typing in better code than I have here...). AJAX isn't a strong point right now. I kind of wish I had a couple weeks (or months) to just tinker with AJAX so it's more familiar.

Anyway, I got some initial wisdom from the pages of Art of Joomla for how to include the usual modal windows using Mootools within Joomla. This was a start.

The difference though was how to get this stuff to load without a click event. Also, I needed a window that opened a real page.

1. You still need to include this at the top of your template:
   <?php JHTML::_( 'behavior.modal' ); ?>
2. Next, you still need to create a link that represents what URL you want, plus the rel attribute that gives the specs for the iframe.
   <a class="modal" rel="{handler: 'iframe', size: {x: 570, y: 500}}" id="modalWindowLink" href="http://www.kirbymixedmedia.com"></a>
   For this project we didn't want a visible link. I just didn't put in any text in between the link tags. I'm guessing you could set the css visibility if you think that's cleaner. I also gave the link a specific ID.
3. Finally, this is the code block that gets it done.

   Just after the link, I put in this script block:

         <script>
   
         window.addEvent('domready', function() {
         
   	window.addEvent('load', function(){
   
   	  //alert('clicked!');
   
   	  SqueezeBox.fromElement($('modalWindowLink'));
   
   	});
   
         });
   
         </script>
   
   

   (commented line is just for debugging.)

Load your page, cross your fingers and watch the modal window pop up.

Clean up this code, tweak, improve - have fun!

Every Joomla-head knows about RocketTheme and the great templates they've created. I recently started using the Replicant template for DeathBeaver and needed to customize the icons for RokSlide.

1. Create an image within a 114px by 114pixel square within the GIMP. Save it to whatever.png.

2. Go to the top menu, Image and click Canvas Size. Set the canvas to 124pixels wide by 194pixels tall. Make sure to click the little chain link nex to the inputs where you set the sizes. Otherwise, it won't allow you to set an uneven proportion.

3. Use the Move tool to set the white square so that about 5 pixels spacing are on the top, left and right.

4. Place whatever art you're trying to display within the 114x114 space.

5. OK, here is where it gets tricky to describe. Believe once you get the hang of this you could churn these out quickly. Anyway, open up the Layers, Channels and Paths dialog from the top Windows menu. You should see one layer you're working on called Background. Click the "Create a duplicate..." button in that window. It looks like a couple of picture frames on top of each other.

6. Use the Flip tool to flip that layer vertically. Use the Move tool so that the top of the image that's been created is touching the bottom of the original image. Set the transparency of that layer within the Layers, Channels and Paths dialog. I used 26.6% but eyeball it and see how it goes.

7. OK, make sure you're working on the right layer for this. Click on newer layer within Layers, Channels and Paths. Do a Select All (cntl-A or Edit->Select All). In GIMP 2.6, I use Shift-Q for Toggle Quick Mask. You can also get to that option from the Select top menu. Select the Gradient tool from your Toolbox window. Select black for the Foreground color. Then, within the Gradient tool options, select the FG to Transparent gradient. Use the gradient tool by by click once where the "reflection" begins and drag downward. Toggle Quick Mask again. You've used the gradient as a mask so when you apply Clear, anything that's black is completely unaffected and pixels that are shades of gray are affected according to how dark it is. Select Edit->Clear. Ta Da!

8. Save and upload to wherever makes sense on your site. You can then reference this graphic within your RokSlide module (which is really a mod_custom with some javascript thrown in...).

Joomla has come really far SEO-wise since the 1.0.x branch, but you can tweak your layouts further using the MVC capabilities of 1.5.

'What is MVC?', you might ask. Well, you can read about it or you can accept my really overly short summary that would probably incite vicious all-caps comments if I put them on the site... Anyway, MVC is a way of building an application that allows for easy edits to the display of your pages. The guts of the application have been made separate so if you want to tweak things without butchering the rest of the program, you can. For 90+% of us tweaking Joomla, this explanation is good enough.

One of the quick issues to fix is the fact that your Joomla article title are not surrounded by H1 tags. Typically you'd want something that summarizes your points, like the headline/title, to have H1 tags. In order to do this without Joomla 1.5's MVC approach, you'd have to hack /components/com_content/views/article/tmpl/default.php. This in turn would mean, that unless you stayed pretty vigilant, any point releases (updates) that came from Joomla might replace your custom code changes. And if you made any more tweaks to other areas of Joomla, you'd have to be that much more on top of what the updates were, well, updating.

Luckily, we don't have to hack the sacred core code.

Copy, through FTP, the command line - whatever, this file /components/com_content/views/article/tmpl/default.php to /templates/<whatever template you're using>/com_content/article/default.php. So /templates/<whatever template you're using> is already going to exist. You'll have to probably create the directories com_content and article within your template directory. I say 'probably' because for whatever reason you might have installed a template which the template designer already understood the MVC concept or someone has already made customizations.

In any case, once you have copied this file to the above desitnation, you're practically done. Now you can hack with (almost) total impunity. If you really screw stuff up, you could just rename your hacked file to default.bak.php and it won't get recognized and Joomla will go back to using the normal default.php for your articles. Or, if you're that frustrated, you can delete your copy and go back to playing WoW.

So, you can do whatever you need to for SEO ort non-SEO purposes. I made the aforementioned H1 edits:

I also use this to set my meta descriptions:

That block is definitely experimental. It basically takes the first paragraph and makes it the meta description for the page. "Now why the hell would you do that?", you might ask. Well, first, because I like to tinker and second because I'm lazy and just like to write my article and not worry about adding in the description in the article page. And third, because from what I know, Google likes there to be some similarity between the description and page content.

Happy Joomla'ing!

When you're using Joomla's Article Manager, you get spoiled by its email cloaking. Then you start creating modules or dealing with other areas that don't incorporate the email cloaking and it's a little disappointing.

One area I get surprised by is that Custom HTML modules (mod_custom) do not implement cloaking - a little weird but Joomla is huge. I haven't been able to keep up with 1.5.7 or .8 so possibly this has changed.

In any case, I have have several components and areas that I wanted to put in the Joomla cloaking. One area (a custom error page) didn't have a reference to $mainframe so it broke on line 17 in plugins/content/emailcloak.php. So, you may or may not need the first line depending on what you're trying to do.

so, I don't have a solution for mod_custom yet, although now that I think about it, I may be able to create a new view using MVC...
anyway, I'll post that if I get mod_custom tamed.

Here's the code:

As always, YMMV depending on app/component/module/etc and version of Joomla. This block has been reliable for me. Enjoy!