How to Create a Custom Module Graphic

This tutorial will show you how to make custom image based modules in Fireworks using masking techniques aimed at the Luhs template design. Navigate to your downloaded package to the Graphic Source Files folder and open custom_module_graphic.png in Fireworks.

If you would like to see a video of this tutorial as well you can download the QuickTime movie here.
How to Create a Custom Module Graphic
Small 640x480 (1.5 mb)
Large H.264 1080 (13.5 mb)

You will see a screen similar to this one.
(click for larger)

How to Create a Custom Module Graphic

How to Create a Custom Module Graphic

Choose the SubSelect tool.

How to Create a Custom Module Graphic

Draw a box over the shape just large enough to select the corner nodes as shown below.

How to Create a Custom Module Graphic

The corner nodes are sub-selected.

How to Create a Custom Module Graphic

Hold down Shift to keep the mouse straight or use the arrow keys to resize the shape vertically.

How to Create a Custom Module Graphic

The shape is resized.

How to Create a Custom Module Graphic

Choose the select tool.

How to Create a Custom Module Graphic

and select the top shape.

How to Create a Custom Module Graphic

Choose Edit > Cut.
The shape is loaded onto the clipboard.

How to Create a Custom Module Graphic

Select the image and resize it. (Cmd+T)
You can temporarily lower the opacity in the layers palette to see the underlying shape.

How to Create a Custom Module Graphic

Once resized, choose Modify > Mask > Paste as Mask.

How to Create a Custom Module Graphic

You can return the opacity back up.

Tutorial Image

Use the text tool to add some graphic text to the image.

Image 14

Select all by choosing (Cmd+A) , then right click the graphic and choose "Insert Rectangular Slice"

Whwn the popup appears asking you to choose Single or Multiple slices, choose "Single".

Image 15

How to Create a Custom Module Graphic

Name the slice in the properties palette to "custom_mod"
*If not shown choose Window > Properties to show the palette.

The last step is to export the image to a place on your local computer by choosing File > Export.

Choose "Images Only" and make sure the name of the file is "custom_mod.png"

To convert to a module just log in to your Joomla admin console and choose New.

Paste the code below into the editor ( in html edit mode) with these settings and save.
Show Title = No
Published = Yes

<div align="center"><img style="margin: 0px;" width="194" height="173" src="http://yourdomain.com/path/to/images/stories/custom_mod.png" alt="Alt Description" title="My Description" /></div>

Important. Modules in the Lush Template right hand position must be no larger than 194px wide!

10 Steps to Mastering Joomla

So you want a website, and you have heard some of the buzz about open source.

Joomla, Drupal and Wordpress have all been mentioned, but you are lost and confused.

No problem, this guide is an easy 10 step process to getting started with building a website with Joomla and some insider tricks and tips to make sure you are making best use of it.

We are going to look at the following things:

  1. Why do you need a website, and why use Joomla?
  2. What actually is Joomla?
  3. How do I install Joomla?
  4. How should I set up my site?
  5. Picking a Template
  6. Organizing Content
  7. Creating Navigation
  8. How can I add features to my site?
  9. How can I make Joomla better for SEO?
  10. How do I keep my site updated, and what lies ahead (Joomla 1.6)

You think you need a website... but why?

Joomla vs Drupal vs Wordpress

Unless you have clear goals, your website will not have any focus, and not contribute to your organization's goals.

  • A restaurant might want to increase onsite foot traffic
  • A non-profit might want to increase donations
  • A consultant might want to increase sales leads
  • A school might want to communicate better with parents

But unless you identify your goals, you are building your site blindfolded!

But what shall I use?

Joomla, Drupal or Wordpress?

Why Use Joomla?

Joking aside, Joomla is an excellent solution that lies in the middle of Wordpress's ease of use and the flexibility of Drupal.

Resources


Joomla is an open source content management system.

So what does that mean?

  • Open Source means that anyone can contribute to the code, improve it, or distribute it. This means the platform is a living project being created and improved by a community of developers all over the world.
  • A content management system uses a database to place content into designated places on the web page. Its dynamic and in real time.

