Virginia Web Designers: Joomla, Drupal, Open-Source, CSS, and PHP Northern Virginia / Maryland / Washington DC web designers

Karole Armitage interviewed by the BBC

Karole Armitage, one of our customers, was just interviewed by BBC America; http://bit.ly/acjzSK.

Recovering super-admin access to Joomla

If for some reason you can’t figure out the superadmin login or password, use phpMyAdmin and go into the jos_users table of your database.

Locate the superadmin user account. It will have a gid (group ID) of 25.

By default its username is admin, but the username may have been (should have been!) changed. It’s a good idea to change it, for security reasons. The “admin” username is the first one hackers will try.

Now, let’s change the password using phpMyAdmin. Edit the user using phpMyAdmin and find the password field. That is MD5-encrypted so we need to think of a new pw and MD5-encrypt it. It should look something like this example:

7da8c7fed439183092er69334b54fe01:UIBWsiwIlkk2wkHCUmC1XxD1tAd1uQgK

You need to generate a new MD5-encrypted password. Do that here:

http://www.iwebtool.com/md5

.. or Google ‘md5 encrypt’ for other similar sites.

Just enter what you want the password to be, and it will tell you the MD5 code for it. Copy that code and put that into the password field in phpMyAdmin. Save.

See if you can log into Joomla and get the full features now using the username you just edited over in phpMyAdmin.

Note that Joomla’s passwords are MD5-encrypted *and* salted, meaning that they have a colon and then a second MD5 string after that. But using an externally generated MD5 string and pasting that in will work, at least for Joomla 1.5.15.

Detect Joomla section ID when viewing an article

Sometimes when you’re coding a Joomla 1.5 template you may want to be know which section an article is in. For example, let’s say you have designed custom navigation buttons (not using any Joomla module, just your own graphics). If you have a button called “About Us”, you’d want it to stay activated when viewing any page in the About Us part of the site. To do this, create a section called About Us, create a category within that, and put all About pages in there. Now you can reliably detect your articles’ section IDs as a way of keeping your button activated on the correct pages.

Add this in your template PHP code;

Now you can use if statements like this;

if($sectionid == ’4′){
echo “this article is in section 4!”;
}

You can use this for customized navigation, for example, keeping certain buttons highlighted when you’re viewing articles within a certain section. It can be used to display a module only if you’re in a certain section, but it’s useful for more than just modules. Enjoy.

New module: Random Youtube Video

download it here

Displays a random video for a specific user. Lets you set the video width and height, control whether to show a “more videos” link or not, and control the wording of that link. Also allows you to display a single YouTube video instead of a random one. It uses the Google Data API for YouTube to grab the user’s video IDs and pick one at random.

Requirements: Joomla 1.5 and Zend 1.9+ (supported by most Apache servers). This has been tested on a LAMP machine (Linux/Apache) but in some cases – Windows servers, perhaps, or if your host doesn’t allow PHP scripts to use the ini_set() function – it may be necessary to manually set the include_path directive in your php.ini to something like ‘include_path = ..:/usr/lib/php:/home/account/public_html/modules/mod_randomyoutube/Zend/library’.

The above assumes your php.ini include_path is /usr/lib/php, but that will be different for every server, so check phpinfo() for that. In the Joomla backend, go to Help > System Info, PHP Information.

Detecting Itemid for a component

A little background: while working on the EventList Twitter Status plugin I got frustrated at having to have an Itemid parameter in the plugin parameters. I wanted the script to automatically append the correct Itemid to the URL that gets submitted to Twitter (via TinyURL). However, it seemed that there’s no built-in way to do this using the Joomla API – not when we’re talking about a backend script. If it were a frontend one, we could easily detect the Itemid contextually, i.e. based on which page is being viewed at the time, for example:

JRequest::getVar(‘Itemid‘);

//(detects current page’s Itemid)

Or to detect the URL of a specified menu item:

$menuitem = “34″; //this can be set manually or by your script
$item = JFactory::getApplication()->getMenu()->getItem( $menuitem );
$url = JRoute::_($item->link . ‘&Itemid=’ . $item->id);

However, the above method means that you must already know the Itemid, since the menu id *is* the Itemid. So it’s only good for detecting the URL.

So how do we find out an appropriate Itemid for URLs created on the fly in the backend?

After scouring a lot of posts on the Joomla forum and elsewhere, and also after reading all the available documentation, I got frustrated and just wrote a quick and dirty query:

$queryitemid = “SELECT * FROM #__menu WHERE type=’component’ AND link LIKE ‘%com_eventlist%view=eventlist%’ ORDER BY id ASC LIMIT 1″;
$db->setQuery($queryitemid);
$itemid = $db->loadResult();

if((!itemid) || ($itemid == ”) || ($itemid == NULL)){
//echo “resorting to backup Itemid detection<br>”;
//if default ‘eventlist’ view not found in menu, look for other menu items and use the first one (lowest itemid)

$queryitemid = “SELECT * FROM #__menu WHERE type=’component’ AND link LIKE ‘%com_eventlist%’ ORDER BY id ASC LIMIT 1″;
$db->setQuery($queryitemid);
$itemid = $db->loadResult();

}

if(($itemid != ”) && ($itemid != NULL)){
$itemid = $itemid;
}

else{
//if EventList is now in a menu, use the Itemid set in the plugin parameters.
$itemid = $this->_params->get(‘itemid’);
}

I used a LIKE query to select the “eventlist” view type for the com_eventlist component. I could have avoided use of LIKE by doing a more complex query, and I’m not sure it would have offered much of a performance gain over this LIKE usage. Maybe if this were a script that’s being run a lot, but this only runs when someone adds an event or venue.

EventList Twitter plugin v 1.5 out

