Special 2018 Offer! Get access to everything at OSTraining for one year! Only $59!
  Offer ends in
3 out of 4 members use OSTraining at least once a week. You can build great websites. We can help.   Plans from $4 per month

| Joomla

Having a fast site is really important:

"For Google an increase in page load time from 0.4 second to 0.9 seconds decreased traffic and ad revenues by 20%. For Amazon every 100 ms increase in load times decreased sales with 1%." source

These are two easy ways to make sure your Joomla site loads more quickly:

Turn on Compression

You can choose to send out your webpages in a compressed format. When you get a Joomla component it is often contained in a zip file. This enables the file to be much smaller without damaging the content in any way. You can do the same thing with webpages. In Joomla you just need to click "Yes" in the following place:

Site => Global Configuration => Server => GZIP Page Compression => Yes

There's also a great test to find out how much your site will benefit. According to WhatsMyIP.org, JoomlaTraining.com shrinks from 13k down to just 4k when GZip is enabled

Turn on Cache

Caching is another way to speed up your site. It stores files so that Joomla doesn't have to load the same elements every time. Why load the logo again on every page? Its best just to store it and reuse. It can turn on caching here:

Site => Global Configuration => System => Cache => Yes

The speed gains with caching can be remarkable. Last year there were problems with the cache systen we use here on one of our sites. We turned it off while we tried to bugshoot the issue. We also use Pingdom.com to track whether our sites are offline and also how fast they're responding. When we logged in later, there was a stellar argument for why caching your Joomla site is so important: the site loaded twice as quickly with the cache turned on.

cacheoff

| Joomla

Joomla templates allow you to redesign your site easily. modulesuffixesThey also allow you style your modules. Your login box can have one color, your "Latest News" can have another color and your "Most Popular News" can have third.

This image is an example using the Bolt template.

  • Red header, white background.
  • Orange header, orange background.
  • Yellow header, white background.
  • Green header, green background.

Here's how you do it

  1. Go to the administrator area of your site and Extensions >> Module Manager.
  2. In the parameters of your module, on the right-hand side, you'll see a box saying "Module Class Suffix".
  3. You'll have to read the documentation for your template to know what to enter - each template is different. If you're using Bolt you could enter any of these:
  • -red (Red header, white background)
  • -orangebg (Orange header, orange background)
  • -yellow (Yellow header, white background)
  • -greenbg (Green header, green background)
This example would give us a red header and white background:

How to Use Joomla's Module Suffixes

| Joomla
Joomla Training Cheat SheetFor the first time we're not sending a tutorial this week, but a download link: http://joomlatraining.com/cheatsheet.pdf

This is a condensed version of the beginner class. All the most important information is contained in just two PDF pages.

Please feel free to print this out and keep with you whenever you need reminding of Joomla's core concepts.

| Joomla
In our beginner classes we teach that module are small blocks of content around the outside of a Joomla site ... top, right, left, bottom.

Now that you're a little more familiar with Joomla, let's see an exception to that rule ... we can place modules inside regular text articles.

  • Step 1: In the administrator area of your Joomla site, go to Extensions >> Plugin Manager
  • Step 2: Find the plugin called "Content - Load Module" and make sure that it's enabled. On Joomla 1.0 its name is "Load Module Positions"
  • Step 3: Go to Extensions >> Module Manager and find the module you'd like to place inside an article.
  • Step 4: Open the module and click on the "position" dropdown.
  • Step 5: Choose a position that doesn't appear on your template. Remember that you can check this by adding /?tp=1 to your site.
  • Step 6: Save that module in its new position. In this example we've saved it in "User1"
  • Step 7: Go to Content >> Article Manager and open the article you're using.
  • Step 8: Place this code into the article: { loadposition user1 } ... remove the spaces between the brackets and the text. If you're using Joomla 1.0, then the code is {mosloadposition user1} .
  • Step 9: Save the article and check your handiwork on the front of your Joomla site.

Video Showing How to Place Modules Inside Joomla Articles

| Joomla

Sometimes you have text, an image or even code that appears on many places throughout your Joomla site. Normally, updating is a slow process:

  • Open page
  • Make change
  • Close page
  • Repeat ad infinitum

Wouldn't it be nice if you could search and replace just as you do with a Microsoft Word document. You can! Here's how to do it:

  • Step 1: Click here and download an extension called ReReplacer.
  • Step 2: In the administration area of your Joomla site, go to Extensions >> Install / Uninstall and upload the file.
  • Step 3: Go to Components >> ReReplacer and click "New" in the top right hand corner.
  • Step 4: Enter your existing text, image or code in the filed labelled "Search"
  • Step 5: Enter your new text, image or code in the filed labelled "Replace"
  • Step 6: Click Save and repeat as often as you need!