Let's look at a forum as an example

Example of a database website

Joomla works the same way, the template creates "buckets" or "placeholders" for content, and then the CMS pours content into them as needed.

Example of a database website

Here, the articles are being dynamically generated as well as the bottom lists of links.

Joomla is

  • Easy
  • Powerful
  • Cheap (not free!)

Barrie North's 80/20 rule

  • 80% of what you want to do will take 20% of the effort
  • You don’t really know what your site visitors want

Resources


To install Joomla, you need a web account with a MySQL database.

Or you can set up what is know as a localhost.

  1. Download Joomla files
  2. Either
    • Upload file package to server then extract
    • Extract then upload individual files
  3. Create a database
  4. Browse to site and run installation wizard
  5. Pray to all you hold holy that permissions are ok
  6. Delete installation folder

Resources


One of the hardest parts to Joomla is setting up the site. To start, there are so many options it an be overwhelming.

The three elements of a Joomla site are:

  • Template (the look and feel)
  • Content (the "beef")
  • Modules (the gravy round the outside)

Elements of a Joomla website


Joomla comes with three templates:

  • Milky Way
  • Beez
  • Purity

To get started, just use one of these, then you can graduate to a 3rd party template of which there are thousands. You can get free ones or professional ones ranging from $25-$70

Of course www.joomlashack.com, but others of mention:

  • www.joomlapraise.com
  • www.rockettheme.com
  • www.joomlart.com
  • www.joomlajunkie.com

Commercial innovation has driven Joomla templates much quicker than some other content management systems.


The main "meat" content is made up of articles.

Content, or articles need containers, these are called Sections and Categories, and must be set up first.

  • Section
    • Category
      • Article

Joomla content structure - sections and categories


Nothing can been seen on the webpage until it is linked to. Next you must set up navigation.

There are no Joomla pages


Joomla has thousands of 3rd party extensions, from forums and shopping carts to lacrosse league managers or women's menstrual cycle trackers.

Some are free, some are commercial. Some are GPL, some are proprietary (no, these are not the same thing!)

Lets add some extensions!

Resources


Joomla holds its own for SEO!

