How Joomla Organizes Your Information

How Joomla Organizes Your Information

The specific tools are discussed in the Joomla 1.5 Tutorials section. Before we tackle the specifics, let’s consider some basic design ideas so that you understand how Joomla addresses them.

What goes where?

Think of a home page you like. Imagine the person who created this staring at a blank screen and just beginning to create a website. What would be their first decisions in creating the website? In non-technical terms, they would decide:

  • What words should go on the home page?
  • What graphics should be part of the design?
  • What should be the balance between graphics, text, & functionalit?
  • Do I need to use searches or can I organize the information effectively without relying on searches?
  • What navigation should the site have?

These are some of the questions that are key to what developers call user interface design. It involves thinking about how much to communicate in words (information architecture) and how much in graphics (graphic design). To do this well, you need to think as your website visitor thinks. What will communicate your message most effectively?

Why is User Interface Design important?

These questions are important regardless of whether you are using Joomla, of course, but for Joomla, it is important to have the user interface design completed so that you can define the other pieces of the site effectively.

Joomla allows you to dynamically change the menus and content but if you “create things on the fly” or make too many changes later, it will affect how your graphics and other style elements display in relation to the text and menus. In addition, by pre-planning you can determine what added extensions you might need to manage your content.

This doesn’t mean that you must have all the content done. One of the easy workarounds for pages is to create placeholders and populate them later (See chapter 4). However if you don’t have your user interface design documented, you can’t work efficiently or effectively.

Notice we didn’t say “thought about” or considered” these question. Effective developers put this down on paper so that they can work with it in an organized manner.

Planning for additional functionality

When you know your interface design, you will also know what pieces to add to the basic Joomla system. As an example, if you want to have a large number of frequently asked questions, you might choose to add Joomla components and modules that allows Joomla to manage this content efficiently. By establishing your user interface design early, you will work with the best tools from the start and not waste time building your site more than once to get the desired functionality.

Content is separate from style in Joomla

Another important benefit of Joomla, like any true CMS, is that it handles content separately from formatting. If you have used another web authoring tool or hand coded web pages, you may be familiar with cascading style sheets (CSS) as a way of standardizing format of text and graphics. Joomla uses CSS, but instead of storing this information in the content files, it is stored with the template files. On the other hand, the content (text, images, etc) is stored in the MySQL database that runs Joomla. For all practical purposes, this means:

  • There are fewer opportunities for simple coding errors within each html file.
  • The html files don’t need to be hand coded but can be edited through an WYSIWIG interface that has standard word processing icons. As an example, to bold text, highlight the text and click on the B icon. There are exceptions but very few.
  • The css files are standard css files and can be edited by anyone who knows css. As a result, even if you don’t know css yourself, there are many people who do, which makes it likely that you can keep your development costs low.
  • If you are building your own website, you can use templates made for Joomla and avoid editing the css files. However if you need something that a template does not have, you will need to hire someone to adapt the template to your needs. See page for more information on template structure and strategy.
  • If you are used to building sites in Dreamweaver, Frontpage or any of the other popular web authoring programs, you will find a short learning curve with the Joomla interface. In addition, your code will be free of any extra code often added by these programs.
Adding Links into Joomla Articles

Adding Links into Joomla Articles

Joomla Article - how to create? - Joomla-Monster

Creating a Link to text or an image

Any text or image in an article can be made into a link.

  1. Select the content you want to make into a link. If it’s text, highlight the text. If it’s an image, click on the image to select it.
  2. Click the add link icon  . It’s suppose to look like a chain link. The icon is grayed out until you have selected something to make into a link. Once you click on this icon, a pop-up box comes up that allows you to enter the link.

Enter a link to an external site

  1. Paste the link into the URL box at the top ).
  2. At the bottom of the window, select an option from the Target drop-down box. For usability purposes, the best option to choose is “Open in new window.” When a person clicks on your link, this option will open the other site in a new window so your site will still be open in their browser.
  3. For SEO purposes, put a title in the title field. This should describe your link.
  4. Once you have put in your parameters, click Insert and your link has been created.

