Editing your Joomla Site

A. Taking your Joomla site offline for maintenance

Not necessary but something you may want to do if you intend to make significant changes, e.g. changing to a new template. Do this:

1. Login to your Joomla 3.0.x administration area (www.yoursite.com/administrator). Type in your admin user name and password.

2. Navigate to Site/Global Configuration.

3. Change Site Offline from "No" to "Yes". (Click Yes back to No when bringing your site back online)

4. Click Save.

B. Changing templates

You may have grown tired of the current template. If so, you can change to another one. Joomla template vendors typically operate from the Internet. Some provide free templates while many others sell them. Here is our "short list" of favored template vendors:

Once you find a template you like, download and save it to your desktop. Then, install it to Joomla as follows:

1. Login to your Joomla 1.7.x administration area (www.yoursite.com/administrator). Type in your admin user name and password.

2. Navigate to "Extensions/Extensions Manager".

3. Select the browse button and choose the [TemplateName.zip] that you downloaded and saved to your desktop.

Note: Some templates come with a name that might include "unzip first" . If so, you must first unzip it to your desktop and then install the [TemplateName.zip] file.

4. Click "Upload file & install" to install the template to your Joomla installation. To set the template as the default, navigate to your Template Manager (Extensions/Template Manager).

5. Now, select your desired template and click "Make Default".

6. Your desired template will now be set as the default template.

7. Now for a somewhat more difficult part of process... changing module positions. The vendor you purchased the new template from should have provided you with a module positions diagram such as the below example:

The template module positions (see example at left) will be similiar to the one you were previously using. Compare the two and make note of where and how they differ.

Then, go to "Extension/Module manager". Open each of your existing modules and, if necessary, change the module position from the old postion to the new position. With modules that include a graphic, you may also need to change the composition and size of the graphic to conform to the stated demension of the new template module diagram.

Note: This process can be sometwhat complicated when you do it for the first time. If JoomlaPatterns initially created your website, call Don at 618-524-7590 and he will be glad to walk you through the process on the telephone or via Skyple (user name "kg9omradio").

C. Installing other Joomla Extensions.

Several were added when Joomla was first installed. However, you may want others. Go to http://extensions.joomla.org/. This is the best place to start looking for useful extensions. Download the one(s) you want and save them to your desktop.

To install and setup your extensions, login to the backend of your Joomla installation, and:

1. Navigate to "Extensions/Extensions Manager"

2. Click "Browse" and select each extension you downloaded to your desktop.

3. Some of your extensions will be managed with Module Manager while others are listed under the menu item “components”.

4. Setup each extension as necessary.

D. Changing or adding new categories

Login to the backend of your Joomla installation:

1. Go to "Content/category Manager".

2. You should notice the various names of already existing catories on the list.

3. You can change the name by clicking the existing category, changing the name and saving it. You can add new categories by clicking the “New” icon.

4. Type in the Title (for example “About us” or “Products” or “Customer Support”, etc.).

5. Make sure each new category has a state of “Published”.

6. Click the icon “Save and New” or, (when finished) “Save and Close”.

E. Editing an existing article or creating new articles

Login to the backend of your Joomla installation with your browser (preferably Chrome) by going to http://www.(domain name)/(subdirectory if applicabe)/administrator/ . You will reach the "Joomla! Administration Login" page. Simply type in your user name and password. Then, click the "Log in" button which will take you to your site's "backend" Administration control panel. This is your private area for administering your site. Be careful with what you change and how you do it. Start out simple. Avoid making too many changes before you gain sufficient familiarity and confidence with Joomla's backend functionality.

1. Click the menu item "Content" and select "Article Manager". This will take you to the "Article Manager: Articles" page where you will find a complete listing of all your existing articles.

2. To edit an existing article, click the article title to open it. Here you will find a somewhat simplistic word processor which you can use to make changes to existing content or add new content (text and/or photos).  Essentially, it works much like Microsoft Word albeit with much less sophistication. Make a minor change in the Article Text  window and click the large "Save" icon at the top left of the page. Now, to validate your editing, click the "View Site" small icon at the bottom left of the page. This will open the "fontend" (public area) of your website in a new tab of your browser. At this point you should see two open tabs.. one pointing to your sites backend (admin) area and the other to your sites frontend (public) area. This way you can easily go back and forth from one tab to the other during the editing process.  A better way to do this is with two monitors. Anyway, click the menu item leading to the page you just edited and see if the changes you made are to your satisfaction. Then, click your backend browser tab to return to the article editor. Make other changes and click save. Again, return to the fronted to validate your editing. Once you have concluded editing the article, click the editor page's icon "Save & Close". You can select other articles to edit, etc. Once you have finished, click the small icon in the upper right of the page entitled "Log out".

Adding new articles.

