Page 1

Sandhurst CEO Schools Website Training

Training Day - User Guide

Facilitators: Glenn McMahon & Grant Fitzgerald Sandhurst CEO

Joomla User Guide – Sandhurst CEO Page 1


Table of Contents

Administrator control panel, Global configuration settings Global configuration – system tab and server tab Site template modifications User manager Modules – editing a module Modules – creating a custom module Articles – creating sections Articles – creating categories Articles – creating categories Articles – creating content and article settings Articles – The WYSIWYG and content parameters Articles – Adding intro text Articles – Editing content from the front end / Creating Menus Creating Menus – category blog layout Creating Menus – Link article menu item Components - DocMan Components – to create DocMan categories Components – creating a link to DocMan on your site and Adding a document to DocMan on your site Components – creating a link to DocMan on your site and Adding a document to DocMan on your site Adding a Calendar Adding a Calendar Adding a Calendar – getting the calendar code to make it appear Images – adding imags to the media manager Images – creating a folder, uploading an image and adding images into content items Images –adding images into content items The Control Panel The Control Panel Template Images and Logos – header image and logo image locations Template Images and Logos – multiple template header images Template Images and Logos – using the array for a new image per menu item Template Images and Logos – using an individually named image for a new image per menu item Template Images and Logos – using an extra module for rotating images Uploading new logo or header images for Cpanel Redirecting your Old Website Notes Notes

Page # 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

Joomla User Guide – Sandhurst CEO Page 2


Administrator Control Panel This is what you will see when you log into the administrator backend of your Joomla site, it is called the Control Panel.

This guide has been set up to assist you with creating your site and to enable you to continue developing your site after the 2 training days are complete. Feel free to write your own notes in this guide as we go. GLOBAL CONFIGURATION SETTINGS Click on Global Configuration.

Joomla has several settings that you can set once and they will then be set across the whole site. These settings can be overridden on specific pages if you choose, but the benefit of setting global settings is not having to add the same settings to every page you create. On the above ‘Site’ tab, we can modify several settings. Our focus will be:    

Default WYSIWYG Editor Global Site Meta Description Global Site Meta Keywords SEO Settings

– choose JCE – this is the toolbar you use to format content – Type in what will appear under you site listing in search engines. – Type in what words people will use to find your site in search engines. – Choose ‘Yes’ for search engine friendly URLs.

Joomla User Guide – Sandhurst CEO Page 3


System Tab Click on the ‘System’ tab and you will see the following:

Changes we will make here are:  

Allow user registration – no Session Settings – Session lifetime = 30 minutes

Server Tab

Changes we will make here are:   

Locale Settings Mail from From name

– change time to Eastern Australia – add your email address – add your name

Joomla User Guide – Sandhurst CEO Page 4


SITE TEMPLATE MODIFICATIONS To access the following screen, click on the ‘Extensions’ menu button, then choose ‘Template Manager’.

This is where we can choose the default template for the site. The template is what gives us the layout and look of the site. Most templates have several inbuilt tools or colour options that we can turn on or off. It is important to do this first so you know what your working space looks like. To do this, click the radio button next to your default template name and then click the ‘Edit’ button in the top right of the template manager. You should now get a screen that looks like the following.

You will notice a variety of options for your template in the ‘Parameters’ panel. Each template has different options, somre will have more than others. Once you have made all your choices/changes, simply click the save icon in the top right of the screen. Then, open up another browser window, type in your site address, hit refresh and check to see that the changes have taken place. Due to caching issues, this may not happen instantaneously. You can modify these settings as many times as you wish, but be aware they may affect other changes across your site, such as images and logos if you change colour schemes.

Joomla User Guide – Sandhurst CEO Page 5


USER MANAGER To access the following screen, click on the ‘Site’ menu button, then choose ‘Users Mangers’.

This is where you can create new users for your site. Users can have a variety of permissions to allow them to do or access different parts of the site. Generally, you would create users for those who are going to access the site to update information or, for those who are going to access parts of the site that aren’t available to the general public. To create a new user, click ‘New’ from the menu on the top right.

Now simply fill in the details for the new user, making sure that they have their own email address as they will receive an email with their username and password. Each user needs to fit into a specific group.    