Link to another part of your Joomla site

  1. Just below the URL box in the Add Link pop up window is the Link Browser. This area shows places within your site you can link to.
  2. Contacts: If you have defined contacts in the Contacts component (which we cover in Chapter 6), you can link directly to a specific contact.
  3. Content: This shows a navigation tree through your sections, categories and articles, so you can link directly to an item within your Joomla site.
  4. Menu: If you want to link to a page that you have already defined in your menu, you would find those links here. If you have linked to a page within your menus, it is preferable that you link to the same article through the menu tree rather than the Content tree. That way the system will format the page the same as you have defined for that menu link.
  5. Weblinks: If you have defined any links in the Weblinks component (covered in Chapter 6), you can link to the same sites using the Weblinks navigation tree.
  6. At the bottom of the pop-up window put a title for your link. This is for SEO purposes and should describe the link you have created.
  7. Once you have put in your parameters, click Insert and your link has been created.

Link within the same article (anchor link)

If you have a long article that you have created, you may want to put links within your article that link to further down on the page. A good example of this might be an FAQ page where you have each question listed at the top of the article, but then a link to the answer further down the page. These types of links are called Anchor links. To create an anchor link:

  1. Click your cursor at the spot in the article that you want the user to end up AFTER they click the link . For example, if you have an long article, you might create a link for a term within the article where the term is defined at the end of the article.
  2. Click on the anchor icon in the icon bar
  3. A small pop-up comes up that asks you to name your anchor. Put in a name. For ease of use, name it something relevant to what you’re linking to.
  4. Once you’ve put in a name, click insert
  5. You will see a little yellow square with an anchor appear where you put your cursor in your article.
  6. Now go back to the place where you want to create the link. Highlight the text you want to link from. If you want to create a link from an image, click once on the image.
  7. Now click the add link icon .
  8. The link pop-up box will come up.
  1. At the bottom of the pop-up screen, in the Attributes sections, you will notice one of the drop-downs is labeled Anchors. Select the name of the anchor you just created. You’ll see Joomla will put the URL of the link in the URL box at the top of this pop-up.
  2. Put a title into the title field.
  3. Click insert and the pop-up box will close.
  4. You have now created a link to an item within your article.
Firebug Helping CSS Customization

Firebug Helping CSS Customization

What do you understand by CSS?

CSS files have CSS codes in it which helps in designing the style and appearance and theme of your web page. Typically CSS is the abbreviation for Cascading Style Sheets. It is used to make your web page more attractive and eye-catching with the support of Wild Apricot, a product of CSS. It is however used to define a certain level of heading or giving the site a new look or style.

Meaning of Firebug

Firefox is a vital tool for Firefox which is used to edit a WordPress theme. With the help of this you will be able to customize according to your need and requirement on a particular issue. It works in real time basis so any changes made to the site can be viewed in real time., However it can not support permanent changes. In order to make any changes you have to code the program in the notepad or in any text file.

Firebug is supported by Mozila’s Firefox which assist you in adding up the required element to your WordPress theme style sheet. It can be otherwise termed as a secret weapon in the hands of the web designer. Firebug measure and illustrate everything that you want for your web page such as offsets, padding, margins, and sizes etc. With the help of a Firebug You can debug, edit, monitor and regulate HTML, CSS, and JavaScript live documents in web pages.

Firebug Helps CSS Customization

In Firefox you will find a Firebug’s CSS tabs which guide you in changing your site on your web page as per your requirement. Apart from the changes listed down there if you need any other changes also, it will enable you to do so by implementing the same that you need to be in your page, known as customized changes.

The cascade gives you a standard set format or guideline to manage changes to your designed page. You can take Firebug as a rule book supported by Firefox that cascade to effect the element of style. It knows better whether a link should show a black or blue color. Firebug gives you a lot of suggested options as well as assist you in picking the best option to customize the design of your page. It is equipped with many back links. For each element of style a design it has certain rules and stored properties to be followed. The rules are however attached to the application through backlinks therefore it lessens your worry. You do not have to wander here and there for making any changes. What exactly you have to do is that just simply go to the link and give an easy click. It will take you to the source and apply the changes to your document.

The below are some important aspects as how Firebug assists CSS customization.

Showing images, colors, and fonts:

As we all know the CSS tab have a wide range of selection suggestion to give your web page a new attractive look. So when you drag your mouse near to gradients, colors, font or images it will give you a small tool-tip previewing a detail sheet for example the font preview will give you a list of different styles of text and many more.

