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

This tutorial will show you how to find the right width for your site.

Find Your Own Screen Width


First, we'll find the current width of your screen so you can have an idea of how large these sizes are. Most of the time it will be in your computer settings:
- For my Mac its Apple icon >> System Preferences >> Displays
- For my PC its Start >> Control Panel >> Display >> Settings
In this case my screen is 1680x1050.

Find Your Visitors Most Common Screen Sizes


Your own screen probably isn't the best width to use. I'd go to Google Analytics and check what the most common screen sizes are for your site visitors. Go to Visitors >> Browser Capabilities >> Screen Resolutions.

Examine the Screen Sizes


Generally the more tech-savvy your visitors, the large the screen. In this case it wouldn't make much sense to have a narrow website width. Ideally our site will be at least close to 1000px. Increasingly widths of around 960px are common.

| Joomla

This is one common solution if you're getting a "404 Not Found" error when visiting your Joomla administrator area. The problem often lies with a good and useful product called JSecure. You normally have to remember a specific URL that was set in the administrator area. For example: mysite.com/administrator?mysecretcode. This stops people from trying to guess your login, but if you forget your secret code ...

Do you see this screen?


If you do, the problem is JSecure. Have you really forgotten your secret code? If so, read on ...

Login to Your Hosting Account


Or you could go via FTP. Essentially you just need a way to get to your files.

Find Your File Manager


Every hosting company should give you access to your files, although the access may be in different places with each host. This is an example from the popular CPanel software.

Browse to /Plugins/System/


You need to access the /plugins/ folder than then the /system/ folder.

Find JSecure.php


Rename the File


Just give jsecure.php a different name and save it. Next time to try to access your site, the 404 error should have gone.

| Joomla

This purpose of this tutorial is to show you how to find and fix problems with your Joomla templates. We're going to focus on CSS (or Cascading Style Sheets) because they control very common issues such as fonts, colors and padding.

Download and Install Firefox


No question about it, Firefox is the best tool you can find for fixing problem on your website. Download from http://www.mozilla.com/firefox and install.

Install the Web Developer Plugin


Firefox is useful for the same reason as Joomla ... it has 1000s of amazing addons. The one we're going to use is called "Web Developer". Visit https://addons.mozilla.org/en-US/firefox/addon/60 in your Firefox browser and click "Add to Firefox".

Visit Your Joomla Site


We're going to use the default Joomla for this tutorial.

Diagonse Your Problem


In this example, our welcome message is too small. We'd like to have "Welcome to the Frontpage" in larger text.

Start the Webdeveloper toolbar


Click "CSS" in the toolbar and then click "View Style Information"

Click the item you want to edit


Hover your mouse over any part of the page and a red box will appear around it. Click on that area.

See the CSS Code at the bottom of the page


At the bottom of the page you'll get a lot of information about why that item on your site looks like it does. Here's what's controlling the "Welcome to the Frontpage" line:
1: The file with it's exact location
2: The exact line number inside that file
3: The code at that line number
In this case you can see that the font-size is 1.5em. We'll need to increase that number.

Login to Your Joomla Site


Go to Extensions >> Template Manager inside your site

Click on Your Template Name


Click "Edit CSS"


Open Your Template' CSS File


Browse down to find the template you saw in the previous step called "Find the CSS code at the bottom of the page". Click "Edit" in the top-right corner.

Copy Your Test into an Editor


I'm using Notepad in this example, but any text editor will do. If you have a code editor with line numbers, even better!

Backup, backup, backup, backup, backup, backup!!!


If you're doing this for the first time, you will make mistakes. Backup your file so that you can roll back those mistakes when they happen.

Find Your Code to Change


Search for the code that you find earlier in the tutorial.

Change the Code


Especially when you're getting started, this may involve some trial and error. In this example, I'm going to increase the font-size from 1.5 to 1.7.

Paste Back into Your Joomla Site


Paste the code back into your Template Manager and click "Apply".

Check the Change


Great - in this case the change worked and text is larger. If you the change isn't just what you want, you'll need to go back a few steps to "Change the Code" and try again.

Some Notes

1) This is a process of trial-and-error. Don't expect to get it right first time, ever time.
2) Make one change then check. Make one change then check. If you do that, it's easy to spot a mistake. However, if you make wholesale changes before checking, it will be very difficult to find where you went wrong.
3) If you want to move faster, get an FTP Editor that will allow you to edit this files more quickly and accurately. That however, is for another tutorial :)