Update your Twitter status when you add an event to the EventList component. Joomla 1.5 native. Comes with language translation capability and includes English and now also French. You can now add venues as well as events, and have them send a tweet. You can turn off tweets for venues, and you can format the date and time however you want. Download at http://www.plethoradesign.com/downloads/.

• v. 1.5: added French language definitions
• v. 1.4: added PHP date() formatting for date & time. Fixed venue addition bug, also allowed for display of venue within event tweet. Removed unused “user layer”.
• v. 1.3: you can now display the event date and time in your tweet.

EventList Venues for Google Earth KML

A Google Earth KML-exporter add-on for EventList 1.0.1 for Joomla 1.5.
It lets you provide visitors a link with which they can directly open or download a KML-format file of all your published venues, complete with venue descriptions, links (if the venue contains one), and automatic creation of markers with latitude and longitude.
That is generated from the basic address information for the venue – you do not need to enter latitude or longitude anywhere. There is just one file to upload, but make sure to read the requirements in the readme.txt file that comes with the zip file.

See it in action here: http://www.novamineralclub.org/calendar. Click on the Google Earth icon at the far right above the calendar.

Download here

Let your users have their own calendars!

A Community Builder plugin that can be displayed as a tab on a user’s personal profile, so each user can have a separate calendar. The user just needs to enter the unique ID of the calendar in the plugin parameters in their profile. You can set a default calendar and time zone, and individual users can set their own time zones and calendars as well. This plugin comes with English and Dutch language files. Tested on Joomla 1.5.14 with Community Builder 1.2.1. It should work with or without legacy mode on. Should function in Joomla 1.0 too, though multilingual functionality probably will not work.

Download it here »

EventList Twitter Status Update Plugin

I just ported the Twitter Status plugin to make it work with the EventList component. When you add an event, it gets posted to Twitter automatically. Just like the original Twitter Status plugin, you can restrict this to particular categories. Very useful for keeping people informed of upcoming events.

Version 1.0 – July 30, 2009. Joomla 1.5 native only. Comes with language translation capability, but only English is included by default. GPL / open-source.

Download it here

Special thanks to Tomasz Dobrzyński, upon whose Twitter Status plugin this was based.

Events and calendars in Joomla

When building sites for customers, I have noticed people often need to announce upcoming events on their sites, and assume they need a full-page calendar displaying a month-view. However, it may in many cases be easier to display a simple list of upcoming events – even as simple as a single page, for example a regular Joomla article. This is especially true when there are not that many events in a  given month. What if you have only two events per month? Is it still sensible to devote all that screen real estate to empty calendar days? It seems more direct to just list the events and their dates in such a case. From the visitors’ point of view, they want to find out what’s coming up, so the fastest way to get them that information is the best way.

The reverse is also true. You may have so many events that it would be silly to cram them on one long page, one after the other. You may even need to set up some event categories, for example academic calendar events versus cultural events.

There are several Joomla solutions (including a couple extensions) that I have used for both ends. In order from simple to complex:

• Simple Joomla article that is manually edited. Requires no additional customer training, but only works for small numbers of events.
• Get a free Google Calendar and embed it. Learn to live with the lack of full control over its styling.
• EventList extension (schlu.net). This is a great open-source extension that displays upcoming events in a very straightforward way. It also lets visitors register (though not pay for) events. With this you can offer visitors RSS feeds and iCal formats of your calendar as well. iCal (.ics) files can be imported into Microsoft Outlook and Google Calendar, and many other calendar applications. It does NOT offer a traditional month/week view except as a module, but that should be fine. Take a look at this recent calendar I did for the Brooklyn Music School.
• JCal Pro, the aptly named Events Calendar (a.k.a. JEvents), for displaying a month, week, or more at a time. JEvents also integrates with DT Register and Community Builder to allow for paid event registrations.
• Take a look at the calendar extensions at Joomla’s site.

Rounded form elements with CSS3

Modern CSS3-compatible browsers such as Firefox and other Mozilla flavors now support rounded corners for form elements. While Internet Explorer 8 may be an improvement over 7, it still does not support the CSS3 standard as well as might be hoped for. Here is an example of what can be achieved:

Without CSS3:

With CSS3:

Note that the second textarea element has a thicker white border, different background color, and different text color. It is easily possible to assign different border colors and radiuses to different elements. It is important to set a background color, even if it is to be the same as the page background color. I have found that if you don’t, your rounded borders may not be displayed.

Sample HTML/inline CSS code:

<form>

<input style=”-moz-border-radius: 5px;-webkit-border-radius: 5px;background-color:#444;color:#fff;border: 1px solid #CCC;” name=”subject” type=”text” />

<textarea style=”-moz-border-radius: 10px;-webkit-border-radius: 10px;background-color:#222;border: 2px solid #fff;color:#fff;” name=”subject”></textarea>

<input type=”submit” value=”submit” />

</form>

PNG fix for IE6

Designing and modifying templates (especially for Joomla) I am increasingly finding PNG’s incredibly useful because they maintain JPG quality but support transparency. Problem is (you guessed it), Internet Explorer 6 doesn’t like them. I overcome this by adding this line of CSS into my template’s HTML file’s <head></head> section – in this case a Joomla 1.5 template’s index.php file:

<!–[if lt IE 7]>
<style type=”text/css”>
img, div {
behavior: url(<?php echo JURI::base().”templates/”.$this->template; ?>/iepngfix.htc);
}
</style>
<![endif]–>

Download iepngfix.htc

I have used this successfully on numerous sites. There are actually some Joomla plugins that achieve the same thing, however I prefer retaining manual control over these things right in the template. If IE6 gives a JavaScript popup warning about DIV elements, you can try to change the above by removing the DIV from the CSS code. Reload and see if the layout has been broken or not.