Once you gain confidence editing existing articles, you may want to add a new article. To add a new article, click the orange colored icon “New” which will bring up the "Article Manager: Add New Article window". Type in the Title of your article. Try to make it no more than three words in length. Make sure you assign it to an appropriate category, a state of “Published”, Featured “No”. Then add your desired text and photos to the “Article Text” field in the editor. Check your work as per the procedure described above. Once your new article is completed to your satisfaction, click the icon “Save and Close” and then proceed to Section F. below.

F. To add a new photo/graphic to your article, click on the button "image" under the editing window. Then click the button "choose File'. Now, browse to the location on your local computer where you saved the file. Double click it and then click the button "Start Upload". Lastly, select the file and then click the button "Insert". Once it has been inserted into the article you can edit size, location and margins by double clicking the image itself.

Note:  Although you can edit image size, it is best to do this before it is uploaded to the server.  We recommend the freeware photo editor "Irfanview" which you can download from http://www.irfanview.com/.   It is an excellent tool to crop and/or resize your image in order to make it fit correctly into the Joomla article. 

G. Editing your slide show (if any)

First decide which photos you want in your revised slideshow.   Use a photo editor such as Irfanview to resize and crop each image to conform with the template module's dimensions.  A dimension 1100 X 400 pixels often works well.  Save them on your desktop making sure that each image is the same 1100 X 400 pixels dimension.  Name them alphabetically to conform with the order that you want the slides presented... e.g. slide1.jpg, slide2.jpg, etc.

From Joomla's back end, under "Components", select extplorer.  This is a handy file management system that you can use to upload new images to the web server, etc. Select (highlight) the folder "Images" and then click the first toolbar icon "New File/Directory".   In the dropdown box type in a unique new folder name such as "slideshow" with a Type "Directory".  Then, click the "Create" button.   Now, select the folder you just created and click the "Upload" icon from the toolbar.  Browse to your desktop and select each of up to 7 image images files that you have created for your revised slideshow.  Lastly, click the "Save"button and then "Back to Joomla"  (top left of page) to exit extplorer.

Select the menu item "Extensions" and then click "Module Manager".   Select a Slideshow module on the list such as J51_SlideshowModule".     Select the "Settings" tab.  Click the drop down arrow opposite the field "Image directory" and brows until you find the directory you created as per the above paragraph.   Leave all of the other fields as is.   Finally, click the green "Save" button and to your site's front end to check your work. 

H. Editing your menu scheme


From the backend of your Joomla installation, go to "Menus/(menu name)". You will find your existing menu scheme which will look similar to the below screenshot:

Notice that the main menu items (e.g. Portfolio in the above example) are not indented whereas the sub-menu items (called children) are indented. This results in typical drop down menu behavior.

To add a new menu item, click "New". Fill in the fields as follows:

1. Menu item Type. Click "Select" and choose from the list provided.... “Single article” (usually).

2. Menu title as desired. (keep it short – preferably no more than 3 words).

3. State “Published”.

4. Menu Location should be “(menu name)” .

5. Parent item will usually be “Menu item root” unless you are nesting menu items under categories in which case it should point to the correct category, e.g. About us.

6. In the right hand pane, select the correct Article by clicking the button "Select/change" and choosing the correct article title from the list.

6a. To change the listed order of your menu items, click the small blue dot (up or down) in the "Ordering" column to move that menu item up or down in the listing.

7. Click the icon “Save" or "Save & Close”.

8. As usual, return to the front end of your site to check your work.

G. Adding additional modules

Login to the backend of your Joomla installation, and go to Extensions/Module Manager. Here is where you will setup modules such as:

  • Footer
  • Main Menu
  • Logo
  • Headerbanner (to hold whatever you want under the main menu such as a photo, sketch or logo)
  • Image slide show
  • Google Translate

To create new modules, click the “New” icon (e.g. let’s create a new module called "header"):

1. Add the title “header”

2. Show title “Hide”

3. Position - Position the module in the correct place on each of your website’s pages. Do this by clicking the “Select position” button and select the appropriate title location from the list provided. Refer to your template’s module locations diagram (usually part of the template package or listed on the template maker’s website) to pick the right place for the Main Menu. It will probably be something like “footer” depending on what name the template maker assigned.

4. Select Published.

5. Click the “Save and New” icon to create additional modules. Important note: If you elect to create a module called “submenu”, be sure to position it in the correct location on the page. Usually it will “left”. Also, in the right hand pane, the Select Menu should be “Main Menu” , the start level “2” and the Show Sub-Menu Items checked “Yes” . Depending on your template, you may also need to open the Advanced Options tab and assign Menu Tag ID “Main_menu” and Module Class Suffix “submenu”.

6. When finished with all your modules, click the “Save and Close” icon.

7. Go to your site’s front end to see if everything appears to be in the right place. If not, trouble shoot to determine what’s amiss. Start out by:

  • Going back to Extensions –> Module Manager and open up module “Main Menu”. Double check all the settings previously entered.
  • In the right hand pane, make certain that Basic Options Select Menu is “Main Menu”, Start level “1”, End level “1” and Show Sub-Menu Items is “No”. Also, go to the Advanced Options tab and make sure that the Menu Tag ID is “Main_Menu”