| Joomla

Changing your htaccess.txt file to .htaccess is important in Joomla because it allows you to enable Search Engine Friendly URLs. It's also an important step to help keep your site safe. Here's how to do it.

Login into your CPanel


Often you can access your CPanel just by adding /cpanel to your domain name ... example.com/cpanel

Access the File Manager


Although your screen may not look 100% identical to the one above, every version of Cpanel does come with a "File Manger" option somewhere.

Choose to Go to the Webroot


Find htaccess.txt

Your files and folders will be listed alphabetically. Scroll down until you find htaccess.txt


Check the box next to htaccess.txt and click "Rename" at the top of the page.

Change the file name to .htaccess


Enter .htaccess as the new file name and click "Rename File"

| Joomla

This tutorial will show you how to display a Google Calendar inside your Joomla website.

Go to Your Google Calendar


Go https://www.google.com/calendar, login and and click "Settings" in the top-right corner.

Find the Calendar ID


Click on "Calendars" and then click on the name of your calendar. Scroll down to "Calendar Address" and copy the "Calendar ID" to your notepad. It will have a long string of characters and then @group.calendar.google.com

Make the Calendar Public


Click "Share This Calendar", check the box next to "Make this calendar public" and click "Save".

Download the GCalendar Component


Now that you have your Google Calendar set up correctly, we're going to install the necessary Joomla component. Visit http://g4j.laoneo.net to download the GCalendar component

Extract the GCalendar Folder


Click on the GCalendar folder and extract it so you can see the various extensions inside.

Install GCalendar


Go to Extensions >> Install/Uninstall and click "Browse" to upload com_gcalendar

Go to the GCalendar Component


Go to Components >> GCalendar >> GCalendars

Creating a New Calendar


Click "New" in the top-right corner. You'll see three fields. You only need to give the calendar a title and enter the "Calendar ID" you found and saved earlier. Click "Save"

Make a Menu Link to the Calendar


Go to Menus >> Main Menu >> click "New" >> choose "GCalendar"

Choose the Calendar


Choose the calendar you created and click "Save".

Your Calendar Should Be Ready ...


| Joomla

Docman is perhaps the most popular way to handle documents in Joomla. This tutorial will show you how to use it.

Download Docman


Visit http://www.joomlatools.eu/docman-14.html and download Docman v1.4.0. There is a more modern version of Docman that is commercial. We're using the free version in this tutorial.

Enable the Legacy Plugin


Login to the administrator area of your Joomla site and go to Extensions >> Plugin Manager. Click to enable the "System - Legacy" plugin.

Install Docman


Go to Extensions >> Install/Uninstall and click "Browse" to upload Docman

Add a New Category


Go to Components >> Docman >> Categories and click "New" in the top-right corner.

Name and Save the Category


Give your new category a name and click "Save" in the top-right corner.

Start Uploading Documents


Click "Files" and then "Upload" in the top-right corner.

Choose Upload Option


Normally you'll want to keep this option as it is and just click "Next>>>"

Upload Your File


Browse to find your file and then click "Submit"

Choose to Make a New Document


Once you have uploaded your file, the next step is to create a "Document" out of it. That simply means giving it a name, description and other details. Click "Make a new document entry using this file."

Add Details to the Document


Make sure that both "Approved" and "Published" are set to "Yes". Then click "Save".

Verify that Your Document is Created


Hopefully your new document will appear as above.

Make a Menu Link to Docman


Go to Menus >> Main Menu >> click on "New" >> choose "Docman". Choose a title for your menu link and click "Save".

View Docman On the Front of Your Site


Click "Preview" in the top-right corner and you'll see your new menu link. Click on it and you'll see your Docman category. Open the category to see your file

Extra Feature: Docman Groups


Docman also has a very powerful permissions system that allows you to control who can and cannot access documents. Start by going to Components >> Docman >> Groups

Creating a Docman Group


Click "Add" in the top-right corner". You can create a group of users simply by moving them from the "users available" list to the "Members in this Group" list.

Giving Groups Access to a Document


Now when you open up any document you can click "Permissions" and give access only to a certain group of users.

| Joomla

This lessons will show you how to insert an image into a Joomla module and make it appear to your site visitors.

Go to the Module Manager


Go to Administrator >> Extensions >> Module Manager

Click to Create a New Module


Click "New" in the top-right corner

Choose "Custom HTML"


We can choose to create any kind of new module here. We'll choose "Custom HTML".

Find Your Image