| Joomla
sobi1.pngThis tutorial which will show you how to create a business directory or Yellow Pages on your Joomla site. We're going to use a component called Sobi2, which is available from www.sigsiu.net.

Installing Sobi2

  1. Click here to download the Sobi2 component.
  2. Go to Administrator >> Extensions >> Install / Uninstall and upload the Sobi2 files.
  3. Click "Install Sobi2 data"
  4. Go to Menus >> Main Menu and click "New"
  5. Choose Sobi2 >> Frontpage or Selected Category for your menu link. Give the link a title such as "Directory" and click save.
  6. Visit the front of your site and click on the new "Directory" link. It should look like the screenshot on the right:

Configuring Sobi2 With Your Site Details

The first thing we'll do is put our own website's information into Sobi2:

  1. Go to Administrator >> Components >> Sobi2 >> General Configuration.
  2. Under the "General" tab, change the first field "Component Name" to reflect the name of your directory.
  3. Under the "Mainpage"tab, change the first field "Description of Component" to describe your directory.
  4. Under the "Mainpage" tab, you may want to change "Image for Description" to "- Select an Image -" so that you can hide the default image.

Creating Business Categories

Next, we'll set up the categories we're going to use for the businesses:

  1. Go to Administrator >> Components >> Sobi2 >> All Entries
  2. Click on "Add Category" and start to create your structure.
  3. If you already have a list of the categories you want to use, click "Add Multiple Categories" and you can insert a list.

Choosing Business Details

Depending on where and what kind of business listings you have, you'll need to collect different kinds of details. U.K. and Canadian sites might be happy with collecting "Post Code" but U.S. sites will need to change that to "Zip Code".

  1. Go to Administrator >> Components >> Sobi2 >> Custom Fields Manager
  2. Click on "Add New" in the top-right corner to add new details.
  3. You can choose to charge for extra information. For example, business might be an extra $5 to have their phone number listed and an extra $10 for their website link.

Collecting Payment

Yes, we did mention that you can have paid listings. That service is free with Sobi2. Once you've set up your fields using the above steps, you can enter your payment information:

  1. Go to Administrator >> Components >> Sobi2.
  2. Click "Configuration" on the left-hand side and then "Payment Options" will appear.
  3. PayPal is available by default so enter your business information including a Paypal email address in "Email Address" and a Thank You page link into "Return URL"
sobi2.png

| Joomla

Our teachers like to explain in Joomla beginner classes is that we're not Joomla cheerleaders. We love Joomla, but it has strengths and weaknesses like all software. Perhaps the biggest current weakness is user levels.

