One of our users was accidentally locked out of his Joomla administrator by Admin Tools. He had triggered a strict security feature in Admin Tools that denied him access, even though he was a super user.

The error he received was this:

I'm going show you two methods to disable Admin Tools. This will allow you to login again in the admin area of Joomla, fix the issue, then reenable Admin Tools.

Method #1: Disable the plugin through phpMyAdmin

• Access phpMyAdmin through cPanel:

1. Choose the database
2. Find "prefix_extensions" table (where prefix is the unique value of your database tables)
3. Browse
4. Filter rows with for plugin's name: "System - Admin Tools"
5. Edit the record from the results area

• Change the "enabled" value to 0

Method #2: Rename plugin folder

By using an FTP client like FileZilla^[1] or through cPanel File manager^[2]:

• Go to the plugins/system/admintools folder
• Rename main.php file to main-disable.php

Now login in the administrator area to confirm the fix is indeed working.

Revert changes

Once you are logged into your site, make sure to fix the issue that prevented you from logging on. This fix is normally done via Components > Admin Tools > Web Application Firewall.

Once you have fixed the problem, you can revert the changes you made via Method #1 or Method #2.

One of our users asked for a way to exclude the visits that his employees make to his website from Google Analytics.

In this tutorial, I'm going to show you how to add a filter to exclude visits from Google Analytics based on your IP address.

Step #1. Log in

Step #2. Add a filter

Select your site. In my example I'm choosing my personal website:

1. Admin
2. All filters
3. Add filter

1. Set a Filter name
2. In Filter type choose "Predefined"
3. Select "Exclude"
4. In Select source or destination choose "traffic from the IP addresses"
5. Select expression: "that are equal to"
6. Type your ip address. An easy way to know your IP is by going to the "What is my IP" site^[1].

• In Apply Filter to Views, select "All web site data"
• Add to move to "Selected views" area:

• Click Save when you're done.
• Repeat the process to create a new filter for other IP addresses.

One thing to note is that this solution is better for large offices with a static IP address. If you are working from home, your IP address may change regularly. In that case, try getting a WordPress plugin, Drupal module or Joomla extension that will exclude your administrator visits.

I'm going to show you how to create a video gallery on your Joomla site.

OSYouTube^[1] is the best Joomla plugin for embedding YouTube videos. Template overrides is the best way to safely change the design of your site.

We're going to use OSYouTube and template overrides to create a stylish grid of videos.

Step #1. Download and Install OSYouTube

• Go to Alledia.com^[2] and download the OSYouTube plugin.
• Install through Extensions > Manage > Upload and Install.

Step #2. Create the content

First, let's create a category. In my example I'm going to call it "Videos":

• Content > Categories > Add new category.

Now, let's create articles assigned to the new category:

• Content > Articles > Add new article.
• Set a title.
• In the body, paste the URL of a YouTube video:

• Assign the article to the new category.
• Save when you're done.
• Create as many articles you need. Each article should include a single video.

Step #3. Download a small CSS library

We will use a small CSS framework we built for Simple Renew, one of our Joomla extensions.

• Download the complete repository from here^[3]
• Decompress the zip
• Look for grid.css and grid-responsive.css files inside src/media/css/

Step #3. Create a custom template override

• Create a new folder inside templates/your-template/html/ named "mod_articles_news"

• Upload the CSS files from previous step into a new folder to: templates/your-template/html/mod_articles_news/css/

• Create a php file named "grid.php" saved in "mod_articles_news" with the code below:

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_news
 *
 * @copyright   Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */
defined('_JEXEC') or die;
$app = JFactory::getApplication();
JHtml::_('stylesheet', 'templates/' . $app->getTemplate() . '/html/mod_articles_news/css/grid.css');
JHtml::_('stylesheet', 'templates/' . $app->getTemplate() . '/html/mod_articles_news/css/grid-responsive.css');
$columns_ = 3;
$count_   = 1;
?>
<div class="ost-container <?php echo $moduleclass_sfx; ?>">
    <?php 
    foreach ($list as $item) : 
    
        if ($count_%$columns_ == 1) echo '<div class="ost-section">';
        ?>
        
            <div class="block<?php echo round(12 / $columns_); ?>">
                <?php require JModuleHelper::getLayoutPath('mod_articles_news', '_item'); ?>
            </div>
        
        <?php 
        if ($count_%$columns_ == 0) echo '</div>';
        $count_++;
        
    endforeach; 
    if ($count_%$columns_ != 1) echo '</div>';
    ?>
</div>

