MiniDoc: Anna's Joomla Tips

[jazztpt]

Anna's Joomla Tips

for questions, inquiries and discussion pls proceed to this thread:
http://forum.joomla.org/index.php/topic,5585



Joomla makes the difficult parts of building and running a high-powered web site easy. That’s why so many people use it! But if you have never used a content management system before, it also seems to make a lot of easy things difficult. These tips are designed for someone who doesn’t know anything about content management systems. I’d never heard of one before installing Joomla (when it was Mambo).

If you’re like me, you’ll find these instructions VERY helpful. I don’t explain anything to you that you could see by poking around the administration page – go to the official help site for that. What I will tell you is how to think about your site before designing it with Joomla, and how to get from point A (“I want to …”) to point B (“here’s how”).

This tutorial changes occasionally, but here is a list of the chapters so far:

    1. How to think about content management
    2. How to organize your site
    3. Designing the look of your site
    4. Modules and pages
    5. Adding text and images
    6. Linking
    7. Blogs; Your front page
    8. Modules, Components, and Mambots
    9. Where is it?


Note: If you want newsfeeds, polls, or blogs on your site, Joomla is great! But you must expect to spend time learning it. Just remember that the most difficult part is the beginning, and you won't have any part of your site up quickly, even with the best tutorials. But speaking of the best tutorials, you should also go to this thread to see a list of other tutorials that have been written for Joomla:


Next tip: How to think about content management.

[jazztpt]

Most people who use the web are used to thinking about web sites in terms of pages and how they are linked to each other. Each page contains static content – once you create the page, it doesn’t change (until the web designer changes it). You might think of your site as having a tree structure: the home page links by menu to six sub pages, the “articles” sub page contains links to ten article pages, etc.