Joomla has 8 user levels but they are both basic and also often difficult to understand. Here is an explanatory chart of the levels that some of our students have found useful. (Original source: http://brian.teeman.net/joomla/65-joomla-15-acl-explained)
Understand Joomla User Levels and Permissions

 

| WordPress
Perhaps the #1 most common question we get from beginners is: "How do I change the logo on a Wordpress theme?" This tutorial is the answer:

  • Step 1: Go and download the Firefox browser, if you haven't done so yet: http://www.mozilla.com/en-US/firefox/personal.html. Firefox is much better than Internet Explorer or Safari for working on websites.
  • Step 2: Start Firefox so that you're browing the web with it. We're now going to install an extra toolbar for Firefox. It is called the "Web Developer" toolbar. Visit this page: https://addons.mozilla.org/en-US/firefox/addon/60
  • Step 3: Click "Add to Firefox" and follow the instructions, including restarting Firefox.
  • Step 4: The next time you open Firefox, you will see a list of links that starts with "Disable", "Cookies", "CSS" and ends in "Options":
Wordpress and Firefox Toolbar

  • View Image InfoStep 5: Browse to the website where you want to change the logo. We're going to use http://wordpress.org for this example.
  • Step 6: In the toolbar, click on "Images" which is the 5th link from the left. Then click "View Image Information" from the dropdown.
  • Step 7: You will now see a list of all the images on the site.
  • Step 8: Scroll down until you see the logo. You will see two pieces of information about it: Location ( http://s.wordpress.org/style/images/wordpress-logo.png ) and Size ( Width = 301 pixels, Height = 52 pixels ).
Wordpress Logo
  • Step 9: You need to make a new logo that is the same width and height as the old.
  • Step 10: Use your favorite file manager to upload the new logo to the location you found in Step 8. It is better to rename rather than delete the old logo. You could call it logo-backup.png for example.

| Templates

This post is for all of you Mac fans out there, specifically those using the excellent Coda editor by Panic. I could preach all day long about how using a quality code editor like Coda can both speed up your coding as well as make your coding better.

One brilliant little function of Coda is that it has a built-in code snippet collector called 'Clips'. What's even more brilliant is that Coda gives developers a way to share groups of these clips with each other. I was inspired by our friend Jon from Zuno Studios when he released a few clip groups relating to Joomla 1.5 development a few months ago. His clips are specifically geared towards developers creating extensions, and if you're at that level I highly recommend checking out his handy clips.

Since more of my day-to-day work involves creating templates, I put together a set of clips that I use almost daily for creating Joomla 1.5 templates. Lucky for you Coda users out there, I've packaged them up in a tidy group that you can download.

Read more ...

| Security

On 12/17/2008 around 7:00 PM EST , Twitter.com was hacked by a group claiming to be the Iranian Cyber Army. The actual attack was a DNS Hijacking (or DNS Poisoning) that resulted in Twitter Users being directed to a page of their choosing. In this example here is what they posted:

Twitter Hacked - could it happen to you?

This old school defacement actually was conducted by 'hijacking' the sites DNS - how they accomplished this is still unknown, the fact is they did. What exactly is a DNS Poisoning or Hijacking?

Read more ...

| Development

One of the most important aspects of extension development is gathering input from the user and manipulating it in a meaningful way. Many times, you will collect data with a form and then store it into a database table. Other times, you will decide how to order or display information to the user based on the query string of the URL. In either instance, you are taking and acting upon input from the user. Obviously, you hope that your users have good intentions in using your extension, but unfortunately, the reality is that not everyone has your best interests in mind. For that reason, you must be careful about the input that you allow into your extension.

Read more ...

A detailed look at the Wireshark protocol analyzer

Greetings, In this article I want to discuss the other powerful tool a systems administrator should know about. It is called Wireshark (from Wireshark.org). Wireshark is in essence a sniffer, in that it can listen in on the packets on the wire and tell you whats what. Officially its called a protocol analyzer which is more true to its mission. In this article I want to share with you a few items of value about Wireshark, and why you should get to know this tool better.

I think that as technical people we get lulled into a dull sense of safety with tools, for example a reliance on a control panel tool that identifies bad guys by their actions and blocks their IP's. This is for sure a good thing, but it is not the only thing. With tools like Wireshark, we can peer into the activity of our server and see what is going on at the packet level. A client some months ago came to JoomlaRescue.com and was having a problem with continually being hacked. We tracked it down to a compromised (vulnerable) FTP software that had allowed them in. However we found they were using FTP through the use of Wireshark.

This is important because if you were unfortunate enough to have a bad guy insert this INTO your network he could eavesdrop on everything you do. However - in this use case, it is being demonstrated as diagnostic tool.

For the purposes of this article I ran Wireshark on MY personal machine only. It was never allowed  outside my network, so in other words, everything you see here came to my machine using normal, everyday browsing techniques.

Read more ...

| Security

A detailed look at the Wireshark protocol analyzer

Greetings, In this article I want to discuss the other powerful tool a systems administrator should know about. It is called Wireshark (from Wireshark.org). Wireshark is in essence a sniffer, in that it can listen in on the packets on the wire and tell you whats what. Officially its called a protocol analyzer which is more true to its mission. In this article I want to share with you a few items of value about Wireshark, and why you should get to know this tool better.

I think that as technical people we get lulled into a dull sense of safety with tools, for example a reliance on a control panel tool that identifies bad guys by their actions and blocks their IP's. This is for sure a good thing, but it is not the only thing. With tools like Wireshark, we can peer into the activity of our server and see what is going on at the packet level. A client some months ago came to JoomlaRescue.com and was having a problem with continually being hacked. We tracked it down to a compromised (vulnerable) FTP software that had allowed them in. However we found they were using FTP through the use of Wireshark.

This is important because if you were unfortunate enough to have a bad guy insert this INTO your network he could eavesdrop on everything you do. However - in this use case, it is being demonstrated as diagnostic tool.

For the purposes of this article I ran Wireshark on MY personal machine only. It was never allowed  outside my network, so in other words, everything you see here came to my machine using normal, everyday browsing techniques.

Read more ...

| Development

This article applies to Joomla! 1.5 development. This information is subject to change in Joomla! 1.6.

When writing your custom component or module, more often than not, you will want to include your own CSS or Javascript code. If Joomla! did not provide an easy way to do this, you would be forced to use script tags throughout your code. While this approach would technically work, the best practice is to put all scripts inside the head tag of your page. How is that possible when the of your page is only seen on your template index.php file and you're developing a new module or component? The JDocument class is the answer. Let's look at the easiest way to go about doing this.

Read more ...

In our previous articles, we discussed at a high level a few tools, the first of which was Nmap from insecure.org. In this article I want to give you a short primer on Nmap and some of the popular methods to use this powerful tool.

Read more ...

| Security

In our previous articles, we discussed at a high level a few tools, the first of which was Nmap from insecure.org. In this article I want to give you a short primer on Nmap and some of the popular methods to use this powerful tool.

Read more ...

3 out of 4 members use OSTraining at least once a week. You can build great websites. We can help.   Plans from $4 per month