Home
All Tutorials: See an overview of Joomla tutorials on this site with the Phoca Documentation plug-in. More ...

About: Why this website? - Learn more why we do it and share our Joomla knowledge for free saving you time and money! More ...

Coming Soon - Our Free E-Book: We are compiling the best tutorials in a free Joomla E-Book. More is coming soon.

Our Favorite Tutorials: Check out our personal top 10 Joomla tutorials that will optimize your web presence. More ...


Feedback: We love to hear from you. Please leave a note with !JoomlaComment 4 in our tutorials or on the feedback page. More ...
News: Check out the latest news on Joomla development, components and other extensions that matter to us. More ...


Featured Tutorials

Maps and Graphs


Building a Project Indicator Page with AmCharts Line Graphs

no3DThis is the second article in a series on building indicator pages for your Joomla website. Below are examples of interactive line graphs produced with AmCharts. Please see also our other tutorials on AmCharts in this section.

 

Please note that most graphs are animated like the one you see below. To see the animation of other graphs when they load into the page, you may have to scroll down to the graph and reload the page in the browser. The page will reload and you will see the animation (only for pages with multiple charts).

 

You need to upgrade your Flash Player

1: Auto resizing chart

You need to upgrade your Flash Player

2: Chart with data gaps

You need to upgrade your Flash Player

3: Chart with scroller

You need to upgrade your Flash Player

4: Data in html

You need to upgrade your Flash Player

5: Multiple Charts - Two charts with different settings and data sets

You need to upgrade your Flash Player
You need to upgrade your Flash Player

6: Stacked charts

You need to upgrade your Flash Player

7: Interactive chart with value indicator plugin

You need to upgrade your Flash Player

0: Interactive chart [This line is replaced by a file repository when the article is viewed]