Click the Image button at the bottom of the page. You'll see a pop-up window. Either choose an image from here or click "Browse" and upload your image.

Insert Your Image


Click "Insert" and your image should be in the text editor.

Configure the Module


Choose your module position from the dropdown and then click "Save"

See the Image On Your Site


Visit the front of your site and the image should now appear on the page.

| Joomla

This tutorial will show you how to place a shopping cart, photo gallery, video gallery or any other kind of component on your homepage, instead of the normal list of articles.

Step 1: Finding the Current Homepage


Login to your Joomla site administrator area and hover your mouse over "Menus". Click on whichever menu has the star beside it.

Step 2: Finding the Current Home Link


Look for the link that has the yellow star in the default column. That is your current homepage.

Step 3: Changing the Homepage


Check the box next to the link that you would like to be the homepage and then click "Default" in the top-right corner.

Step 4: All Done!


"Joomla License" is now your homepage.

| Joomla

This tutorial will show you how to add downloads to your Virtuemart products.

Access Your Virtuemart Configuration


Go to Administrator >> Components >> Virtuemart >> Admin >> Configuration

Access the Downloads Tab


Check the box next to "Enable Downloads" and click "Save.

Open an Existing Product


Go to Products >> List Products and click on an existing product.

Have a Virtuemart Product Open


When the product is open, you'll see a new link on the left under Products. This new link will be called "Add Image/File". Click on it.

Upload Your File


After clicking on "Add Image/File" you'll be taken to a screen like this where you can attach images to your product.

Seeing Existing Files


You can always check back and see which files are assigned to which products by going to Products >> List Products and clicking on the "Media" column.

Managing Existing Files


| WordPress

This tutorial shows an easy way to work on a Wordpress site without taking it live. There is a setting that makes the search engines ignore the site until you are ready. Be careful to turn this back on when you're ready to launch. I've seen some big sites for big companies launch with this enabled ... everyone was sitting around wondering why they had no traffic.

Login to Your Wordpress Site


Go to Settings >> Privacy


Finally set Blog Visibility to "I would like to block search engines, but allow normal visitors" and your site will be hidden from Google, Bing and Yahoo.

| Development

Have you ever browsed to a website only to find that half the content is unreadable? Or that certain characters are being displayed in strange and mysterious ways? Or perhaps you wanted to enter a foreign or unusual character but found that the result was a garbled mess.

The chances are you have been subject to poorly managed character encodings. Joomla! extensions are no exception to these occurrences, but with a little bit of effort and some help from the Joomla! framework, we can avoid these problems with relative ease.

Read more ...

| Joomla

When we get two people inside a few minutes in our support forum asking how to do the same thing, it's time for a tutorial ...

Both of our students were asking how they can upload documents and link to them from articles. We have already recommended one way to handle documents for people using the JCE Editor.

This week we're going to recommend an extension called "Attachment for Content Articles".

Installing Attachments For Content Articles

  1. Go to Joomlacode.org and download the file called attachments-1.3.4.zip
  2. Extract the files on your desktop. There should be several extensions and documents inside.
  3. Go to Extensions >> Install / Uninstall and install all four extensions from the folder.
  4. Go to Extensions >> Plugin Manager and enable the three Attachment plugins. If you have trouble finding them all, you enter "attachment" into the filter field:


Configuring Attachments For Content Articles

Go to Components >> Article Attachments and you'll see "Parameters" in the top-right corner. Click that button and you'll be able to configure your document options.

For this tutorial, I'd recommend setting "Attachments published by default?" to "Yes". That means you won't have to take the extra step of publishing.

Here you can also decide whether people need to be logged in to download attachments. Again, for easy testing I'd recommend setting "Who can see attachments?" to "Anyone".


Uploading Attachments

Click "New" in the top-right corner. You'll see a screen like the one below:


  1. Click "Select article" and choose which article you'd like this image to appear in.
  2. Click "Browse" and select your file.
  3. Enter the name people will see when they download the file into "Display Filename".
  4. Enter information about the file into "Description".

Click "Save" and when you visit the front of your article you should see the attachment showing like this:

Attachments to Articles

You'll also be now see a button at the bottom of every article allowing you to upload and and attach documents directly from the article page.

| Joomla

Joomla RokboxThis tutorial was requested by a Joomla training student in our forum. They wanted to make images and videos on their site more interesting by showing them in a pop-up.

Our advice was to try Rokbox from Rockettheme. This extension can place images, videos, audio files, flash files or even entire websites inside a pop-up. This plugin is also available for WordPress.