Joomla has something called SEF (Search Engine Friendly URL's) that turns complex url's into easy to understand ones.

Google doesn't care now anywhere, so SEO is not SEF.

Joomla SEO is not SEF

  • Keyword Use in Title Tag (4.9)
  • Global Link Popularity of Site (4.5)
  • Anchor Text of Inbound Link (4.4)
  • Link Popularity within the Site's Internal Link Structure (4.1)
  • Age of Site (4)
  • Topical Relevance of Inbound Links to Site (3.9)
  • Link Popularity of Site in Topical Community (3.9)
  • Keyword Use in Body Text (3.9)
  • Global Link Popularity of Linking Site (3.7)
  • Topical Relationship of Linking Page (3.6)

Source:http://www.seomoz.org/article/search-ranking-factors

Concentrate on creating relevant titles for your articles

Create Relevant Article Titles

This will mean your pages have a strong foundation for SEO and will be accessible and usable.

Good Article Titles mean good SEO and usability

Resources


One of the challenges of open source is keeping up to date with the more frequent patches and security fixes. Someone on your team will have to know how to do these.

Joomla.org releases patches which are a bunch of files that need to be applied/ftp'ed onto your server.

Major releases come around every year or so with many new features. The current version is 1.5 and 1.6 will be released in the next 12 months.

There are some extensions and services that will keep you site updated for you.

Resources

How to Apply a Module Class Suffix in Joomla! 1.5

This tutorial will explain how to apply a module class suffix in Joomla!. This tutorial depends on the available styles for individual templates. Some settings may be different. See the templates corresponding docmentation for more information.

Go to your Joomla! administration console

How to Apply a Module Class Suffix in Joomla! 1.5

Go the administration of your website at ww.yourjoomlasite.com/administrator/

Login to your Joomla! administration

How to Apply a Module Class Suffix in Joomla! 1.5

Enter the username and password you created when installing Joomla!

Go to the Module Manager

How to Apply a Module Class Suffix in Joomla! 1.5

Navigate to Extensions > Module Manager

Go to the module you want to edit

How to Apply a Module Class Suffix in Joomla! 1.5

Select the module you want to apply the Module style..

Apply the Module Class Suffix into the parameters to the right

How to Apply a Module Class Suffix in Joomla! 1.5

Apply the Module Class Suffix. (S1 example shown)

Save the Module Setting

How to Apply a Module Class Suffix in Joomla! 1.5

Click Save

Understanding the Module Manager

Modules are the blocks of content in your site and are distinctively separate from your main content area. For example, a module may appear to the left,right,above, or below your main article content. The Module Manager allows you to customize each module to your preference.

To access the Module Manager in Joomla! 1.0: Navigate to Modules - > Site Modules
To access the Module Manager in Joomla! 1.5: Navigate to Extensions - > Module Manager

Each module in Joomla! has some persistent features. Below are the fields you will see in every module. Modules have more individual parameters but these are the most important ones to understand first.

Note: Some of the terminology is different across Joomla! 1.0 & Joomla! 1.5 but they both have the same functionality.

  • Title
  • Show Title
  • Enabled (1.5) / Published (1.0)
  • Position
  • Module Class Suffix
  • Pages/Items (1.0) / Menu Assignment (1.5)
  • Ordering

Title:

The title of the module is displayed above the module on the frontend. It is also called a "Module Heading". After a module is saved, the module's title is also shown in the Joomla! backend administration.

Show Title:

This setting allows you to specify whether or not the module's title should be visible on the frontend.

Enabled (1.5) / Published (1.0):

Allows you to enable (or publish) the select module. To enable a module only on specific pages see below *Pages/Items (1.0) / Menu Assignment (1.5)

Position:

A module position may be labeled as left, right, bottom, top, etc.
Module positions are defined by the template. If a module is published in a position that is not supported by the template, it will not show up. It is important to be aware of your template's supported module positions. In Joomla! 1.5, only the module positions of the default template are available in the module manager.

Module Class Suffix:

A module class suffix allows you to specify a preset style which is defined by the template. You'll need to consult your individual template documentation to see what module styles/suffixes are available.
(See also: How to apply a Module Class Suffix)

Pages/Items (1.0) / Menu Assignment (1.5):

When a module is enabled/published it can be assigned to all pages or pages specified in the Pages/Items (1.0) / Menu Assignment (1.5) dialog. Modules can only assigned to pages that have menu items.

Ordering:

You can set the order of a module to appear in the ordering dialog as well as the module manager main page by clicking the up/down arrows.

Joomla template CSS and images only displayed on home page

Sometimes your template will lose all its styles and images when navigating away from the Frontpage.
This is caused by an incorrect path to the stylesheet due to SEF errors. If you've enabled SEF, make sure your htaccess.txt file is renamed to .htaccess. You may need to temporarily disable SEF. For more information on the correct way to set up SEF in Joomla! 1.5, see the official doc item at joomla.org: SEF URLs in Joomla! 1.5

SEF quick checklist:

  • Make sure htaccess.txt is renamed to .htaccess if SEF is enabled
  • Make sure your server/host supports all requirements

Creating sublevel menu items

Creating sublevel menu items in both Joomla! 1.0 and Joomla! 1.5 is achieved by same general process. Think of Joomla's menu items as "parents" and "children". In order to create a sublevel item, you will need to assign a "parent" to that item. This is done inside the Menu Manager. Navigate to the menu manager and select the menu to be modified.

Example:

Joomla! 1.0: Menu > mainmenu
Joomla! 1.5: Menus > Main Menu

Select the menu item you would like to assign as a sublevel (or child) item.
You will see a dialog below titled "Parent Item"
Choose the item to assign as the parent and save.
Creating sublevel menu items

How to Update Joomla 1.5 Versions

As an open source project, Joomla frequently updates its code with new releases. Often these have important security patches in then, so its really important to keep up to date.

If you consider yourself a skilled Joomla! user and have a little confidence in your technical skills then you may be able to save yourself some time if you're updating your Joomla! installations by FTP. This article will help you greatly speed up the process.

The first thing you'll need to do is send your web host support agent a request to enable SSH access (if available). Some web hosts require you to give an explanations as to why you would want to enable SSH, because it is a command line based way of managing your server and can really screw things up if you enter a command not knowing exactly what it does.

Here is a simple email you can use as a template to request SSH access for your server:

Hi, I would like to request SSH access be enabled for my user account on (yourdomain.com).
I need this in order to perform various security updates and upgrades to the Joomla! CMS on my server.

Thanks,
(your name)

Once SSH is enabled, you can login to your server using a client such as PuTTY (PC). If you're a Mac user you can simply use OSX's native Terminal utility (located under /Applications/Utilities).

After launching PuTTy/Terminal, the first thing you want to type is:

ssh This email address is being protected from spambots. You need JavaScript enabled to view it.
(Hit enter to submit each command)

You should be asked for your password. For security reasons, you may not see it appear on the screen as you type it.

If all goes well, you should be logged in now. Servers are set up differently depending on your hosting environment, so once logged in you'll need to find your location.

Type ls to show your current location. In most cases you'll need to type cd ../ to get to the main directory listing. (the cd command means "Change Directory").

To find out exactly where your Joomla! installation is located, you can login to your Joomla! administration, navigate to Help > System Info (J!1.5). Look under "Open basedir" and note its location (excluding :/tmp)

Let's say your Joomla! installation is located in /home/username/public_html/. Type cd ../home/username/public_html/ to go inside the public_html directory.

IMPORTANT:
It is highly recommended that you back up your installation before moving forward. To do this, just type:
tar -cvf site_backup.tar public_html/*
This will create a file named site_backup.tar of your entire public_html directory and its contents.

Now, let's say you're running Joomla! 1.5.3 and you want to update to Joomla! 1.5.7

You can access the Joomla! update listing at http://joomlacode.org/gf/project/joomla/frs/. Copy the link location to Joomla_1.5.3_to_1.5.7-Stable-Patch_Package.tar.gz and type:
wget http://joomlacode.org/gf/download/frsrelease/8375/31007/Joomla_1.5.3_to_1.5.7-Stable-Patch_Package.tar.gz

wget is a command to download a package file from another server to your server.

Now type:
gzip -d Joomla_1.5.3_to_1.5.7-Stable-Patch_Package.tar.gz
The tar.gz file now has a .tar extension so type:
tar -xvf Joomla_1.5.3_to_1.5.7-Stable-Patch_Package.tar

The package is extracted and Joomla! is updated. If all goes well and Joomla! appears to be stable, you can delete the site_backup.tar file form your server.

XHTML Validation

Validating a Website's HTML

One of the first things that should be done after a site is constructed, and repeated at various steps as things are changed/updated, is the validation of the site's HTML. In the case of a Joomla powered site, HTML errors can come from 4 places:

  1. Templates
  2. Components
  3. Modules
  4. Articles

Why Validate?

It's simple really; HTML errors can present unwanted issues with your site, and is the leading cause of issues with template display that we see. These issues present themselves even more so when a 'pure CSS' template is in use, as CSS is unforgiving of left out closing brackets (>) and other often overlooked HTML errors that are introduced by extensions or other invalid code inserted in articles. While extension code is not the ONLY vehicle by which invalid code can make its way into a site, it has become one of the leading cause of issues that we have seen.

How to Validate?

The World Wide Web Consortium (W3C) has provided a handy tool to run your site's HTML output against the standards for validation which may be accessed at http://validator.w3.org

Testing your site's validation is as simple as putting your site's URL in the Address field and clicking 'Check':

W3C Validation Service

After the service runs you'll be presented with a 'results' page. If the site is free of HTML errors you will see a message of congratulations and some nice buttons you can proudly display on your site if you wish:

Successful Validation

If there are errors, you will be presented with a results page that outlines the errors:

Errors in HTML

Error Outlined

What to do With This Information

Seek and Destroy! Or better put, find and fix the errors.

The 'Validation Output' that is presented will show all of the errors that are found, although using the info with a Joomla powered site may not be as simple as if we were validating a static HTML site. This is because in Joomla there really are no 'pages' except for the one that is presented to the viewer at the time of viewing. The Joomla 'page' is a collection of output items from the database, presented and laid out within the confines of the template. The Validation Services runs the presented 'page' against the standards and outlines the errors on the presented 'page', but in our instance the items on our 'page' could come from any number of sources. For instance, if you have a website that has a calendar component, a commenting component and a component to manage your advertisements you not only have the default Joomla output in the form of articles on a 'page', you also have the output that is coming from three other sources -- any of which could present an error or multiple errors. The validation service does not point out which is the offending source of output, only the errors and on which line they appear.

Seeking out the reported errors can be a very time consuming process, however, there are some steps that you can do to help with your process.

The first thing I do when checking for the source of a site's errors is to 'rule out' possible sources. As I know in the case of a site with a Joomlashack template that the template is not the cause, I check that one off. I would next go to the code I inserted in articles and rule them out by unpublishing ALL articles and checking the validation. If the errors are gone, publish one article at a time until the offending code is found. If errors still persist after articles are ruled out, I next go to components as a possible source. One quick way to check components is to use a bit of code at the end of your site's URL that will remove the template and show the output of the site presented only as the output from the components in use. To do this, add the following at the end of your URL: /?tmpl=component So for example, if we wished to check the Joomlashack site's HTML with only the output of components in use we would put this in the Validation Service: http://www.joomlashack.com/?tmpl=component If that fails validation we know the offending code is coming from a component. If it's a simple site and does not have too many components in use or is a site still under development, I would recommend uninstalling ALL user installed component, reinstalling one at a time while checking the validation after each component is reinstalled. Doing this should help you pinpoint the offending code.

In the case of already developed sites or sites with large amounts of components installed the process above might not be possible, in which case it may be necessary to hire a professional to help you seek out the offending code. You may also wish to seek assistance in the Joomlashack Community Forum

Fresh Install - Template Messed Up?

One of the most asked questions we get in our support ticket system, is why a particular template is 'messed up, broken, not right, etc etc' upon first installation.

The following is taken from a tutorial on how to set up the Onyx template with Joomla 3, however, there are some concepts that might help a user of any Joomlashack template understand why a template does not look like the demo right out of the box.

This information is not designed to help you set up any particular template besides Onyx (for that please see the template documentation in the demo of the template you are seeking help with) but it is important as a user of Joomla to grasp some concepts that will make life a little easier as you learn how to use this sometimes confusing system.

Default Template installed

This is how our Onyx template with demo content looks, within the style variations.

Colors dark

So you've installed Joomla successfully, and now you want to us a profession template. First you need to install your template. For help with installing that template, see the tutorial 'How do I install a Joomlashack Template'

Joomlashack Template installed

This is how Onyx template looks without the demo content.

onyx sample install no demo

You've successfuly installed your template and set it as the 'default', and gone to view your wonderful new template... and WHOA! It looks like something went terribly wrong!

...it's not all that bad - you just need to do some simple template setup now. Keep reading and it will all look good in a time.

First Things First - know your available module positions!

module positions

Before you can put things where they belong (or where you want them), or move things from where they don't belong, you need to know what module positions are available with your particular template. Each template demo contains a 'Module Map'. The module map will outline your available module positions. This is the Module Map for Onyx, to view the module map for your particular template, see the Demos.

Where is my menu?

You'll notice in the default template (Protostar), that menu module is published nicely to the 'position-1' position. When you change the default template to the Onyx template (in this example), you need to change that menu module to the 'menu' postion.

Know your available module styles

module styles sample

module styles sample 2

Just as you need to know what module positions are avaialbe if you want to put things where you want them - you also need to know the styles that are available for your particular template. And just as each demo contains a Module Map ... guess what?.... they also contain info on what styles are at your disposal!

The above image shows the 'Module Class Suffixes' and corresponding formatting for the Onyx template (for your template's available suffixes, see the demo).

Add the suffix.

The module itself will gain styles based on the Module Class Suffix, which is added in the module's parameters as seen in the screenshot below:

module class suffix

 

Remember, if you need help further assistance after viewing this information and the documentation for your template, please submit a ticket (only available for customers).

Thanks for using Joomlashack's template, and Have Fun!

Creating a Parent / Child Relationship in a Menu

In order to use a Suckerfish Dropdown menu, or Dropline menu, it is first necessary to set up your menu to have 'Parent / Child' relationships. The 'Child' item is the one that you will see 'drop down', or as a 'sub menu' item.

This tutorial covers how to make it happen.

(this example uses Joomla 1.5 - although the backend looks a bit different in 1.0, the concepts are the same)

Step 1: Access the Menu Manager

Creating a Parent / Child Relationship in a Menu

Select the menu you wish to set up parent / child relationships in. In this example, we are going to use the Main Menu

No parent / child relationships

Creating a Parent / Child Relationship in a Menu

This image shows a menu with no parent / child relationships.

Access the Menu Parameters

Once you've accessed the menu, click on the menu item you wish to make a 'child' item in your menu. You will see the 'Parent Item' parameter on the left side of the screen. This is where you will assign a parent item, thus making the menu item we are editing the 'child' item.

In this case, we are going to set the parent item to be 'What's New in 1.5?" - see below

Select the 'Parent Item'

Creating a Parent / Child Relationship in a Menu

Select the item you wish to be the Parent Item. In this exaample we are setting the 'What's New in Joomla 1.5?" link to be the parent of the 'Joomla! Overview' link.

Save the Changes

Creating a Parent / Child Relationship in a Menu

Click on Save to apply the changes.

Parent / Child relationship is set!

Creating a Parent / Child Relationship in a Menu

You'll see after saving that the parent / child relationship has been set. Child items are shown indented with a connection to the parent item. You can do this for as many links as you need, as many levels deep as you need. Although, the template must accomodate the levels. Joomlashack's templates will accomodate up to 3 child items.

Step 2: Set up the Menu Module

Creating a Parent / Child Relationship in a Menu

Access the menu module by going to the Extensions -> Module Manager, and select the menu module you wish to use. In our example, we are using the already existing 'Main Menu' module. So we click on the module name to open it.

Setting it up.

Creating a Parent / Child Relationship in a Menu

Upon opening our menu module, you will see some parameters that must be set properly for the menu to operate as a suckerfish or dropline menu.

Set the 'Details'

Creating a Parent / Child Relationship in a Menu

In the Details area of the module settings (top left), set the parameters as seen above, and listed here:

Show Title = No
Enabled = Yes
Position = Whatever position you are setting up the suckerfish / dropline menu to be displayed in. Check your template documentaiton, found in the template demo, for the location to use suckerfish / dropline menus in.

Set the 'Parameters'

Creating a Parent / Child Relationship in a Menu

In the Parameters area of the module settings (top right), set the parameters as seen above, and listed here:

Menu Name = mainmenu (choose the name of the menu you wish to use to populate the suckerfish / dropline menu with -- in our case, we've set up the 'mainmenu' to have the parent / child relationships and will be using that menu)
Menu Style = List
Always show sub-menu items = Yes

You do not need to change any of the other parameters, unless otherwise noted in the docuementation for the template.

Save the Changes.

Click on Save to save your changes and close the module settings screen.

Preview your site to see your work!

Creating a Parent / Child Relationship in a Menu

If all settings have been done properly, you should now have a fully functional Suckerfish or Dropline menu set up, with the Joomla! Overview being the child item of the What's new in 1.5? parent.
Repeat the First Step to set up more items for the menu.

As stated above, this tutorial uses Joomla 1.5, however, the concepts are the same for Joomla 1.0 - it's just a bit different in where and how you do things.

If you have any questions or need further assistance, please visit the Community Forum and post to an appropriate thread.