Showing a Google Calendar Inside Joomla

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

Go to Your Google Calendar

tutuploadsmedia_1272046789496.png

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

Find the Calendar ID

tutuploadsmedia_1272046955739.png

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

tutuploadsmedia_1272047075763.png

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

Download the GCalendar Component

tutuploadsmedia_1272044364223.png

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

Extract the GCalendar Folder

tutuploadsmedia_1272044636422.png

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

Install GCalendar

tutuploadsmedia_1272044447710.png

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

Go to the GCalendar Component

tutuploadsmedia_1272045144592.png

Go to Components >> GCalendar >> GCalendars

Creating a New Calendar

tutuploadsmedia_1272046386573.png

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

tutuploadsmedia_1272045038607.png

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

Choose the Calendar

tutuploadsmedia_1272046474164.png

Choose the calendar you created and click "Save".

Your Calendar Should Be Ready ...

tutuploadsmedia_1272046596590.png

Using Docman to Handle Documents in Joomla

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

Download Docman

tutuploadsmedia_1272041248125.png

Visit https://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

tutuploadsmedia_1272041556210.png

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

Install Docman

tutuploadsmedia_1272041323635.png

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

Add a New Category

tutuploadsmedia_1272042051261.png

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

Name and Save the Category

tutuploadsmedia_1272042212648.png

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

Start Uploading Documents

tutuploadsmedia_1272042267260.png

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

Choose Upload Option

tutuploadsmedia_1272042357359.png

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

Upload Your File

tutuploadsmedia_1272042423934.png

Browse to find your file and then click "Submit"

Choose to Make a New Document

tutuploadsmedia_1272042580071.png

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

tutuploadsmedia_1272042686721.png

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

Verify that Your Document is Created

tutuploadsmedia_1272042778921.png

Hopefully your new document will appear as above.

Make a Menu Link to Docman

tutuploadsmedia_1272042852079.png

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

tutuploadsmedia_1272042932047.png

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

tutuploadsmedia_1272043142684.png

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

tutuploadsmedia_1272043306950.png

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

tutuploadsmedia_1272043428694.png

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

Place an Image Inside a Joomla Module

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

tutuploadsmedia_1271937916289.png

Go to Administrator >> Extensions >> Module Manager

Click to Create a New Module

tutuploadsmedia_1271937999131.png

Click "New" in the top-right corner

Choose "Custom HTML"

tutuploadsmedia_1271938072014.png

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

Find Your Image

tutuploadsmedia_1271938182926.png

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

tutuploadsmedia_1271938354509.png

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

Configure the Module

tutuploadsmedia_1271938396619.png

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

See the Image On Your Site

tutuploadsmedia_1271938498634.png

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

Changing the Joomla Homepage to a Different Component

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

tutuploadsmedia_1271727262308.png

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

tutuploadsmedia_1271727341136.png

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

Step 3: Changing the Homepage

tutuploadsmedia_1271727397884.png

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!

tutuploadsmedia_1271727485458.png

"Joomla License" is now your homepage.

Adding Downloadable Products to Virtuemart

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

Access Your Virtuemart Configuration

tutuploadsmedia_1271694570542.png

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

Access the Downloads Tab

tutuploadsmedia_1271695294494.png

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

Open an Existing Product

tutuploadsmedia_1271695452744.png

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

Have a Virtuemart Product Open

tutuploadsmedia_1271695513112.png

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

tutuploadsmedia_1271695579136.png

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

tutuploadsmedia_1271695714498.png

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

tutuploadsmedia_1271695768621.png

UTF-8 in Joomla

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: UTF-8 in Joomla

Place Joomla Images and Videos in a Pop-up

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:

{rokbox}images/save.png{/rokbox}

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}https://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}https://www.youtube.com/watch?v=4BY40QvWQKE{/rokbox}
  • Another website: {rokbox}https://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="https://google.com" > becomes < a href="https://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.

Slicing up the Status Quo of Joomla Extension Design

ninjaforgeOne of the greatest things about Joomla is it's extendability. If you need a forum, a shop solution, a module to display weather, etc., you can bet there's probably a solution available. With over 4,600 extensions listed in the Joomla Extensions Directory at the time of this writing, Joomla users are presented with a myriad of options to extend the base functionality of their Joomla powered site.

While having such choice is an awesome thing for the Joomla end user or site developer, it can at times present some 'formatting' issues. Often times the end user might find themselves out of luck, going back and forth between a template provider and extension developer for support, with each pointing the finger at the other as the cause of a formatting issue.

Perhaps it's time to start slicing up the status quo and approach extension 'design' from a new direction.

Read more: Slicing up the Status Quo of Joomla Extension Design

How to Automatically Add Joomla Links to Keywords

This tutorial is the answer to two questions we've been asked repeatedly:

  1. How can I automatically link keywords to the appropriate websites?
  2. How can I use internal links for links on my site?

Essentially they're looking to change a link from https://www.cnn.com to https://www.ostraining.com/link/cnn/. The link still goes to the CNN website, but it first goes to a url on the webmaster's own site.

Why Would People Want to Automatically Link Keywords to Pages?

This is what Wikipedia, the New York Times, Techcrunch and many other websites do in order to keep visitors browsing around their site. It also has substantial SEO benefits. To find out more, see Session 25 of our SEO class: Understanding Internal Linking.

Why Would People Want Internal URLs for Links?

  1. Statistics. They want to be able to count how many time a link has been clicked on.
  2. SEO. Some webmasters are worried about leaking their Google Page Rank to other sites. I am not a big believer in this technique, but I know several people who consider this to be important.
  3. Affiliates. People running affiliate programs want to protect their affiliate links:

    • They think internal urls are more likely to be clicked than a url that looks like this: https://www.anrdoezrs.net/click-2660093-10423359
    • Some people deliberately avoid clicking on affiliate links
    • There are even rumored to be some computer-based viruses that are capable of inserting the spammer's affiliate ID into links to popular affiliate programs when people are browsing.

How to Create Internal URLs for Outbound Links

  1. Go to Administrator >> Components >> Weblinks
  2. Click "Categories" and then "New". Create a category for the kind of link you'd like to add. In this case, it will be "Media"
  3. Click "Links" and then "New". Add entries for the websites you'd like people to visit:
  4. bbc

  5. If you're using Search Engine Friendly URLs, the URLs created will look like this: /weblinks/media/keyword/. If you're not, the URLs will be in this format: /index.php?view=weblink&catid=2:media&id=keyword&option=com_weblinks&Itemid=48

Automatically Add Links to Keywords

We're going to use a small plugin called the "Weblinks Content Plugin":

  1. Download the plugin from https://joomlacode.org/gf/project/weblinks/
  2. Go to Extensions >> Plugin Manager and enable the plugin.

That's it. Now every time you mention an entry in your Weblinks component it will be automatically linked. For example, these are our three recommendations for Joomla hosting companies: Rochen, Bluehost, Hostgator or even the example we gave earlier: BBC.

As people click on these links, you can see how many times they've clicked by going to Components >> Weblinks and looking at the "Hits" column:

count

Free video lessons from Joomlashack University

YouTubeJoomlashack University is a Joomla video tutorial motherload. And now two of our video lessons are free on our YouTube channel!

With more than eight hours of professionally produced instructional videos, Joomlashack University provides a wide range of online lessons and courses to teach you Joomla inside out.

To give you a sense of the quality and depth of our more than eight hours of video lessons available in our online training course, we've uploaded two that you can now view for free below.

Read more: Free video lessons from Joomlashack University