Joomla is organized differently because much of what will appear on your site is dynamic – it changes based on visitor input, newsfeeds, or other members adding content to the site. Dynamic content is updated whenever the visitor opens or refreshes the page. There is NO WAY in Joomla to look at what’s on a particular page (until you publish it on your site), so you need to think about it differently. (For more about pages, see tip #4.)

Each page of your site will contain various blocks of content (these blocks are called Positions). You set the layout for pages with a Template (more about Templates in tip #3), including the placement of blocks on the page as well as fonts, colors, & backgrounds. Then you place modules in the blocks (more about Modules in tip #4). Finally, you add content and assign it to the main body of your pages (actually you will assign it to menu items, but just think about them as pages).

Okay, enough about content management. Let’s get to your site!
Next tip: How to organize your site.

[jazztpt]

Okay - bear with me. I know you want to get something up and running right away, but that's not what Joomla is about. There are things you must know before you can get even one page up. But don't despair - once you set all the parameters for your site, putting really cool things on it is a piece of cake!

The current version of Joomla has a static hierarchy: you have to divide your content into three levels, no more, no less. Version 5.0 should have dynamic folder hierarchy – if you want just one level, you can have it. If you want ten, you can have that too. But for now, you will have to use the three level system: Sections, Categories, and Content.

Sections are big containers. They hold Categories. Categories are little containers; they hold Content. All the text & images you want to appear on a page are Content. The only catch is that you can’t create content without having a Section and Category for it to live in.

Imagine a filing system: sections are drawers, categories are folders, and content is pieces of paper. If you had all your pieces of paper lying around in your room, that would be a mess. If you had them in folders but the folders were lying all over the floor, that wouldn’t be much better. If you had them thrown in a drawer with no folders to organize them, that wouldn’t be so great either. So to keep things organized, you need to put all your papers (content) inside folders (categories) inside drawers (sections).

The other nice thing about having sections and categories is that you can assign different templates to them. So anything appearing in the “News” section could have two columns instead of three, leaving out the position that houses login and polls (for example). Then when some other member of your organization adds a news item, it will look like all the other news items and not like the product features pages.

Note: After all that about having to have sections and categories, there is a way to create content that is not in a section or category – it’s called “static content.” This doesn’t mean static as in static vs dynamic, it just means that it is not assigned to a section or category. But remember that if you do that you won’t be able to create more content that looks like it (shares its template). And I read somewhere that you can’t place static content on the front page.

So think about how your site will be organized, and whether you want different parts of the site to have different looks. Then force it (shove! push!) into the Joomla 1.x  system of Sections and Categories (and wait for Joomla 2.0 – oh happy day!).  See: Joomla Roadmap

Now on to Templates.
Next tip: Designing the look of your site.

[jazztpt]

Templates determine the look of your site, or of different sections of your site. If you go to the Template page of your admin (Site -> Template Manager -> Site Templates), you will see a few templates listed. Try clicking on one (the buttons to the far left, not the template name) and then clicking the “default” icon in the toolbar. Then browse to your site to see how the template changed the look of your site.

What is a Template? Templates are sets of files that determine the look of your site. The main file is “index.php,” which includes html code for layout elements like tables, your logo, etc, and inserts php code for dynamic elements. The next most important file is the style sheet or css file, which determines fonts, colors, and borders for each element in the site.

Check out this visual of your “index.php” file:
http://www.annacallahan.com/images/template_layout.gif

“header.jpg” is your logo. “body” is a block that will contain content. The orange blocks in the figure are Positions, which you can place in table cells. Remember that these Positions can contain any number of modules, and those modules can be turned on and off . (Imagine that in the “top” position you have a search module and a date module, for example, and in the “left” position you have a menu and a login.) When you make a template, you’re just setting aside the space on the page by inserting a position. The positions are placed in the table cells of your website with php code that looks like this:

The style sheet. Your template also has a style sheet that controls the fonts, colors, borders, etc. of each element of the page. Here are some explanations of the naming convention:
for download - http://www.mambohut.com/index.php?o...y&filecatid=107.
on the web - http://www.mambonotes.com/content/view/30/101/
with visuals - http://www.mamboos.de/Mambo_CSS_Guide/

Well, that’s the basic explanation of templates. The following are specific instructions on downloading or designing templates:

Downloading templates. I haven’t used other people’s templates, but I’m sure there are lots of places you can get them. Start at http://mambohut.com/.

Designing templates. Absalom Media has a good tutorial on designing templates here:
http://www.absalom.biz/tutorials/Mambo_ ... orial.html
If you want to design your own and use Dreamweaver, I recommend this tutorial: http://www.mambosolutions.com/dw_tutorial/. It will guide you through downloading a Dreamweaver extension that allows you to design templates there. It also recommends you download MSAS, the Mambo Stand Alone Server, which essentially puts a mini-server with MySQL & Apache right on your computer so that you can see your template before uploading it to the web. Another even more detailed step-by-step tutorial is at: AllMambo MOS Template 101  (thanks jetzkr8!).
(Note: some of these tutorials are for 4.5.1. If you come across a more current or better or shorter tutorial, please let me know!)

Now that you’ve got a template, we’re going to put some modules in the positions you just created.
Next tip: Modules and pages.

[jazztpt]

If you want an explanation of what Modules are, see tip #8. This tip is to introduce them to you, since you have your positions lined up in your template. Modules are little magic boxes that contain dynamic content. Go to Modules -> Site Modules in your Joomla admin. Here you will see a list of the modules that come with your Joomla installation.

You will notice that all of your menus are modules. Your login form is a module – it lets users sign in so that they can update or add content right from the website. Latest News is a module that gives links to the most recently added news items (content in the News category). Pretty much anything that involves linking or user input is a module. And there are tons of modules you can download and install, so you’re not limited to the ones that you have now (see tip #8 for more info).

Look across the table till you get to the Position column – this tells you what position (what block) that module is in (Positions are covered in tip #3). If you click on one of the module names to edit it, you will see an option to change the position it is in (under Module Details). Go ahead and move these around into different positions and go see it live on your site. Pretty cool, no?

You can also turn modules on or off on specific pages. Remember, the position only saves space for the modules, it doesn’t control whether modules show or not.

Pages. Are you sitting down? Because I’m about to lay one on ya. Ready? Web pages don’t exist. At least not in Joomla. When you think you’re looking at a web page, Joomla thinks you’re looking at a menu item. In fact, there’s no way in Joomla to see what is on a particular page, where the positions are, what modules are in what positions, what content shows, etc. Because Joomla doesn’t believe in pages! Frankly, I think it’s silly – the page is the fundamental unit of the web. But re-orient your brain, because Joomla is plugging its ears and singing “la la la la.”

To turn modules on or off in specific pages, you have to link them to menu items. Fortunately that is right in the Edit Site Module page (Modules -> Site Modules, then click on a module to edit it.) There is a tab on the right called Locations, and you can highlight as many Menu Item Links as you want. This does mean that you can’t control modules until you’ve linked your content, which we won’t do for another two tips! But there you have it, that’s Joomla.

The moment you’ve all been waiting for! Let’s add content.
Next tip: Adding text and images.

[jazztpt]

When I say “adding text & images” I’m talking about the central part of the page, not any menu bars, not any of the boxes on the side (like polls, sign-up forms, or news items). Just the central content pane (the “mos_mainbody” you placed in your template). You already organized your site Joomla-style (tip #2), so now you want to create content in the Categories you already have (which are inside Sections you already have).

TinyMCE. Joomla comes with a wysiwyg editor called TinyMCE. To activate it, got to Mambots -> Site Mambots. Unpublish the “No WYSIWYG Editor” and publish “TinyMCE WYSIWYG Editor.” If you know html, I highly recommend putting the TinyMCE editor in “advanced” mode. From Mambots -> Site Mambots, click on the TinyMCE WYSIWYG Editor. On the right, under parameters, you should see a Functionality option – basic means you see no code, while advanced gives you the option of editing the html code directly (and gives you a few more editing icons). I really *highly* recommend the advanced option because of bugs in TinyMCE (for example, hitting B will bold text, but not unbold it, so I once had to go into the html and delete about 57 tags from a frustrated user).

You can add text & images by adding content (Content -> All Content Items [or choose the category]). The page title will appear at the top of that page. Page alias will appear in the url (if you have sef404 or another search engine friendly component). Your text is split into two panes, the “intro text” and the “main text”. Here's RedSoxCoder's explanation of the two panes:

There are two panes for two reasons: First is the most common one, which is that you can use it to split the article in two parts: intro part for the front page and the real article that links to the 'read more' link, which is the intro + the main content merged together.

BUT there is also an option that lets you split these to all together. That means that you could use the intro part for a seperate piece of text on your front page and the main part for the real article.

Example: You have a site that reviews movies and you have various people writting reviews, but one person editing the front page content. You could write a frontpage(intro) text like "Our critic Mr. X went to see movie XYZ and wrote an exclusive review for our site....read more"
And when you click read more, you'll get the actual review.
Just select 'hide intro text' on the parameters.

Very exciting option that gives much more functionality to the two panes concept.

Thanks, RedSoxCoder! (Go Sox!)

Images. I once spent two hours just trying to place an image in the content. I couldn’t find it anywhere in the Mambo help pages; no one would answer my question in the forum; everything I tried didn’t work. So I will save you that pain – read on!

First you need to upload your images into the Media Manager. It’s under Site -> Media Manager, and it’s pretty obvious how to use it to upload files. Just remember that while the “browse” button is below the files icons, the “upload” button is above in the toolbar. Same with creating directories – create below, hit the “create” button above.

Once you have your images uploaded, you can insert them from any content item. Things not to do:

    • Don’t use TinyMCE to insert pictures. To do that you have to go back to the Media Manager, get the address, copy/paste it into the box, and in my version there’s a bug, so once you do all that the html code is garbled and you have to go into the code and fix it.
    • Don’t try to drag and drop images from the “images” tab into your wysiwyg editor. Though this appears to work, what you see is not what you will get. It only inserts thumbnails into the content, so when you look at the actual page on your site, tiny little images will appear instead of the regular image.


There is a MAGIC BUTTON that you have to click for anything to work. That magic button is – not in the editor, where you might think, and not in the “images” tab either. Below the editor, there are two little flowers, one with an “I” and one with a “P”. When you mouse over them, there is no help text to tell you what they’re for. Click on the “I”. It will insert the following text into your content: {mosimage}. Once you do that, the “images” panel on the right is suddenly useful! Thank the gods. Now go to that panel and find your image. When you click on the “add” button, that image is listed below under “Content Images.”

Each time you click the MAGIC “I” button, {mosimage} will appear in the text editor. It will not show the image, or tell you which image is there. If you have more than one image, the images will display in the order they are listed under “Content Images.”

What is {mosimage}? As I understand it, mos_image is a mambot that places images in the content. For more on mambots, see tip #8. According to tudorilisoi, there is also another mambot called mosthumb for doing this that you might want to use -- for more info, visit his post at http://forum.mamboserver.com/showth...3412#post243412

A tip from Vizar:

After much testing and searching, i found a perfect solution: use MosCE instead. Using this u can include images directly to the text and see them as they will appear in the end result (unlike the {mos_img} place-code), and it has a lot of extra options. U can even adjust the look and feel of the editor via its config component.

To make this work, u have to upload you pictures with the image manager (or rather use JoomlaExplorer) to the images/stories folder (and optional subfolders under that) to see and use the pictures in MosCE

Thanks for the tip!

So now you have content – great! Now on to linking up your pages.
Next tip: Linking.

[jazztpt]

There are two ways to link from page to page: menus & links. In most web design (whether you use a wysiwyg editor or not), it’s easier to link text or images to another web page than it is to set up a menu. As with everything else, Joomla is the opposite. Menus are pretty easy -- linking, not so much.

Menus. Menus are modules (for more about modules, see tips #4 or #8 ). A few menus come with your Joomla installation (main, top, other, and more). Since they are modules, you can place them in positions in your template. One thing to remember about menus is that you can’t create a link until you’ve created content.

You can add links to menus from the content, or from the menu manager. From a content item (Content -> Content Managers -> All Content Items [or choose your cagetory], then click on the content item to edit), there is a tab on the right called Link to Menu. It will let you choose any or all of the menus, and tell it what words you want to appear in the menu. I think this is the easiest way to link menus to content you have created.

You can add or remove links from a menu (Menu -> [choose menu]). Remove links by trashing them (don’t worry, it doesn’t delete your content, just the link). Add links with the “new” button on the toolbar. It will give you a number of choices that determine both what type of content you are linking to and how you want that content to appear.

New Menu Items: How - What
The list looks like this:
Blog - Content Category
Blog - Content Section
Link - Contact Item
etc.
The first word tells how it will appear on the page. A blog page contains multiple pieces of content, but only shows the "intro" text of each item (with a link to see the full item on another page). A link will go directly to whatever item you specify. A table contains multiple pieces of content in table format. A separator doesn't link to anything. And see this thread for info on wrappers (thanks DRD!):
http://forum.mamboserver.com/showthread.php?t=43536
The second word tells what will appear on the page. Content or Section, outside url or newsfeed, contact item or static content or newsfeed. (So many options!)

Before you make too many menus, remember that menus are modules, and that Joomla already has a lot of built-in modules. If you want to build a menu for news items, for example, then stop! It's already done. The "Latest News" module displays links to the most recent n content items in your News categoy. And you don't have to do anything but put that module in one of the positions in your template (tips #3 and #4).

What if I want cool rollover buttons in my menus instead of this boring text? Well, I haven't tried it yet, but I understand that this component will do just that:
http://mamboforge.net/projects/swmenu/

Linking. If you want to link text or images in content to another page in your site, the first thing to do is to get one of the "nice url" components. I recommend SEF404:
http://mamboforge.net/projects/sef404/. If you look at the web addresses of your pages, you'll notice that they have non-intuitive names ending in something like /view/25/64/. SEF404 will make all of your page addresses nice, based on the title of your content and category (or section).

Now that you have "nice" urls, you will have to copy and paste. Open your browser and go to the page on your site you would like to link to. Highlight and copy the url. Now go to your Joomla admin, and go to the content you want to link from (Content -> All Content Items [or choose category], and edit the content item). Highlight the text or image you want to link, and click the "link" button in the editor. Paste the url in the popup box, and voila, your text is linked. (Hey, let me know if there is an easier way to do this….)

You should be able to actually make a site now. Yay!! But wait – there’s more….
Next tip: Blogs; Your front page

[jazztpt]

Someone recently asked me for more specifics about making blogs, so here is my description:

Blogs
Joomla can create a blog out of any category or section you choose. Blog simply means that the page displays the titles and intro text to items in a category (or section), and links to full text. And you can make any page a blog.

1. Create a category called "Thoughts" (or whatever name you want). See tip 2 for more info on categories.

2. To create the blog page, create a menu link. (Remember, in Joomla there are no pages - just menu items [tip 4].) Edit your main menu and click on New. It will give you a bunch of items (see tip 6, linking) - pick Blog - Content Category. Then name your page and choose the "Thoughts" category. Don't forget to look at the Parameters tab in your menu item to control things like how many columns to use for the intros & other useful stuff.

Your Front Page
[I just read this on the forums and thought it was very helpful. http://forum.mamboserver.com/showthread.php?t=42870 Here it is in mperkel’s words:]

Understanding Blogs

One mistake I made was to assume that the front page manager had something to do with the front page - it doesn't. Joomla has the object called a "blog" and the center of the front page is one of these blogs.

The "blog" is a very unusual and powerful object once you understand it. By default the first object in the blog is full width (one column) and the next 4 object are 1/2 width (two column). After that - there are links to the next blog articles and pages of clusters of more blog items.

This blog thing is totally customizable and if you want to actually use it as a blog what you do is change the settings. You do this by going into the menus and selecting the mainmenu. Then you configure it by changing the leading, intro, and colums settings. I just put in 999 into leading to get a one column vertical blog.

A blog also points to a collection of content items. There are both sections and categories that are collections. So a blog is associated with a list and you create the list of the content as a section and then have a blog object pointing to the list and put the blog object into the main menu and you have a new blog.

The Front Page

Whatever the first item in your main menu is - this item becomes your front page. Once you understand this it eliminates a lot of confusion. If you choose something for the first menu item other than the standard entry then the "front page manager" is totally useless because what is says is on the front page isn't - and what is on the front page isn't listed in the front page manager.

Thanks, mperkel!
Next tip: Modules, Components, and Mambots.

[jazztpt]

Joomla is designed to be expanded. Though it has a lot of built-in features, there are hundreds of others that you can download and incorporate into your Joomla admin.

What is the difference between Modules, Components, and Mambots?

Modules are simple plug-ins that present information on your site. Menus are modules. Polls are modules. The user sign-in is a module. Modules can be added to Positions, and will appear on your web site.

Components are applications. They add functionality to your Joomla admin. So when you want to add newsletter functionality to your Mambo site, you will probably install both a Component and a Module. When you add a component, you'll see it under the Components menu, and when you go there, you'll see a whole new set of admin pages designed to help you set the features of that component.

Mambots are small, task-oriented functions that intercept content before it is displayed and manipulate it in some way. Joomla provides a number of Mambots in the core distribution. For example, mosimage converts {mosimage} tags to html img tags; mospagebreak provides pagination and table of contents functionality. You're less likely to need a mambot than a component/module set.

Add-on is a non-technical term for cool stuff that doesn’t come with the Joomla installation. Add-ons usually consist of both a component and a module, but are sometimes just modules, or might include a mambot.

Where can I get add-ons? Joomla has a whole site dedicated to them: http://developer.joomla.org/. Unfortunately, the descriptions of them are generally poor, and it's hard to find the right one or compare different add-ons. If only they would require all add-ons to include a good description and a features list...and how about a rating system? (Hint, hint.)

I was reading one of the forums and came across a great list of of “must have” add-ons. This list is taken from this thread written by beat, with a few additions of my own: http://forum.mamboserver.com/showth...00&page=4&pp=10

    • Clean URLs: 404sef
    • Nice user registration and management: Community Builder (written by mambojoe)
    • Downloads management: DOCMan (Remository seems also good)
    • Newsletters: YaNC (although simpler ones exist also)
    • Automatic site-mapping: SiteMap
    • Nice forms: easy forms: Art*Forms, complex forms: FacileForms
    • bulletin board: easy and best integrated: SimpleBoard (for more heavy duty traffic: Simple Machines Forum and phpBB are becoming better integrated with Mambo currently. vBulletin seems not easy to configure and integrate but powerful, it runs also this site).
    • E-commerce: phpShop or mosCommerce : integration of later moves fast now, making it soon a good choice
    • Events management and sheduling on calendars: Events Calendar.
    • Drop-down menus with images & more: SWMenu. http://www.swonline.biz/
    • Insert multimedia objects like video, audio & more: MosMedia. http://www.ag-solutions.net/content/view/23/45/
    • Private messaging:MyPMS open-source
    • MultiLingual support: MambelFish and future Mambo 4.5.3.
    • Photos galleries: good question... candidates are: RSgallery, Menalto Gallery 2 (seems best, mambo integration on its way), zOOm (nice integration, but no news on dev.&debugging?).

Thanks beat!

Also see: Resources: Joomla Components, Modules, and Mambots

Now, if you have gotten this far and are still frustrated with Joomla's peculiarities, I’m hoping the next chapter will answer some of your questions.
Next tip: Where is it??

[jazztpt]

This tip is designed to help you find things that are on your page, you’re looking right at them, but can’t find where they exist in Mambo. If you’ve read the other chapters and are still looking for the contact page or how to change the look of a category page, this is the chapter for you.

Contact Us. When you install Joomla, the main menu comes with a link called Contact Us. What displays on the Contact Us page is the information in your Contacts (go to Components -> Contacts -> Manage Contacts to create or edit contacts). If you want to show only one contact instead of the list of all contacts, you can create a link to only one contact.

To create a contact link, open your main menu (or whatever menu you’d like the link to be in) and click “new” in the toolbar. On the next screen, choose Link – Contact Item. It will then let you choose which contact to link to. The information for this contact will appear on the Contact Us page as well as this link.

If you want to change the form part of your contact page, you'll have to install a form component (such as Art*Forms). It will allow you to add various form items (text input, radio buttons, dropdown lists) & process them in various ways.

Category & Section pages. If you create menu links to categories or sections, how can you alter those pages? You must remember that in Mambo, there are no pages – only menu items. So go to the menu item and change the parameters there. For example, if you have a link to a category page or section page, Mambo automatically displays certain search options (the “Filter” “Order” and “Display #” you see above the item list). You can show or hide those by going to the menu the link is in, editing that link, and going to the Parameters tab.

Please let me know what things you have wasted time looking for because they’re in some non-intuitive place – I’ll post it here!
__________________
Yours,
Anna
http://www.myideal.net
http://www.cinital.com

[jazztpt]

Hello All!

I hope this has been helpful to you. I'm sure there are many unanswered questions and other ways in which this tutorial could be improved. So this tip is a thinly-veiled (or is it even veiled at all?) attempt to get your help in improving them.

In general, the forums are a great way to get help with Joomla. It is always best to search first before posting -- someone else may have answered it already. If you can't find the answer, post a thread.

Most importantly, if you come across any thread that you can help with, help! Even if it is old, other people may still be searching for that information.

So let me know what other general questions you have, and contribute to the Joomla forums. The easier you make Joomla for others, the more others will want to help you too!
__________________
Yours,
Anna
http://www.myideal.net
http://www.cinital.com

[guilliam]

.

Anna's Joomla Tips

for questions, inquiries and discussion pls proceed to this thread:

http://forum.joomla.org/index.php/topic,5585







[edited: added "Anna's Joomla Tips" for easier text search]

[Wendy]

FYI : Thanks to all who have contributed to the discussion thread.  As it is an old thread and we've done some reorganzing to FAQ's (now Tips and Tricks) the discussion thread is locked and archived.