Multimedia cho Joomla part 28 potx

The global parameter for articles is found at the top-right of the page when viewing the Article Manager screen: When you click on the Parameters button, a new screen with a lightbox pop

Generally these settings can be left at default, but if your site is not sending e-mails

for some reason, this is the first place to look and check your e-mail configurations

Once you are happy with your Global Configuration settings, make sure you

click on the Save button at the top-right of the Global Configuration screen

to save your changes

Content parameters

The Article Manager in Joomla! contains a "Global Parameter" setting that sets the

default options for your Joomla! Articles You can override these within each article,

but it is good practice to set these globally first, so you don't have to go back and

adjust them later on

The global parameter for articles is found at the top-right of the page when viewing

the Article Manager screen:

When you click on the Parameters button, a new screen with a lightbox pop-up

effect will display the available parameters For this tutorial, let's adjust the

following to "Hide":

Author Name

Created Date and Time

Modified Date and Time

You can also adjust any other article parameters that you feel suitable for

your project

Front page

When you install Joomla!, the Main Menu item that links to your front page

(or default menu item) will have the title set for this menu link to be the same

as your site name

Sometimes you may want your front page item to say something different, such

as "Welcome to our site" You can adjust this front page title by visiting the default

menu item to that page, in this case our Home menu link.

To adjust your title, go to Menu|Main Menu and click on the Home menu link.

•

•

•

On the right-hand side, under Parameters (System), you will see the option to

rename the menu link Page Title Let's rename this simply to Welcome for

now so you can see how this affects the Joomla! front page:

When we view the frontend of our website now, and click on the Home menu link,

the page title will change from JMultimedia to Welcome.

Sections and categories

One more thing to do now, let's head over to take a look at our sections

and categories

Sections and categories are the foundations of our Content Management System