We're going to show you several ways to use Rokbox on your site:

Installing Rokbox

  1. Rokbox can be downloaded from the downloads section of Rockettheme.com.
  2. Download both the "Content" and the "System" plugins. If you're using Joomla 1.5, download the top two files. They will be named:
    • Rokbox Content Plugin
    • Rokbox System Plugin
  3. In your Joomla site, go to Administrator >> Extensions >> Install / Uninstall and upload both.
  4. Go to Administrator >> Extensions >> Plugin Manager and enable both.

Testing Rokbox

The normal way of using Rokbox will only work inside articles. Try using this simple example as a test:


That should place Joomla's save button inside a pop-up for you and also generate a thumbnail for you to click on.

If that doesn't work, you may have a problem with generating thumbnails automatically. You can then try one of these two options:

  • Use a text link: {rokbox title=|click here|}images/save.png{/rokbox}
  • Use your own image: {rokbox thumb=images/save.png}images/save.png{/rokbox}

Using Rokbox in Articles

There are lots of examples on the Rockettheme demo site: Rocketwerx.com. These are very simple examples to get you started:

  • Remote images: {rokbox}http://www.ostraining.com/logo.png{/rokbox}
  • Audio files: {rokbox}images/audio/example.mp3{/rokbox}
  • Flash files: {rokbox}images/flash/example.swf{/rokbox}
  • Youtube videos: {rokbox}
  • Another website: {rokbox}http://www.google.com{/rokbox}

Using Rokbox Outside of Articles

You can use Rokbox in your other extensions. The only thing you need to do is modify your links so that they contain rel="rokbox".

For example < a href="http://google.com" > becomes < a href="http://google.com" rel="rokbox" >  (I've added a space after each < and before each > so you can see the code)

We've used this technique inside many different extensions.

Configuring Rokbox

There are three places where you can configure options for Rokbox:

1) Inside Extensions >> Plugin Manager >> Content - RokBox

Here you can change the settings for the thumbnails that Rokbox generates automatically:

Roxbox Content Plugin

2) Inside Extensions >> Plugin Manager >> System - RokBox

Here you can select from several different themes for Rokbox. The default is "Light" which provides a white background, but there are others:

Roxbox System Plugin

If you enable "Legacy Parameters", you'll also get a much wider range of options. Full documentation on those is available on the Rocketwerx site.

3) For Individual Pop-Ups

We saw some examples earlier. Here are some ways you can modify individual pop-ups:

  • Set files sizes: {rokbox size=|400 100|} ... this will show an image, flash or video file as 400px wide and 100 high.
  • Set website sizes: {rokbox size=|65% 80%|} ... this will show a website as 65% of it's normal width and 80% of it's height.
  • Custom thumbnail: {rokbox thumb=|images/example.jpg|} ... so you don't have to use the one automatically generated by Rokbox.
  • Custom title: {rokbox title=|This is a cool image|} ... this is what people will click on to see the pop-up, or if there's a thumbnail, this is what they will see if they hover their mouse over the thumbnail.

| Drupal

This week's tutorial was requested by a student in our Drupal forum. They wanted to know how to add a slideshow to their Drupal site.

We recommend a module called Content Glider which allows you to show a slideshow in a block.

Installing Content Glider to Your Drupal Site

  • Step 1: Visit http://drupal.org/project/content_glider to download the latest version of "Content Glider".
  • Step 2: Extract the files into a folders on your desktop. The folder will be called "content_glider".
  • Step 3: Login to your site's files via FTP and navigate to /sites/all/. If there isn't a folder called /modules/ here, create one.
  • Step 4: Upload the "content_glider" folder to /sites/all/modules/
  • Step 5: Go to Administer >> Site building >> Modules and enable Content Glider.

Configuring Content Glider

Step 1: It's best to create a new content type for the slideshow, so we don't get mixed up with our other nodes.

  • Go to Administer >> Content Management >> Content Types
  • Click "Add Content Type" and create a type called "slideshow"

Step 2: Now we can go and configure Content Glider:

  • Go to Administer >> Site Configuration >> Content Glider
  • Put "slideshow" into the "Content type for Glider 1:" field.
  • Click "Save Configuration.

Step 3: Next, let's make Content Glider live on our site:

  • Go to Administer >> Site Building >> Blocks
  • Publish the "Content Slider 1" block onto your site.

