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›.