Joomla for You?
This is a report of a total newcomer to Joomla,
Fritz@Joern.De

Time spent in learning to use Joomla – many days – is well spent if you want to create at least three Joomla web sites a year. This is my personal estimate. Rather than fooling around in the depth of menus and code, get a friend with Joomla experience to help you set up the site. It might take a couple of hours instead of days.

My hosting service offered cheap web space with Joomla pre-installed. Having ordered that, I got to see a sample page with a bold blue title banner. From there I started to modify into www.PraxisKreuzer.De.

The principle of php, server modified web pages. Unlike old-fashioned HTML sites (example www.Viktoriabad.De), today the result a viewer sees in his or her browser is freshly cooked from various files on the server by the server, ad hoc, and further enhanced by the local browser (mainly with ads). To customize you modify some of the these files – hundreds! – on the server, most of them in Java code. You edit server files with a simple text editor. Then you use FTP, the age-old file transfer program, to upload the corrections. Or – much more elegantly – you edit the server files with your normal browser and a web based front end control page. Finally you can edit your site right there à la Wikipedia by just logging into the site. That’s the miracle. This makes Joomla (and other similar) sites flexible and user adaptable.

So. First get your FTP going to (and from) the site. Typically this means addressing the site itself (PraxisKreuzer.De in my case) with FTP (instead of http). Name and password you’ll have gotten from your provider (hosting service). (Let’s forget that you can host your Joomla site completely on your own PC with Apache or otherwise, if you keep your PC server on-line all the time.) I use FTP program WS-FTP32 by John Junod, 1995. There are newer, better programs, even browsers can FTP nowadays. Be sure to use “passive” mode for reliable transfers.
Copy all the content from your host to your local PC, some 30 Megabytes; keep the file structure. When you manually edit within these files, do that locally, and then upload the modified file. Keep a copy of the original, for example by renaming the original from personal.css into personalORIG.css and creating a fresh personal.css. If you edit the content via backend just take care. And remember to download a fresh FTP copy, if you suspect changes in files you want to further massage locally.

Now look into the Joomla administration, i. e. the backend. I reach mine with http://joomla.p137726.mittwaldserver.info/administrator/. My provider told me. Then I log in. If I look at Site, System information (Systeminformationen), I see that I run Joomla 1.6.1. If you look around in the backend, please note that the menu often will not react, unless you close the current page with the appropriate red button (Schließen). Remember to go back before going elsewhere.

In Joomla familiar things like menus sometimes get new names like categories. A typical starter setup, the initial view, is called a template. My pre-installed template happened to be beez_20 by Ms. Angie Radtke in Bonn (like myself here), see www.joomla-beez.de. She certainly is industrious like many bees (Bienen)! See which template you use via backend, Extensions (Erweiterungen), Templates, and look for the orange Standard star and the word site. If you’ve got Beez2 - Default there, then you are with me.

Place a favicon as “yoursite”/html/joomla/templates/beez_20/favicon.ico.

Ready now for changes?

Note that not all of my suggestions have to be done in my sequence here, or at all, or this way. The English names for the menu items are my best guess, as I operate in German. The ‹ and › signs here in this blog are not the real greater and smaller signs of HTML.

First of all, you might like a new picture instead of the blue background.
To get the header completely removed see http://forum.joomla.org/viewtopic.php?p=2429591. The index.php file in question is the one at “yoursite”/html/joomla/templates/beez_20/index.php. Open it with Wordpad (sorry, I stick to standard tools here), find ‹div id="header"›, now do what you want to do, store, then FTP back up into the host and see how your site looks like.
The blue background picture is not the logo, it’s personal2.png at “yoursite”/html/joomla/templates/beez_20/images/personal/personal2.png: blue, size 1060 × 288 pixels, with We are volunteers at the right. PNG is a picture format like JPG. You are welcome to replace personal2.png with an equally sized alternative. (The size that works for me is 1060 × 200 however.)

After FTPing this picture up to the server, you’ll still see Joomla! at the left side. This is what Angie calls the Logo, see screenshot at left (virgin status). You can modify it with the back-end by going to Extensions (Erweiterungen), Templates, Beez_2 (click it!). You come to edit style (Stil bearbeiten). There you look at the right with extended options (Erweiterte Optionen). You can select (auswählen) a logo, add one (under selection), or do without (Leeren, empty). If you want to let the background picture (personal2) shine through the logo, be sure to create a transparent gif file as logo. You do this, for example, with Irfanview. Remember: The logo is a picture; if you choose to go without (empty field), you will still see the title (Seitentitel) as headline Joomla! and Open Source Content Management as page description (Seitenbeschreibung), i. e. as subtitle.

