Multimedia cho Joomla part 28 potx

Chapter 9 [ 277 ] Generally these settings can be left at default, but if your site is not sending e-mails for some reason, this is the rst place to look and check your e-mail congurations. Once you are happy with your Global Conguration settings, make sure you click on the Save button at the top-right of the Global Conguration 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 rst, 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 Modied 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. • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 278 ] 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 lters when viewing the Article Manager page that can help you nd 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 on the parameters you have set on that menu link. An example of this is the menu link to Section Blog, Section List, Category Blog, and Category List. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 279 ] 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 • • • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 280 ] Categories 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 dene 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 dening 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 inuenced 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 exibility 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: • • • • • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 281 ] The Template Manager screen allows you to do two things, rstly 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: Suckersh 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 modied 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! leset. If you are working locally, this is simply a case of visiting the following directories and locating the le 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 le has been adjusted, save the new logo (with the same .png le extension) in the same directory as the original. The original le 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 le that is referencing the logo graphic. • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 282 ] 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 le and opening it with an applicable editing program: htdocs|JMultimedia |Templates|ja_purity|css|template.css. Within the template.css le, search for the h1.logo a style. It should be located around line 956 within the le: 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 le. 2. Internal editing You can also edit the template.css le 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.logo a. Edit the following values: h1.logo a { width: 208px; display: block; background: url( /images/logo.png) no-repeat; height: 80px; position: relative; z-index: 100; } ° ° ° ° ° This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 283 ] 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. • • • • This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 284 ] 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. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Chapter 9 [ 285 ] 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. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 Joomla! Multimedia Project [ 286 ] 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 congured 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. This material is copyright and is licensed for the sole use by jackie tracey on 23rd February 2010 953 Quincy Drive, , Brick, , 08724 . 08724 Joomla! Multimedia Project [ 286 ] 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! . 279 ] 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. 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!