A few things to remember:

  • The path to the background image, if any, is set in the data file;
  • Some graphs use xml and others txt for data - remember to refer to the right extension in the html;
  • You only need one reference to the swfobject.js on a page;
  • Do not forget to copy all the files from the amline folders such as the fonts and plugins and patterns, the shockwave flash file and export files;
  • Rename each flashcontent file twice for each script;
  • The background image path is set in the settings.xml - make sure you only refer to directory where the file is located../name subdirectory/name.jpg - a full path with http:// etc does not work;
  • The plugin path is set in the settings.xml - make sure you only refer to directory where the file is located../name subdirectory/name.jpg - a full path with http:// etc does not work;
  • The SWFs in graphs' path is set in the data.xml - make sure you only refer to directory where the file is located ../name subdirectory/name.jpg - a full path with http:// etc does not work.
  • Data and setting files are case sensitive. If you use "setting1.xml" in the html but the file on the server is "Setting1.xml", it will not work.
  • And for those interested in the code, here is an example:
  • {spic}
  • <!-- amcolumn script-->
    <script type="text/javascript" src="http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/swfobject.js"></script>
    <div id="flashcontentl0">
    <strong>You need to upgrade your Flash Player</strong>

    </div>

    <script type="text/javascript">
    // <![CDATA[
    var so = new SWFObject("http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/amline.swf", "amcolumn1", "700", "400", "8", "#FFFFFF");
    so.addVariable("path", "http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/");
    so.addVariable("settings_file", encodeURIComponent("http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/amline_settings.xml"));
    so.addVariable("data_file", encodeURIComponent("http://www.test.developmentwork.net/jsmallfib_top/Indidators/line/amline_data.xml"));
    so.addVariable("preloader_color", "#999999");
    so.write("flashcontentl0");
    // ]]>
    </script>
  • {/spic}
  • Typography


    Tabs and Slides in Joomla

    Interested in inserting tabs and slides in your Joomla article?
    We made the tabs and slides below with the tabs and slides plugin from Joomlaworks. A great little plugin.

    first tab


    some text
    here

    other tab


    some more text here


    And some more text after the tabs!

    Or use this:


    You can insert as much text here as you like, insert images ....


    You can insert as much text here as you like, insert images ....
     

    Settings

    Inserting HTML and Scripts in Joomla Articles

    Inserting html and scripts directly in Joomla articles (not using modules) or the plain html editor can be tricky. The reason: Joomla's standard editor TinyMCE and others automatically clean articles from tags such as applets and scripts when it saves an article.

    This is perhaps one of the most frustrating aspects of Joomla. Especially if you want to use the interactive tools we present on this site, you need to have the ability to call scripts in an article.

    We use Sourcerer to solve this issue. Developed by NoNumber, a high quality Joomla extension developer, the plugin allows you to insert scripts in pages without changing any of the Joomla settings. All you need to do is insert the code between two tags.

    Sourcerer

    Please keep in mind that you insert the tags and the script directly using the WYSIWYG editor (see picture above) and not in the html view of the editor.

    For more info, please visit the NoNumber website.

    Photography/Galleries

    Phoca Gallery For Large Photo Repositories

    For large repositories of photos, we recommend that you use Phoca gallery. A great feature of the component, by Phoca, is the automatic generation of galleries - and thumbnails - based on the directory structure on the server. You place the folders with images in the images/phocagallery folder. Please ensure that there are no spaces in the names of the pictures, otherwise it will not work. We also had to change the permission of the thumbs folder to 0755 in the folder where we placed the images. In addition, we were struggling a while to get SEF working with the component. We initially got 404 errors when we clicked on a thumbnail using the article plugin that comes with the component.

    This plugin allows you to insert a gallery in an article (see below).

    STS129_007
    STS129_030
    STS129_032
    STS129_038
    STS129_041
    STS129_042
    STS129_055
    STS129_056
    STS129_058
    STS129_069

    To solve the SEF issue with the plugin that allows you to place a gallery in an article, you need to do the following:

    Step 1: Create a new menu item (or a new menu) and make a link to the Phoca Gallery Component.

    Step 2: Go to the modules section and enable the new menu if you have created one for this purpose.

    Step 3: Use a menu position such as Phoca (one that does not exist in your template) if you do not want to display the menu in a template position. We used the position Phoca so we can load a menu in this article using load position.

    Below is an example of phocagallery with pictures we took of the launch of the STS 129 Space Shuttle. For this example we linked the phoca gallery component directly to a menu item  - not using the plugin.

    We recommend you that use any the "simple gallery" plugins if you want to use a gallery in an article and that you use Phoca gallery for large photo depositories linked to a menu. Please click on the link below to see Phoca Gallery in action linked to a menu item:

    From NASA:

    Commander Charlie Hobaugh will lead the STS-129 mission to the International Space Station aboard space shuttle Atlantis. Barry Wilmore will serve as the pilot. Mission Specialists are Robert Satcher, Michael Foreman, Randy Bresnik and Leland Melvin. Wilmore, Satcher and Bresnik will be making their first trips to space.

    The mission will return station crew member Nicole Stott to Earth. STS-129 is slated to be the final space shuttle crew rotation flight to or from the space station.

    Atlantis will deliver parts to the space station, including a spare gyroscope. The mission will feature three spacewalks.

    STS-129 is the 31st shuttle mission to the station.


    Search Engine Optimization

    Using Google Adsense in Joomla

    If you are interested in placing advertisements on your Joomla site, we do recommend you use Google's Adsense Tools directly and stay away from extensions that provide adsense capability.

    Step 1: Register with Google Adsense. It is for free and within a day or so you will normally get Google's approval to participate in the plan.

    Step 2: Using Adsense Setup, manage ads and get an ad.

    Step 3: In the custom html module, you insert your Adsense code for the add. Make sure the editor does not strip the code. Choose the position of the module.

    Step 4: If you want, you can change the color of links, the border etc. using the manage my ads. We made it red for this website to keep the colors under control.

     

    Data Recovery


    Installing a Joomla Test Site

    agt_utilitiesEveryone tells you to do it, but few actually do install a Joomla test site on their home computer. Why is it so complicated? Actually it is not! The following tutorial will help you to set up a test site on your home computer using WAMP. A Joomla test site allows you to you play with all extensions and settings without compromising your production site. It is fairly simple to set up a Joomla site at home by following the next steps (for windows computers only):

    Step 1: Get the WAMPServer packageand install this on your computer. WAMP stands for Windows, Apache, MYSQL and PHP, the ingredients needed to run Joomla on your home computer. To learn more about trouble shooting a WAMP installation and cloning your production website, please click here.

    Step 2:Download the latest Joomla production version from the Joomla website. It comes in a zip file.

    Step 3:Make a new folder in the C:\wamp\www folder: for example C:\wamp\www\Joomla Test Site and unzip the zip file in this directory. You will see the following files in the directory:

     

    Joomla_installation_files

    Step 4: Start WAMP and type localhost in your browser to open the WAMP administrator page. Under "Your Projects" click on the Joomla Test Site and you will see the following screens:

    Step 4.1: Select the language and click on next.

    Joomla_Installation_1

    Step 4.2: Hopefully everything looks like the screen below and click on next.

    Joomla_Installation_2

    Step 4.3: Click on next to accept the license.

    Joomla_Installation_3

    Step 4.4: This is an important step in the installation where most people make the mistake filling out a password - YOU SHOULD NOT DO THIS! WE ENTER A PASSWORD LATER IN THE INSTALLATION PROCESS. Type in as host name localhost - leave root as username, leave password empty and type in a name for the database (Joomla_Test_Site for example) and click on next.

     

    Joomla_Installation_4

    Step 4.5: Click on next to ignore the FTP settings.

    Joomla_Installation_5

    Step 4.6: Please enter the name of your site, an email address and the password you will need to login in the administrator section of Joomla. If you want, you can also install the sample data (you need to do this before you click on next).

    Joomla_Installation_6

     

     

    Step 4.7: The next step is to delete the installation directory.

    Joomla_Installation_7

    You can find the installation folder in C:\wamp\www\Joomla Test Site\... and just simply delete the folder.

     

    Joomla_installation_files1

     

    Step 4.8:We should be all set. Type in localhost in the browser and click on the new Joomla Test Site in the list of project. Alternatively, you can also type in localhost/Joomla Test Site/administrator:

     

    Localhost_address

     

    You should be seeing the admin login page of Joomla. Your username is admin and the password is the one you entered in step 4.4. You can change these in the Joomla User Manager. You now have your own Joomla test site!

    Joomla_Installation_9




    Developer: Gregory Maassen

     

    How Did You Do This?


    Inserting Post-It Notes in your Joomla site is not difficult. To learn what module to use, please visit our tutorial with more details.

    Search Tutorials