Subtitle. Now you’ve got a background picture and a logo of your making. Congratulations! But still there is a text line: Open Source Content Management. You get it removed or changed via Administration, Extensions (Erweitert), Templates, click on Beez2, there go to the right column Extended (Erweitert) and play with the Page description (Seitenbeschreibung). You get a subtitle – or none – under the logo.

Title. As main text in the picture I wanted Praxis Kreuzer. Again: With the backend under Extensions (Erweiterungen), Templates, Beez2 (click it!), right column play with the page title (Seitentitel). I put Praxis Kreuzer there. If you leave this entry open, you’ll see no text logo.

Incidentally: Don’t turn on cashing in Administration, Site, Configuration (Konfiguration), right side – at least not while you still change a lot on the site. Caching in this case means that the server remembers past browser accesses and dishes out the same “food” as before. You want freshly cooked stuff while you edit and test.

If you want to move your text logo (the headline) around, modify personal.css (“yoursite”/html/joomla/templates/beez_20/css/personal.css). Under h1#logo modify the padding in the line under Titillium Maps (a type font from Urbino). The measurement .em is a size depending on the character set used. (“The em unit is equal to the computed value of the font-size property of the element on which it is used. The exception is when em occurs in the value of the font-size property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. This unit is also sometimes called the quad-width (Geviert) in typographic texts.” Source). px is pixels. The margin is given clockwise from 12 o’clock, i. e. top, right, bottom and left. (Good to know, even when placing pictures here in this blog’s HTML by modifying the margin.)

I also modified within position.css (“yoursite”/html/joomla/templates/beez_20/css/position.css) under #logo the line padding:20px 20px 20px 10px; to padding:60px 20px 20px 700px; in order to move the headline (logo) far to the right. When it says /*padding-top:0.6em; two lines later, you’ve got to delete this line, as it counteracts the position you wanted in the first place.

To get the complete picture up higher to save space, modify the line padding-top under #all #header from 8.0em to something like 2.0em.

To remove the line at bottom right Powered by Joomla go to “yoursite”\html\joomla\templates\beez_20\index.php (not index.html!), search for power and completeley delete line ‹?php echo JText::_('TPL_BEEZ2_POWERED_BY');?› ‹a href="http://www.joomla.org/">Joomla!®‹/a›. I boasted myself there …

Global settings. Your site will show technical info like who’s written an entry (a page), when, etc., all things not for the public. To get rid of them once and for all you want to go to Content (Inhalt), Entries (Beiträge), Options (Optionen), get a white pop-up on gray, entry options (Beitragsoptionen), and there you can set what’s to be seen and what not, like author – hide (Verbergen). Note the many categories within the popup. And don’t forget to store modifications right there and then.

Let us now compose an entry (Beitrag), let’s say the imprint (Impressum). Go to Contents (Inhalt), new entry (Neuer Beitrag). Under category (Kategorie) select the menu your entry should be part of, in my case “Impressum”. Originally you’ll only be able to compose texts for home, category undefined, as only home is pre-installed.

Which brings us to menus. Going to Site, Control center (Kontrollzentrum, which should rather be a Steuerungszentrum, a Kommandobrücke), menus (Menüs). You see a main menu and a user menu. Clicking the main menu you find a home. (Don’t go in via Administration, menu (Menüs), menu (Menüs), new menu (Neues Menü): You won’t get the types displayed to choose from.) There you can create more menu items. Be sure to give each of them a name (title); as type (Menütyp) select single entry (Einzelner Beitrag), if in doubt. My log-in menu is type log-in form (Anmeldeformular); at bottom right you can decide where the user should wind up after logout (Abmeldeumleitung): I suggest /index.php.

To remove the options Bigger, Reset, Smaller (Schriftgröße Größer, Reset, Kleiner) on top of the screen, see here.

To display the name of the page at the very top blue line of your browser – that’s, friends, is how far I came on this day of salvation (Tag des Heiles, 2 Kor 6, 2) March 20, 2011. Tomorrow spring comes! Suggestions and comments are welcome, directly to Fritz@Joern.De please.

Let’s continue. To make the logo clickable, so that a click on the logo (picture on top) returns you to home from everywhere: Go to “yoursite”/html/joomla/templates/beez_20/index.php, look for ‹div class="logoheader"› and enclose the whole division (i.e. everything until and including the next following ‹/div›‹!-- end logoheader --› with ‹a href="\"› and ‹/a›.