From the PHP file, the following code will load the two CSS files that will provide grid and responsive support:

JHtml::_('stylesheet', 'templates/' . $app->getTemplate() . '/html/mod_articles_news/css/grid.css');
JHtml::_('stylesheet', 'templates/' . $app->getTemplate() . '/html/mod_articles_news/css/grid-responsive.css');

$columns_ is a variable to control the opening and closing tags dynamically. Change the value to display a different number of columns per row; in our example we will display 3 columns and each one will contain a video.

$columns_ = 3;

Print the CSS class depending on the value assigned to $columns_. It would generate classes such as "block4" (3 columns), "block6" (2 columns), "block3" (4 columns), etc.

<div class="block<?php echo round(12 / $columns_); ?>">

The structure of the files should look like this:

Step #4. Create a Newsflash module

• Go to Extensions > Module manager > New.
• Choose Articles - Newsflash.
• Select the category.
• In Advanced > Alternative layout choose "grid".

Set the params as in the screenshot below:

Step #5. The end result

Go to the front of your site to check out how it looks, the content will update automatically thanks to the Newsflash module:

Welcome to the third post in our series about Widgetkit, the Joomla toolkit from YOOtheme.

In the previous post^[1], we created some widgets to show photo galleries and maps. In this post, I'm going to show you how to create more widgets, including Twitter integration, a Grid Stack display of articles and a slideshow.

Overview of Widgetkit integrations

By default Widgetkit allow you to pull from all core Joomla data sources. If you use a CCK like K2 or Zoo (YOOtheme’s own CCK), Widgetkit will discover these automatically and allow them to be used as a source.^[2]

Some extension developers also provide Widgetkit integrations: Zoolander^[3] is one example.

You can even build your own integrations if you’re skilled enough: the Yootheme documentation^[4] provides some examples.

Example 1: Twitter integration

Twitter is Widgetkit data source, which means that you can display your Tweets in any format you would like, simply by selecting a presentation type. Let’s keep things simple for this example and use a Grid, which is probably the most appropriate use for Twitter.

• Go to your Widgetkit component, click New.
• Select Twitter as the source and Grid as the presentation type.
• Source: Either a Twitter user or a search term, such as a hashtag. In this case I simply chose the @ostraining Twitter account. Also I only chose tweets with media attached.
• Twitter API: In order to make the Widget work with Twitter, it needs access to the Twitter API. For this, you have to request a Pincode, which is basically just clicking on the button in the Widget.
• Settings: This allows you to style your Twitter widget and create a nice grid. If you use the Widget in a sidebar, 1 column is probably fine, but I used the Widget in a separate page, so I made a 4-column widget. Also you can specify whether you want all details from the Tweets or just a few.

In my case this resulted in a nice grid of 4 columns, nicely displaying the latest Tweets with images attached. Even in my Protostar template this gives me a really nice view:

Example 2: Joomla article integration with a Grid Stack

Now we are actually going to use Widgetkit to display some articles in an elegant way.

First, you need some existing articles on your site. I just created 4 articles with some dummy text and an intro image from the demo images supplied with every Joomla install.

• Go to your Widgetkit component, click New.
• Select Joomla as the source and Grid Stack as the presentation type.

This will give us a display where the articles are shown in rows, with the image either aligned left and right.

The Content settings are really easy now, as I already have my content in Joomla. I just have to specify the category from which I want to pull the articles. I can also specify how many articles I want to show, how they are ordered and what the mappings are:

Again we use the Settings tab to tell Widgetkit how are widget needs to be formatted. Most of the defaults are often fine, or enough to use as a start. In this case, I did some minor tweaks by setting a fixed size for the images to obtain a standard look (which nicely crops a portion of the images, with aspect ratio intact).

The only thing I would like to be added to Widgetkit is the ability to set the Read More setting from the widget. Currently it simple respects the Read More that you choose in the Joomla article.

Example 3: Joomla integration with a Slideshow

In the third example, I'm going to use the same set of articles that I used to create the Grid Stack, but now I am going to build a Slideshow:

Create a new widget, select your Joomla Category again and build the layout from the Settings tab again. I mainly left the defaults as they were, except for a Thumbnail navigation. In this case this resulted in a very nice display of my articles in a slideshow with the image as a background and the text in an overlay. The images of the other articles are used as the navigation between the articles in the slideshow:

You see, 2 completely different layouts from the same source. Just as easily, you can build Tabbed navigations or a Parallax module. Also, these layouts were created extremely easily and quickly, in just a few minutes.

Good luck with building your own Widgetkit widgets!