Registered – will allow access to an extra menu and to see content or documents that have been password protected. Author – allows users to add new content to the site to be reviewed before being published. Editor – allows users to add new content and edit existing content before it is published. Publisher – can create new content, edit existing content and allow content to be published and live on the site.

  

Manager – has publishing rights and access to some parts of the backend. Administrator – more rights in the backend than a manager. Super Administrator – access to everything front and back. (this is the account you are using now)

Choose the editor you want them to see if they are going to update content pages, choose the JCE editor.

Joomla User Guide – Sandhurst CEO Page 6


MODULES To access the following screen, click on the ‘Extensions’ menu button, then choose ‘Module Manager’.

There are 2 types of modules.

Module positions – these are determined by the site template and are effectively positions in the site where you can place component items or other content.

Modules – are parts of components or dynamic options that show specific content or they can be content themselves.

Editing a module To edit an existing module, what it doescontent and where the module appears on the site, click on the module name and it will open up.

When the module opens up, in this example it is part of the Docman document management tool, you will have a variety of different parameters you can set to decide:   

What content it shows. Where it appears in the layout. What pages it appears on throughout the site (menu based)

Joomla User Guide – Sandhurst CEO Page 7


Creating a custom module From the ‘Module Manager’ (see below) we can create our own modules with our own content to appear in any module position on our site.

Simply click the ‘New’ icon and you will see the following screen which is a list of default module types. There are lots of other modules that do different things that can be downloaded from joomla.org

In this case, we are going to create a custom module that has a short description of our school in it. Click on the ‘Custom HTML’ module type to see the next screen.

The first thing you need to do is give it a Title. You now have some parameters to choose from Joomla User Guide – Sandhurst CEO Page 8


    

Show Title – yes or no if you want the title to appear as part of the module. Position – choose the module position for your template you want it to appear in. Order – if you have more than 1 module in the same position, which one comes first. Access Level – who can see this module. Menu Selection – which menus will this be associated with, i.e whenever I am on the home menu page I will see this module. You can pick and choose which pages the module appears on.

The second part of the module creation is to add in the content.

In the box above, type in what the content is for the module, e.g. a school slogan, contact details etc. Images can be added in here as well if you require, but they must be added to the ‘Media Manager’ first, more on this later. When finished, click the ‘Save’ icon in the top right. Then open another browser window to view the changes you have made. Also make a new module which is a login form and publish it your site.

ARTICLES THIS IS IMPORTANT!!! All articles that goes into a site must be aligned to a section and a category. No articles can be made unless it can be assigned to these 2 things. So you must create sections, then categories and then the article. 

Section – an overarching group for your content. You can have as many sections as you like within a site, and they should be named to reflect the type of articles that will go into them to help you find specific articles at any stage. For example: A school site might have a section called ‘Curriculum’

Categories - these are sub sections of your main sections. Once again you can have as many as you like and they should fit the type of article that is going to fit them. For example, if our site has a ‘Curriculum’ section, then my categories might be: Literacy, Numeracy, The Arts or they might be VELS linked with the strand names as category names.

Articles – any information for your site. To follow our example pages of content called ‘Reading at Home’ and ‘Spelling programs at school’ would fit naturally under the ‘Literacy’ category which is part of out ‘Curriculum’ section. You can have multiple articles in any category.

Creating Sections To access the following screen, click on the ‘Content’ menu button, then choose ‘Section Manager’.

Joomla User Guide – Sandhurst CEO Page 9


This will show a list of all the sections you currently have for your site. To create a new section, click the ‘New’ icon on the top right. You will see the following:

Simply give the section a Title (e.g. ‘Curriculum’ from our previous example) and complete the following parameters:  

Alias Image

Access level

 

Published Description

– same as title – you can set a default image to appear when you use ‘section’ menu options (they will be covered later) – who do you want to view the content in this section? Often better to change the article access, rather than the section. – Is this ready to be published? – A short description about the section and the content that will be within it. This only appears when you use ‘section’ menu options or when you choose from parameters in article items.

Click ‘Save’ when you are finished.

Creating Categories To access the following screen, click on the ‘Content’ menu button, then choose ‘Category Manager’.

Joomla User Guide – Sandhurst CEO Page 10


This will show a list of all the categories you currently have for your site. To create a new category, click the ‘New’ button on the top right. You will see the following:

Simply give the category a title (e.g. ‘Literacy’ from our previous example) and complete the following parameters:  

Alias Section