administration They are an option in 1.5 (meaning you don't have to utilize them)

However, they do allow you to do two things if you choose to use them:

1 If you have a number of articles in your Joomla! website, then using sections

and categories allows you to organize the content and display it accordingly

You can use filters when viewing the Article Manager page that can help you

find articles easy For sites that add new content regularly, this can really

help to keep your site organized

2 There are built-in features in Joomla! which can take advantage of this article

organization Menu item types (also called layouts) can link to sections or

categories and automatically display the contents within these depending

Many other Joomla! and third-party modules utilize sections and categories in order

to display news items for that particular topic By grouping all of your articles on a

particular topic into one category, for example, Latest News, any new items you add

to this category can be automatically displayed on your site pages via a module We

will look into this shortly

Sections and Categories can be easily added from the Content|Section Manager,

and Content|Category Manager menu links You can also get to these areas from

the icons located on the administration Control Panel:

If you keep an organized site, you will probably constantly visit these areas in order

to add new sections and categories For a start, I am going to put the following in

place To create a new section or category, simply click on the "New" icon at the

top-right of the respective manager screens, and give the section or category a title,

then click on Save.

Sections

Sections are as follows:

Site

Images

Audio

Video

General

News

•

•

•

•

•

•

Categories need to be located within sections, so create the following categories with

the respective sections you just created:

Site: Create a category called General

Site: Create a category called Legal

Images: Create a category called General Image

Audio: Create a category called Podcast

Audio: Create a category called General Audio

Video: Create a category called General Video

General: Create a category called Content

News: Create a category called Latest

That should provide us with a basic organization structure that we can define further

as required

Choosing a template / theme for your site

A Joomla! Template is used to manipulate the way that content is delivered to the

browsing device Templates are extremely powerful elements to a Joomla! site and

one of the defining factors between one site looking just like the next

Fonts, colors, backgrounds, links, and the way our extensions end up displaying

within the page are controlled or influenced by the Joomla! Template It is for this

reason that we need to choose a template that suits the purpose of the site By

this, I do not just mean the color scheme, but more so the layout and flexibility

of displaying the type of content required easily to our users

Templates can be added to a Joomla! install at any stage, and once added, they can be

adjusted with a combination of HTML, CSS and PHP, image and JavaScript skills

For the purpose of this project, I am going to utilize one of the built-in templates that

comes shipped with Joomla! 1.5 In order to change to this template, we need to go to

the Extensions|Template Manager menu link:

•

•

•

•

•

•

•

•

The Template Manager screen allows you to do two things, firstly you can set

your site's Default Template from the area, and you can also go into each template

to adjust any available Template Parameters

Firstly let's select the radio button on the left, next to the template named JA_Purity

and click on the "Default" icon on the top-right of the page This will make the

JA_Purity template the default for the site, and will now show on your page.

Secondly, let's click on the Title of JA_Purity to go and edit some of its parameters

Once you are on the Template Edit screen, you should see a list of parameters on

the right-hand side Adjust the following:

Template Width: Auto (Fluid)

Horizontal Navigation Type: Suckerfish Menu

You can adjust any other options as you wish and click on Save on that screen.

One more thing before we get down to business: A quick logo change for

this template

The JA_Purity template can easily be modified and is a great base for creating your

own site's theme Further customization tutorials for this template can be found

by visiting http://docs.joomla.org/Tutorial:Customising_the_JA_Purity_

template, or taking a look at the "Joomla! 1.5 Template Design", Tessa Blakeley Silver,

Packt Publishing book at

http://www.packtpub.com/joomla-1-5-template-design-2nd-edition/book

To change the JA_Purity logo to a custom logo for your website, you will need to

navigate to the JA_Purity template folder, which is located within your Joomla!

fileset If you are working locally, this is simply a case of visiting the following

directories and locating the file logo.png: htdocs|JMultimedia|Templates|

ja_purity|images|logo.png.

You will need to edit this in an image-editing program on your computer

Once the file has been adjusted, save the new logo (with the same png file

extension) in the same directory as the original The original file will be overwritten

and your new logo will be displayed in its place The default logo is 207 px wide by

80 px high If you need to adjust the logo dimensions to suit your new logo, then we

also need to make a change to the CSS file that is referencing the logo graphic

•

•

There are two ways to edit the CSS for your template:

1 External editing

Use an external editor on your computer by navigating to the following

file and opening it with an applicable editing program: htdocs|JMultimedia

|Templates|ja_purity|css|template.css.

Within the template.css file, search for the h1.logoa style It should be

located around line 956 within the file:

h1.logo a

{

width: 208px;

display: block;

background: url( /images/logo.png) no-repeat;

height: 80px;

position: relative;

z-index: 100;

}

Adjust the applicable height and width values for your new logo dimensions

and click on Save on this file.

2 Internal editing

You can also edit the template.css file using the built-in Joomla! CSS Editor

in the Joomla! Administration Here are the steps:

Navigate to Extensions|Template Manager.

Click on the JA_Purity template to view the Template Edit mode.

Click on the Edit CSS icon at the top-right of the screen.

Select the template.css radio button, and press the "Edit" icon

at the top-right of the screen

Use your browser search feature to search for h1.logoa Edit

the following values:

h1.logo a

{

width: 208px;

display: block;

background: url( /images/logo.png) no-repeat;

height: 80px;

position: relative;

°

°

°

°

°

If you have made logo adjustments to your site, the new logo should now appear

when you view the frontend of your website:

Before we proceed, refresh this page a few times in your web browser You will

notice that the JA_Purity template contains a nice feature, which is randomly

changing the top-right header background image So without actually adding

any multimedia features to our website yet, we already have the following media

elements in place:

Multiple images (including gradient and other template-styling images, in

fact, an impressive 19 images are now loading into my web page)

Text (including font adjustment controls)

Styled text using fonts from our CSS

Template image

Multimedia features

Now this is where the fun begins The following section separates out the media

features, and categorizes them into headings such as "Adding Video Features",

"Adding an Image Gallery", and so on We will use both built-in Joomla!

features and a range of third-party extensions in order to achieve a media-rich

working website

Text content

Due to the fact that there is no applicable content to drop into this web project, I

will include some Fake Latin textural paragraphs to help establish some throughout

the project Fake Latin text is very useful for simulating how a site page can look

with textual content It is also an option when the client may not have delivered the

content "copy" to you A Fake Latin text generator can be located at the following

website: http://www.4guysfromrolla.com/demos/latin.asp

•

•

•

•

Module positions

Module positions play a role of allowing you to display processed code within

different areas of your template There is a neat trick you can add to your browser

URL in order to see where module positions are located within a Joomla! Template

Simply enter in the following at the end of your main URL: /index.php?tp=1 So the

full URL should look like: http://localhost/JMultimedia/index.php?tp=1:

In most Joomla! Templates, this will display the available positions on the page and

give you a helpful reminder of their names and locations within the template

You can achieve the same effect by visiting the Extensions|Template Manager

screen and clicking on the template name you wish to preview On the Template

Edit screen, a preview button is located at the top-right of the page

Adjusting the menu

By default, our Joomla! Installation has the Main Menu module published in the

left-hand column The JA_Purity template has a built-in module positioning and

styling for your Main Menu to be displayed in a horizontal position underneath the

logo area To make your Main Menu show in this position, perform the following:

1 In your Joomla! administration, navigate to the Extensions|Module

Manager screen.

2 Locate the Main Menu module and click on its title in order to edit it.

3 In the Details area of the page, adjust the following parameters:

Show Title = No, Position = hornav:

4 Click on Save on this page and view the frontend of the website Your side

menu that was located in the left column will now show up in the menu bar

under the site logo:

Using this horizontal navigation area will help maximize the display space

Front page features

There are a number of ways to display content on a Joomla! website's "Home Page"

The front page component

The Joomla! front page is a default view of the com_content component This

component allows you to control how your home page is displayed The com_content

component has the ability to display multiple articles on the front page, helping to

create a magazine-type display of your articles The front page layout is configured

by the parameters associated with the Home link in the Main Menu.

To customize the look and feel of this, within the administration, navigate to

Menus|Main Menu and click on the Home link to edit it.

On the right-hand side, under Menu Parameters, you can adjust the number of

articles to be displayed and the number of columns to be shown in your front page

Let's set the numbers as per the following image:

Once you have changed the values, click on Save on that screen to save your

changes, and that is all we need to do now in this area If you refresh the frontend of

your website, you will see no changes yet, but we have set the display now for when

we add some content

Let's add a few articles into our website, so we can start to build our front

page features

Navigate to the Article Manager and create a new article by clicking on the "New"

icon at the top-right of the screen Remember our Fake Latin text generator; it will

now come in handy! Go grab some fake text (or use real text if you prefer) and

paste this into your new article Make sure you give your article a Title (I have used

"Article 1") and place this into the Section called "General" and Category called

"Content" Make sure the article is "Published" and also "Published on the front

page", then click on Save at the top-right of the screen.