Everything at a click:

Editing CSS is now just like a child’s play. By Clicking the CSS property you will be immediately encountered with a little text editor box which will help you to apply changes in no time to your web page. To go to the next property you can use the tab button while to cancel any changes made to the document the escape key can be used.

Managing text and numeric:

It is a good time saving technique as we all know because it supports Autocomplete which takes text automatically without being typed in the page but what in case of numeric ? Yes, it also supports numbers to line up perfectly just by increasing or decreasing the number by one. Always use up and down arrow keys to edit the numbers. You will be landing up with minimal mistakes.

Sharpen your vocabulary

CSS will also help you in learning and managing your vocabulary. It has a CSS keyword complete dictionary with a wide selection range of vocabulary in its memory to refer to. Always make sure to use the up and down arrow key to make changes or to get select a word from the alphabetical order suggestion list.

Effective for all style sheets

No doubt styles and changes can be updated using HTML code but that is for a single web page document only. If you need to give the same effect to all the pages in your web document then you have to do it times and again, however with the help of CSS tab you will be able to make changes to all the pages of the web page simultaneously.

Source Live edits

Firebug support realtime processing so it works on live objects, for editing also it can do directly without disturbing the source code but in CSS the user has to edit the source code first in order to make the changes in the main document.…

Login into Joomla Admin Panel

Login into Joomla Admin Panel

What URL is used to log into the admin panel?

Live website: If your joomla site is live, then the URL to log into the admin panel would be:

Live website in a folder: If your Joomla install is in a folder on the hosting account, you would login like this:

It’s important that the word administrator be all lower case, and the name of your folder be the exact case of the folder on the server.

Not-live website: If your hosting account does not point to a live website, the Joomla administrator may look something like this:
or where is the IP address of the server. 

If your site is not live and you are not sure what URL to use, contact technical support for your Joomla hosting company.

How can you tell if your site is live?

If your site is live, you would have done one of two things when you set up your hosting account:

1) If you purchased a URL ( when you created your hosting account, then you are set up with a live URL.

2) If you had a URL then bought a hosting account, and followed the instructions to point your domain name servers (DNS) to the new hosting account, you have a live URL. This would have required you to log into the service where you bought the URL (such as

If you put in a previously registered domain name when signing up for hosting, but did nothing with the DNS with those domain names, your account may be called by the name of the URL, but the URL is not live. A good way to tell is simply type in the URL of your domain. Does it take you to a parked page or your old site, or does it take you to a page on your new hosting account?

Is your hosting account not yet set up with a live URL?

In the case of a company like Rochen, you aren’t required to point the DNS for the URL to the server before using your new account. In the welcome email they send you, they give you the optional login for your account. Other hosting companies will likely do the same. For Rochen the Joomla admin login URL is:

If your Joomla install is in a folder on the hosting account, you would login like this:

Other hosting companies have a similar configuration for accessing yoru hosting account before you point a live URL at it.

Login into Joomla Admin Panel

Once you find the right login, you will see the Administrator Login panel.

Put in your username and password and press the Login button. You have now logged into the administrator side of your Joomla interface.…

What are Extensions?

What are Extensions?

Extensions are the general term for mini-programs, i.e. additional functionality, available to extend the basic functionality of the Joomla Core.

What is the Joomla Core?

The Joomla Core is the term used to describe the functionality that is available within Joomla when you first install it. As Joomla grows and evolves, the team developing it continues to expand the functionality that is available in the core program. When you install Extensions onto your Joomla site, you are customizing your site by extending the functionality that is available.

Extensions are classified into 3 types:

  • components
  • modules
  • plug-ins

How do I choose which Extensions I need?

Before you can choose your extensions, you need to determine the content required on your site. Once you have defined the content, then you can determine if groups of content will be better managed by an Extension. Section 3: Creating the Framework, gives an overview of how to define the content for your site.


There are over 6,000 Joomla extensions

Because Joomla is open source, Extensions are developed by literally hundreds of developers worldwide. At last count there were over 6,000 extensions in the Joomla Extension Directory.

Joomla Extension Directory

This directory provides a listing of all components, modules and plug-ins that have met the development standards for Joomla, and each extension is reviewed before it is added to the list. In addition, if there are complaints about an extension, it may be removed from the official Joomla extensions page.

In the listing of each extension, users are able to rate a component for its ease of use and whether it provides the functionality a user expected. This allows you to screen which extensions you use and lessen the amount of time you spend in development. See the sidebar for the extension categories listed in the Joomla Extensions Directory.

What if I cannot find an Extension for the functionality I need?

There are developers who specialize in creating custom extensions. They can take an existing extension and add on to it, or create one from scratch. In the instance where you need functionality that you cannot find within the Joomla Extension Directory, you can hire a Joomla developer to assist you.

To hire a developer, you can put a post in the online forum at, or you can search in Google for “freelance joomla developer” to find sites that list profiles of potential developers. We have found some great developers using the following sites:…

Fixing Line Break Problems in Joomla Articles

One of the issues we’ve seen repeatedly in Joomla is a challenge with line breaks. What this means is you’re editing an article, and you cannot remove a line break that is there. Like the display conflict (what you’re editing doesn’t looking like your actual site page), this is one of the little annoyances we put up with because everything else in Joomla is so excellent.

How do you know if you have a line break issue?

You put your cursor after the line break, and you hit delete, and nothing happens. This tells you the system is being stubborn and won’t remove your line break.

How to add a line break:

There are three ways of adding a line break in text:

  1. Create a headline out of text
    If you highlight a portion of text and select a headline style from the format menu, you will create a line break before and after this text. Type that is in two different styles cannot reside on the same line.
  2. Hard Return
    Click your cursor when you want to create a line break, then hit the return button. This is called a hard return, which creates a new paragraph.
  3. Soft Return
    Click your cursor where you want a line break, hold down the shift key, and then hit return. This is called a soft return. If your template is set up to put spaces after paragraphs, you would want to use a soft return when you want there to be a line break but you don’t want the extra gap between the lines.

How to remove a stubborn line break:

  1. Close the article
    Save your article so it will close, then open it again and try to remove the line break.
  2. Delete the text and retype
    Highlight the text before and after your line break, hit delete, and retype your text.
  3. Go into the HTML code and delete the line break. 
  4. You would click the HTML icon  on the tool bar, and then search for the area where you are having the line break problem (use your browser’s find feature and type in a word or two of the text you are seeking).
  5. You will see <p> tags, which are hard returns or paragraph marks. You may also see <br /> tags, which are soft returns. Deleting these marks where you are having trouble should remove the line break.
  6. There may be other tags you don’t recognize that are creating the problem. All tags would be displayed between < > marks. If removing the <p> and <br /> tags doesn’t work, removing any other tags in the area may solve the problem.
  7. Remember that you can always cancel out of an article so the article will close without saving changes, so no worries about making a mistake.
Getting the Right Joomla Editor

Getting the Right Joomla Editor

Before you begin editing articles, we recommend that you change the editor in Joomla. The core editor for Joomla is very basic, and it sometimes requires greater technical knowledge to manipulate.

We would recommend you download and install the JCE Content Editor. This is the editor we will use to explain how to edit articles. In the cases where JCE is different from the core editor, we will provide links to tutorials that give further instructions.

Install the JCE Content Editor

  1. Download the  from the developer’s website.
  2. Go back to your Joomla administrator panel, and select Install/Uninstall from the Extensions menu.
  3. In the first section of this screen is the Upload Package field. Click browse and go select the zip file on your computer.
  4. Click “Upload File & Install”
  5. Congratulations, you just installed the editor. You should now get a confirmation screen letting you know that the installation was successful

Assigning the JCE Content Editor to a User

Once you install the editor, you have to tell Joomla that you want to use it when you edit articles. When you install Joomla, the default editor is assigned to every user in the system. When you install a new editor, you will have to assign it to every user who wants to use it.

  1. From the site menu (far left), select User Manager.
  2. Look for your name amongst the users, and click on your name to edit your user preferences.
  3. On the right hand side of the screen, the third drop-down says User Editor. From the drop-down, select Editor – JCE.
  4. Click save in the top right corner.

Congratulations! You have just installed your first Extension in Joomla, and you have configured it so you can use it. Wasn’t that easy? Now you’re ready to edit your articles.