Image

Access level

 

Published Description

– same as title. – from the drop down choose the section that the category will be part of (from our previous example, Literacy would be in the ‘Curriculum’ section. – you can set a default image to appear when you use ‘section’ menu options (they will be covered later) – who do you want to view the articles in this category? Often better to change the article access, rather than the section. – Is this ready to be published? – A short description about the category and the content that will be within it. This only appears when you use ‘category’ menu options or when you choose from parameters in article items.

Click ‘Save’ when you are finished.

Joomla User Guide – Sandhurst CEO Page 11


Creating Content To add content you need to ‘Content’ and then ‘Articles Manager’. You should now see a screen (like below) that will show all the articles for the site.

Article Settings Much like the global settings for the site, we can set some global parameters for all articles that are created. This means you don’t need to create these settings for every article you make. At any time the article global settings can be overridden for individual articles. To set up global parameters, click on the ‘Parameters’ icon to get the following pop up window.

To create your new articles, click on the ‘New’ button on the top right.

Joomla User Guide – Sandhurst CEO Page 12


Simply give the content a title (e.g. ‘Helping your child to read’ from our previous example) and complete the following parameters:  

Alias Section

  

Published Front Page Category

Article Text

– same as title. – from the drop down choose the section that the content will be part of (from our previous example, this would be in the ‘Curriculum’ section. – Is this article ready to go live? – Is this article to appear on the front page of the site? – from the drop down choose the section that the category will be part of (from our previous example, this would be in the ‘Literacy’ category. – this is where the actual information/content goes. It can be typed in directly or pasted in from another document. IT IS BEST PASTED IN FROM WORD WITH NO FORMATTING AT ALL!! This doesn’t upset the site CSS too much.

The WYSIWYG ( What you see is what you get)

The WYSIWYG looks and acts much like a normal toolbar from a word processor, with a few extra features.   

Insert plain text Docman Link Insert image button

– allows you to paste from word and removes most extra code that can affect the site CSS. – allows you to link directly to a document you have placed in your sites document manager. – inserts an image directly into the content from the site media manager.

Content Parameters Each content page allows you to create some added functionality to your site. We are going to look at the 3 parameter tabs in detail which are found on the right hand side of the content page. Some of these we have already set in the global site configuration so you may not need to alter them, but if so this is where you do it. Parameters (Article) 

Access level

– who has access to this content.

Change creator – will show list of user accounts. Changing this will impact on who has editing rights to the content.

Start publishing – this allows you to create content, change the date and time so it appears on the site at a set date.

Finish publishing – set the date and time so the content will automatically unpublish itself from the site.

Joomla User Guide – Sandhurst CEO Page 13


Parameters (Advanced) Most of these parameters have been set in the global configuration for the site we set up at the start. If you want to override them, this is where you can do it. For example, we said earlier that we wanted the email icon to appear on every page. If you wanted to take it off this page, then simply use the drop down arrow and choose ‘Hide’. In relation to the section and category names it is best to choose ‘NO’ or ‘Hide’ as they add extra un needed text onto your content pages.

Metadata Information This is where you can add specific descriptions or keywords for each article you create.

Adding Intro text For some options of how your site displays it’s content you can use the ‘Into Text’ option. This means if you use the blog menu options, you can display the names and a small piece of information about each article within a given section or category. This is handy to reduce the amount of drop down menus. To use the ‘Intro Text’ function, simple type a small descriptor about the article in the text edit area, then press the ‘Read more’ icon on the bottom of the page. This adds a line to your page and then anything you type under the line becomes the full content for the article.

Joomla User Guide – Sandhurst CEO Page 14


When finished creating you article, simply click the ‘Save” icon.

Editing Content from the Front End Once you have made your content items in the back end, they can be edited in the front end of the website. All you need to do is log into the website with Publisher access or higher. Then navigate to the content item you wish to edit. Next to the title of the content, will be a little edit icon, which looks like a yellow pencil on a notepad. Simply click on the icon and the content item will open up with the WYSIWYG. Edit the content and click ‘Save’ and the content will be automatically updated.

CREATING MENUS Creating menus in Joomla is easy, but can be confusing as there are several different types of menu choices. As well as that you can have as many different menus as you want as well. We will focus on the ‘Main Menu’. Click ‘Menu’ and then ‘Main Menu’ to see all the menu items you already have.

To create a new menu item, click the ‘New’ button.

You will now see a list of all the different menu item choices that you have. We will focus on the Articles options so, click on ‘Articles’.

Joomla User Guide – Sandhurst CEO Page 15


Now we will focus on 2 types of menus to create. 

Category blog layout

– This will be the first menu buttons we use for any links. This will show a list of all the articles (and show any intro text) for the selected category.

Article Layout

– This will be used to link directly to specific articles and will be the drop down buttons from the menu items.

Category blog layout Any menu item need to have something to link to. This type of menu item allows you to create drop down menu items from it so we choose this as our ‘base’ for each drop down menu item for our site navigation. Choose the ‘Category bog layout’ option from the ‘Articles’ item. You will know see the following.

Joomla User Guide – Sandhurst CEO Page 16


Give the menu item a title, as this is what will appear as the name on the button on the site.   

Alias Parent item Access level

– same as the title. - needs to be top, so it will appear as its own button on the menu bar. – who has access to see this menu item.

Parameters 

Category

     

Description Description image # Leading # Intro Columns #Links

– this is the category that the menu button will link to. When clicked on the site, a page will be created showing in a list all the articles for the chosen category. – if you choose show, this will show the description you typed in for this category. – show if you want the category image to show. – how many articles to flow across the top of the page, generally set it to 0 – how many articles to show their intro text, I usually set it to 10 – leave it at 2 usually. – how many other articles that will appear from this category at the bottom of the page.

There are also other parameters you can set for this menu item as well. I generally turn off the PDF, print and email options in the Advanced tab. When finished click the ‘Save’ button. Link Article Menu Item This menu item allows you to link directly to any articles you have created. To create a ‘Link to an article menu item, make sure you are in the ‘Menu manager’ for the ‘Main Menu’. Click the ‘new’ button and then choose the ‘Articles’ option, then click on the ‘Article Layout’ option. You should see the following screen.

Give the menu item a title, as this is what will appear as the name on the button on the site.   

Alias Parent item Access level

– same as the title. - needs to be top, so it will appear as its own button on the menu bar. – who has access to see this menu item

Parameters 

Select article

– click on ‘select’ to find the article you wish to link to.

There are also other parameters you can set for this menu item as well. When you have finished, click the ‘Save’ in the top right hand of the screen. Joomla User Guide – Sandhurst CEO Page 17


COMPONENTS Components are ‘add ons’ that you can put into your site to achieve additional functionality. Some work just by themselves or with the help of additional modules to display the required information. Some components are purely for the look of the site, such as flash objects, photo galleries or to integrate with other websites such as Google maps. Other components do a lot of automation of data and storing of information such as calendars and document managers. For this session we are going to look at 1 component: 

DOCMan – a component used to store files online, in categories to be viewed or downloaded, such as newsletters, permission forms, information flyers etc.

All components are found under the ‘Components’ menu item in the administrator backend. DOCMan PLEASE NOTE: As Docman is not quite 1.5 compliant you may get a couple of error messages, ignore these. DOCMan has 2 parts to it. First of all you need to create some categories in the ‘backend’ and then you add the actual documents via the back end or by logging into the ‘front end’ of your website with publisher or higher access. Firstly, to set up the configuration, go to ‘Components’ then click on DocMan – configuration’.

Now click on the ‘Front-end’ tab.

The options to change here are  

Number of documents per page. Default listing order. Joomla User Guide – Sandhurst CEO Page 18


Now click on the ‘Permissions’ tab.

The options to change here are   

Upload Approve Publish

– who has permission to add documents. – who has permission to approve documents. – who as permission to publish documents.

Now click on the ‘Security’ tab.

The options to change here are 

Anti-leech system

– change this to yes.

To create DocMan categories Click on ‘Components’ then DocMan - categories.

This shows you the list of categories you have, to create a new one, click the ‘Add’ button on the top right of the screen.

Joomla User Guide – Sandhurst CEO Page 19


You will know need to do the following:   

Category Title Category Name Parent Item

  

Image Access Level Description

– give the category a title, eg holidays, school camps, P&F Meetings etc. – same as title. – this works like our menus. For a main category such as ‘Newsletters’ it would be ‘Top’, however if you wanted a category under ‘Newsletters’ such as ‘Term 1”, you would need to choose ‘Newsletters’ for the drop down. Remember, you need to create the main categories first before you can create sub categories. – will select and show an image next to the category on the website. – who has access to this category? – it is worthwhile putting in a short description so visitors to your site have an idea of the type of documents that are in this section.

When finished, click the ‘Save’ button. Creating a link to DOCMan on your site Next go to your menu manager for your main menu. Create a new menu item and from the options, choose ‘Docman. On the next screen you will be able to name the menu button and then choose ‘DOCMan’ from the list of components. Click save when you are finished. Adding a document to DOCMan on your site This can be down from the front or back end. From the front end you will need to log in and have a menu link to DocMan to be able to do it and have publisher rights. This is how to do it from the back end, but the process almost identical from the public side of the site, Go to ‘Components’ then ‘DocMAn – Files’.

Joomla User Guide – Sandhurst CEO Page 20


Click on ‘upload.

Now we start following the steps, so select how you want to upload your file and then click ‘Next’.

For step 2, simply browse for the file on your computer, then click the ‘Submit button.

When it has uploaded, click on the ‘Make a new document entry using this file’ icon.

Joomla User Guide – Sandhurst CEO Page 21


Step 3 allows you to add some additional information for the document. 

Name

  

Category Approved Published

– this will put in the name of the document, but you may want to reword it so people know exactly what they are about to view or download. – select the category that the document will be found under. – is this document ready to go onto the site? – choosing yes makes the document available for people to view

Now you need to scroll down to the bottom of the screen to see the following.

On the Permissions tab, choose those who have access to this particular document. Scroll back up to the top and then click the ‘Save’ button. The document will now be visible on the site via DocMan. Also once you have documents in DocMan you can directly link to documents from any articles you create. Adding a Calendar Joomla has several different calendar components available. We have decided to use a Google calendar as this allows us the option of then using the calendar in anumber of other different ways, such as within MyClasses or MyDesktop of even syncing with Outlook or iCal. To use Google calendar, you first need to create a Google account. To do this, go to the Google homepage and you will see in the top right corner the option to ‘Sign in’. Click on it.

You should now see the following page, when you do click on the link ‘Create an account now’.

Joomla User Guide – Sandhurst CEO Page 22


Now you should see a form. Fill this out and make sure you use your school email address. When you have completed the form you will get a message saying it has sent an email to your account. Go to your webmail and open up the verification email. In this email there will be a link to click on. Once you have verified the account, go the following address. www.google.com/calendar - it will now ask you to sign in with your Google account. You should see the following screen.

Click on the ‘Create’ link (circled above) You will see the following screen.

This is where we name the calendar and give it some information. You can also share the calendar with others to give them access to view it or modify it. Important, we have to make this calendar a public one. When you are finished, click the ‘Create Calendar’. You will now be back at the calendar page where you can add in some events by clicking on the relevant date and adding the events. When you are ready to add the calendar to you website, we need to do 2 things:  

Create a custom module for the calendar to be displayed. Get the embed code for the calendar to paste into the custom module. Joomla User Guide – Sandhurst CEO Page 23


So, go to your website back end follow the instructions from page 8 of this booklet on creating a ‘Custom HTML Module’. Create a new module and call it ‘School Calendar’. Once your module is created, come back to you Google calendar page.

Getting the calendar to code to make it appear Now, in the ‘My calendars’ list you will see the name of your calendar and it will have a drop down arrow next to it. Click on this arrow and choose ‘Calendar settings’. On this page you see the following section.

Click on the link that says ‘Customize the color, size and other options’. You should see the following screen.

Joomla User Guide – Sandhurst CEO Page 24


Now you have several options to how your calendar appears, the following ones are recommended.         

Calendar title Show Default View Width Height Week Starts On Background colour Border Calendars to Display

– Name your calendar. – Tick the following: Title, navigation buttons and date. – Choose Agenda. – Will need adjusting based on your template and module position. – Again will need adjusting based on your template and module position. – I choose Monday. – Your choice. – Again, your choice. – Tick the calendar you want to show.

Now, important, once you have made all your choices, go to the top and click the ‘Update HTML’ button. This updates the code to reflect the changes you have made. When done, you need to highlight the code in the box at the top of the page and copy it. Now, go to your website back end and then Module Manager. Click on the calendar module you made to edit it. When it opens up, on the WYSIWYG click on the ‘HTML’ icon. This brings up a pop up window where you can now past in the calendar embed code. Click the ‘update’ button when finished. Now click the ‘Apply’ button to apply the changes and then go to your website front end to see what it looks like. If you need to change the width or height of it, do the following:  Go back to you Google calendar.  Click on Calendar settings.  Choose the ‘Customize the color, size and other options’  Change the width or height.  Click the Update HTML’ button.  Copy the code  Go to the calendar module and edit it.  Click on the ‘HTML’ icon on the WYSIWYG  Delete the old code and paste in the new one.  Click update.  Apply the changes  Go to the website front end and see if it appears how you want it to. You may need to do this a few times to get the look you want.

IMAGES Joomla allows you to add images into individual content pages, this is a 2 step process. First you need to add the images you require to the Media Manager. The second step is to then access those images via the content item page you want them to appear in by using the WYSIWYG editor. Adding images to media manager In the ‘Back end’, you need to ‘Site’ on the main menu and then click on ‘Media Manager’. You will see this.

Joomla User Guide – Sandhurst CEO Page 25


All images need to be added in the ‘stories’ folder, so click on it and you will see this.

Now from here you can do 1 of 2 things. Create a folder Firstly, you can create directories to organise you images. (highly recommended!!) To do this, in the top right you will see ‘Create Folder’. Simply type in the name of the directory you want to store images in and then press the ‘Create Folder’ icon. This creates a new folder, like the food and fruit folders, that you can upload images into. Upload an image To upload an image, click on the directory you wan the image to be in. This will then open up that directory. Next, click the ‘Browse’ button and search to find the image you want to upload and select it. Finally, click the ‘Upload’ icon to upload the file. You need to do this for every image you want to be able to add to content items. Adding images into content items To add an image to a content item, go to ‘Content’ on the main menu bar and then choose ‘All Content Items’. This will show you a list of all the content items you have. Click on the one you want to add an image to. You will see a screen that looks something like this.

To add one of the images from your Media Manager to the content page, click in the page where you want the image to go. Joomla User Guide – Sandhurst CEO Page 26


Then click on the ‘Insert Image’ icon on the WYSIWYG. You will see this screen.

All you need to do is find the directory that your image is in and click on it. You will know see the following.

Now all the images that are in that directory will appear. Click on the image you want to use and you will see a preview on the bottom right. You now have some small additional options to do before you insert the image. On the top of the screen you will see the following.

Joomla User Guide – Sandhurst CEO Page 27


Change the following:    

Description and Title - Remove the file name and name the image. This text is what will appear when you move the mouse over the image on the site. VSpace and HSpace - This is a small amount of white space that will be put around the image vertically and horizontally. Alignment - How the image will be aligned Border - By ticking the border box you can add some different borders around your images.

When you are finished, click the ‘Insert’ button on the bottom right of the window and your image will be in your page. Before saving the content page, click ‘Apply’ and then view the page in another browser window to see if it what you want.

THE CONTROL PANEL When it comes to our websites, they are hosted on a web server. This means we can access our website files online at any point via the control panel. We only need to do this when we are changing our template image files. All other modifications are done via Joomla. To change the default template logos and main images, we need to create new image files and then upload them via the control panel to make sure they have the right name and are in the right location for the template to find them. This is done via the control panel. To open up your control panel, type in your school joomla address and add/cpanel at the end of the address. e.g. www.gmldeisgn.com.au/cpanel – you will then be asked for the site admin username and password. You will see the following screen.

This now gives us a whole lot of options available to our site, what we want to do is click on the ‘File Manager’ icon. You should now see the following. Joomla User Guide – Sandhurst CEO Page 28


Tick the ‘Skip this question’ box and then click ‘Go’. You will now see the following.

To access the location for the images we will want to change, choose the ‘templates’ folder and double click on the icon. You will know see the following.

Now, select the default template for your site, in this case I have set it to ‘Ja_labra’, select it and click on the icon. You will know see the following.

Joomla User Guide – Sandhurst CEO Page 29


All the files related to our template will now be found in the ‘images’ folder. Select this and double click on the icon. The next screen that appears will show all the images related to the template. These will be the file locations for your template and logo files that we will speak about in the next section.

TEMPLATE IMAGES AND LOGOS Each template handles the main image (across the top or rotating images) and logos differently. Each main image or logo is saved with a specific name and in specific directory in the website. Listed below is the name of the templates, with the name of the main header image(s) and logos and their locations. When we update these images to add our own, we need to make sure we keep the same file names, and the file location. Template Header Images Template Main Header Image Name Location Name Ja Antares header_image1.jpg * templates\ja_antares\images\header Ja Edenite Ja Labra Ja Mageia header1.jpg or header1-n.jpg * templates\ja_mageia\images\header\cyan * add your colour Ja Olyra n/a Ja Polaris header_image1.jpg * templates\ja_polaris\images\header Ja Pyrite Ja Xenia sh-bg.jpg * templates\ja_xenia\images\header Ja Zibal sh01.jpg * templates\ja_zibal\images\black * add your colour * means your template can have more than 1 main header image. Each subsequent image needs to follow the same naming convention and be saved in the same folder. We will discuss this later. Template Logo Images Template Name Ja Antares Ja Edenite Ja Labra Ja Mageia Ja Olyra Ja Polaris Ja Pyrite Ja Xenia Ja Zibal

Logo Image Name logo-blue.jpg (add colour of your template)

logo.gif or logo-narrow.gif logo.jpg logo.gif logo-blue.jpg (add colour of your template) logo-black.jpg (add colour of your template)

Location templates\ja_antares\images

templates\ja_mageia\images templates\ja_olyra\images\green * add your colour templates\ja_polaris\images templates\ja_xenia\images templates\ja_zibal\images

Joomla User Guide – Sandhurst CEO Page 30


Multiple template header images Some templates have a built in function that allows you to assign a different image to each different menu, while some templates have rotating images built into them. If your template has either no main image or only 1 main image, you can add a module that will allow you to have rotating images on your site. You will find your template in the list below and the way the template operates regarding header images. No main image for the site Ja Olyra (could use Ja Slideshow) Only 1 header main image for the site Ja Xenia Uses the HTML array for a new image per menu item Ja Mageia

Ja Zibal

Uses an individually named image as a module for a new image per menu item Ja Polaris Uses an extra module for rotating images Ja Antares

Ja Edenite

Ja Pyrite

Ja Labra

THE FOLLOWING PAGES RELATE TO THE INSTRUCTIONS ON HOW TO DO THE FOLLOWING: - Use the HTML array for a new image per menu item - Use an individually named image as a module for a new image per menu item - Use an extra module for rotating images If your template is not listed under any of these headings, you do not need to worry about the pages that follow, however, you can add the extra module, in this case the JA Header Module or JA Slideshow, to any template. Using the HTML array for a new image per menu item Only applicable for the following templates: Ja Mageia

Ja Zibal

Templates that work in this way need you to save your images with a particular name and sequence, save them in a specific location and then reference to them via the HTML editor in the ‘back end’. Step 1: Create the new main header image or images and save them. Your header image(s) need to be named according to the naming conventions below and saved in the specific location. Template Name Ja Mageia Ja Zibal

Main Header Image Name

Location

header1.jpg or header1-n.jpg sh01.jpg

templates\ja_mageia\images\header\cyan * add your colour templates\ja_zibal\images\black * add your colour

Step 2: To access the following screen, click on the ‘Extensions’ menu button, then choose ‘Template Manager’.

Joomla User Guide – Sandhurst CEO Page 31


Choose the radio button next to appropriate menu name (should have a tick next to it to say it is the default template for the site) and then click the ‘Edit’’ button on the top right. You will know see the next screen.

Now click on the ‘Edit HTML’ icon in the top right. You should now get a screen full of HTML code that looks like the following.

In the highlighted area you will see the following or similar: $ja_header_images = array(‘sh01.jpg’,’sh02.jpg’,sh03.jpg)’; // Each sub header image will be assigned to each menu The sh01.jpg refers to the name of the images that will appear for each menu item. If you only want 1 image for the whole site, you would delete the other image names here. If you have more than 3 images for your site, you would need to add the names of the other images eg sh04.jpg, sh05.jpg etc. Make your modifications and press ‘Save’. Using an individually named image as a module for a new image per menu item Only applicable for the following template: Ja Polaris Templates that work in this way need you to save your images with a particular name and sequence, save them in a specific location and then reference to them via new modules that you create in the back end with the ‘Site Modules’. Step 1: Create the new main header image or images and save them. Your header image(s) need to be named according to the naming conventions below and saved in the specific location. Template Name Ja Polaris

Main Header Image Name header_image1.jpg *

Location templates\ja_polaris\images\header Joomla User Guide – Sandhurst CEO Page 32


Step 2: To access the following screen, click on the ‘Extensions’ menu button, then choose ‘Module Manager’.

Step 3: Click new and choose ‘Custom HTML’ module, then you should see this screen.

You will need to do the following. 

Title

 

Show Title Position

- This needs to be the name of the image you want to appear eg header_image1.jpg (this name will be based on the naming conventions for your template. - Change to no. - Different for each template, but usually is ‘Header’ or ‘Top’

You also need to choose the menu item and the associated pages you want that image to appear on. If selecting more than one, you need to hold down ctrl when you select the additional pages. When you have finished, click ‘Save’. This will now add the new module to your list. Make sure you enable it. If you want a different image to appear for a different menu item, you need to go through this process again. Using an extra module for rotating images Only applicable for the following templates: Ja Antares * This can be done for other templates as well and using other image related modules such as JA_Slideshow or Ja Header. Templates that work in this way need you to save your images with a particular name and sequence, save them in a specific location and then reference to them a module that you install in the back end of the site. I have already installed the module called ‘JA Header Module’ Step 1: Create the new main header image or images and save them. Your header image(s) need to be named according to the naming conventions below and saved in the specific location. Joomla User Guide – Sandhurst CEO Page 33


Template Name Ja Antares

Main Header Image Name header_image1.jpg *

Location templates\ja_antares\images\header

Step 2: To access the following screen, click on the ‘Extensions’ menu button, then choose ‘Module Manager’.

Step 3: Find the module that is called JA Header or Ja Slideshow Module and click on it. You will see the parameters you have to set it up how you want it to appear. In this instance I’ve chosen mod_jaslideshow. I now see the following options I have.

You should modify the following at the very least.     

Show Title Position Menu Selection Slide width/Height Images Folder

Alt Images

- Change to no. - Where in the template do I want it to appear. - Based on my menu, which pages will this module appear on. - My need modifying based on the template you are using. - Important: this is the folder in the media images that it is going to get the images from. I suggest having a sperate folder just for this module. Images must be in the folder you choose to before they appear. - Text that will appear when people roll their mouse over the images.

Once you have made your selections, click ‘Save’ and don’t forget to ‘Enable’ it. Joomla User Guide – Sandhurst CEO Page 34


Uploading new logo or header images via Cpanel When you have created your new logo and header file images using editing software such as ‘Fireworks’, you need to upload these images to the right location for them to appear. Referring back to the earlier table on page 34 you will find the location for the logo file or main header files via the control panel. Remember the file names of your new files need to be the same as those in the table! For this example I have found the logo.gif file for my template.

All I need to do is click the ‘Upload’ icon at the top of the screen. You should see the next screen.

All I do now is click the first ‘Browse’ button, find the new logo.gif file on my computer and it will upload. It should ask you to overwrite the existing file, say yes. Now go to the front end, refresh the page and your new logo should appear on the site. Sometimes some machines cache images, so it may take a few visits before it becomes visible on your machine, however it will be visible on other machines.

Joomla User Guide – Sandhurst CEO Page 35


REDIRECTING YOUR OLD WEBISTE When you are ready to redirect people to your new site, you need to upload a file to SINA to do this. Firstly, we need modify the redirection page that is on the CD. To modify it, find the ‘index.htm file in on the CD. Right click on it and chose ‘Open with’ and then choose ‘Notepad’. You will see this.

st

All you need to do is read through the file and anywhere you see the words yourschoolname, replace them the 1 part of your school domain name, eg sjnumkh. Save and close the file. Then log onto your school SINA account as the administrator, go to ‘Web Manger’ and then ‘Page uploader’. Simply browse for the new index.htm file we have made and it will be uploaded. Now when people visit you site, they will get a quick message that they are going to the new site and then the new site will appear.

Joomla User Guide – Sandhurst CEO Page 36


NOTES:

Joomla User Guide – Sandhurst CEO Page 37


NOTES:

Joomla User Guide – Sandhurst CEO Page 38

Joomla! 1.5 Schools Training Manual  

Notes on how to edit and configure Joomla!