Step 4: Finally we can create the content for the slideshow.

  • Go to Create Content >> Slideshow
  • Start adding the nodes that will appear in your slideshow ...

| Drupal

This week's tutorial is the second of a two-parter. We've had several students in our classes looking to build websites with multiple content authors ... blogs, newspapers, university sites and more. A common request is to improve Drupal's default handling of nodes.

In the first part we covered how to give people easy to a list of their own nodes, using a module called workspace.

In this second part we're going to create a workflow, allowing you to choose who has control over a node. A newspaper website is a great example - a writer may submit an article which is then passed to the copy-editor for checking and then to the editor for approval and publication.

In Part 1 we used the "Workspace" module. This time we're using the "Workflow" module.

Installing Workflow to Your Drupal Site

  • Step 1: Visit http://drupal.org/project/workflow to download the latest version of "Workflow".
  • Step 2: Extract the files into a folders on your desktop. The folder will be called "workflow".
  • Step 3: Login to your site's files via FTP and navigate to /sites/all/. If there isn't a folder called /modules/ here, create one.
  • Step 4: Upload the "workflow" folder to /sites/all/modules/
  • Step 5: Go to Administer >> Site building >> Modules and enable Workspace.

Configuring Workflow

Go to Administer >> Site building >> Workflow and click "Add workflow". You'll be at the start of the process:

  • Workflow name: Enter a name for your workflow.
  • Workflow states: You'll be asked for the different stages of the workflow. They example used by the module is "if you were doing a meal workflow it may include states like shop, prepare, eat, and clean up." Ideally you'll have several states. This is an example that a newspaper might use: Drupal Workflow
  • Nodes: You can then choose which nodes your workflow applies to:Drupal Workflow
  • Moving Through the Workflow: Click "Edit" next to your workflow and you'll be able to choose which user groups are in control at which stage. The workflow moves from left to right and you are choosing who can initiate the transition from one stage to the next.  Drupal Workflow
  • Managing Nodes in the Workflow: At the very bottom of this page you can decide what control people have over the articles in each state: Drupal Workflow
  • Tab: Mid-way on this screen you'll find "Workflow tab permissions" and you can control who sees the "Workflow" tab when they're looking at a node. This is how your users will move article through the workflow. At the top of the nodes they will see this added tab:
    Drupal Workflow
  • Using the Workflow: Once users click on the Workflow tab, they'll be able to change the state of the article and decide when:
    Drupal Workflow

| Joomla

Lots of websites use a discussion forum to help their users.

  • Some websites have forums for people to chat freely on whatever topic they choose.
  • Other websites use forums to provide support. People post their questions and staff members reply with the answer.

Our choice of discussion forum for Joomla is Agora from JVitals.com. We use Agora to support our Joomla training students and in this tutorial we're going to show you how to set it up on your site.

Agora Forum

Installing Agora

  1. Agora can be downloaded from the downloads section of AnythingDigital.com.
  2. Download the Agora component to your desktop. It will have a file name similar to com_agora_3.0.12.zip
  3. In your Joomla site, go to Administrator >> Extensions >> Install / Uninstall and upload Agora.
  4. Go to Components >> Agora Forum and you should see a Control Panel in front of you:

Agora Forum

Configuring Agora

The first place to start with Agora is to make it visible so that you can see how it appears on your site:

  1. Go to Menus >> Your choice of menu >> Click "New"
  2. Click "Agora Forum", enter a title for your menu link and click save.
When you visit that link on the front of your site, you'll see Agora but without any content. The first thing you need to do is add some categories. If you're running a movie forum, these might be "Romance", "Action" and "Drama". As we run a Joomla forum, we have "Extensions", "Templates" and more.
  1. Go to Components >> Agora Forum and click "Categories & Forums"
  2. Agora classifies "Forums" as the top-level and "Categories" as the second-level. This is an example of how ours are set-up. "Drupal" and "Wordpress" are Forums. "Newcomers" and "Anything" are categories and this is what people post into:


  3. To set these up, start by clicking on "Add Forum" in the top-right corner.
  4. Once your forums are set-up, you can click "Add Category" to finish your set-up.

Agora Groups

You can create groups of users who have access to different forums and categories. For example, we allow our Drupal students access to the Drupal support forum but not Wordpress or Joomla:

  1. Go to Components >> Agora Forum >> Groups. Click "New" and name your group.
  2. Go to Components >> Agora Forum >> Categories & Forums and open a particular category.
  3. Click "Add Group" in the top-right corner and you can give that group access to the category.
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