How I made this website

Perhaps you're thinking "Hey, this site looks cool! I wonder how it was implemented?" Myself, I've been thinking "Just why the heck did I create a 'Blog' category for?" ever since last January. If only there was a common solution for those two dilemmas... Oh wait.

In this fairly long-ish article I'll give an overview of how I managed to get this thing online, in case it could be helpful for people wanting to have their own personal corner on the Internet. My first advice is that you get things running locally before paying a single buck, testing everything thoroughly until you're happy with it. In fact, even if my site went online on New Year's Day 2025, I had been developing it for over 6 months beforehand. Getting from localhost to production was just a matter of transferring a copy.

1. Buying a domain

You can't seriously expect people to reach your page by typing "78.102.35.190" or something in that line in their web browsers, so you'll need to buy a domain. First you must decide which one you'd like, from a simple "johnsmith.com" to "dasal.ba" (that's the domain for Bosnia and Herzegovina, by the way; in the end I decided against it). Original top-level domains are usually a bit costlier. In the last years domains like .io and .me have gained popularity because they provide for witty wordplays.

After deciding for one, you must acquire it. There are hundreds of domain registrar services out there. I chose Njalla because I had read good things about it, and it offered an additional layer of privacy (they actually own the domain but let you use it as if it was yours, enhancing anonymity and security). The pricing was attractive too (and you can pay using cryptocurrency). Domains have to be renewed on a yearly basis or else your rights to use them will expire.

2. Finding a host

Your site must reside in a physical computer somewhere, that will serve the content to visitors. You don't actually have to pay for an external service, you could just run everything in a laptop from your living room; it's just a matter of tying your new domain to the computer's public IP address using DNS and opening the proper ports in your router. You can ask your ISP for a static public IP (that won't change over time), or use an automated DNS updater (more cumbersome and changes can take a little while to propagate). Obviously this approach won't scale well if you plan to get millions of views per month.

I didn't want to have a system running in my home 24/7, so I chose to pay for an external hosting service instead. There are many around, like Bluehost, DreamHost, GoDaddy, HostGator... In the end I went for Hostinger because of the reviews, the high uptime, and a nice offer they had at the time. They all let you begin with a base plan and upgrade as your traffic increases (so I suspect I'll never have to do it).

Because my domain registrar (Njalla) was different from my hosting, I had to create redirects from the dasalba.com domain to Hostinger's IP (if you pay the same company for both this it's automatic). For this, I added a couple of A (address) entries for "@" (root) and "www" pointing to it (thanks to this, users don't have to type the full URL to visit my site).

3. Choosing a WCMS

A web content management system (CMS) is the software that will help you create, run and maintain your website. It provides the foundation upon which you can build everything, and an interface to manage it. They can get pretty complex, specially if you intend to have dynamic content, support many visitors, have an online store, user interaction such as forums... On the other hand there are minimalist ones that allow to write pages using a Markdown-like syntax that will get translated to HTML. Hell, you can even code everything yourself in a text editor if you strive for a static, classic-looking page (see the websites of Rodrigo Copetti and Fabien Sanglard, two of my favorite nerds).

There are many CMS reviews and comparisons out there, but to boil it down to the three most common open-source choices:

• WordPress is probably the best-known solution and the one serving over 20% of the World Wide Web. It has a massive user community and there are plenty of one-click-install templates and plugins available. Apart from that, its main advantage is that it's very easy to use (but that's a double-edged sword).
• Joomla is also a very popular application, with a good share of the "market". While not as dumbproof as WordPress, it also has a densely populated extensions directory and a nice dashboard. Learning PHP is not needed at all, even for advanced sites, but with it you can implement basically everything.
• Drupal fights for a third place. It has a powerful API for developers, yet also offers a basic, even if austere, installation to get a simple website going. A smaller userbase than the previous two but make no mistake, we're not talking about a niche segment here. Lots of modules and themes out there.

After careful research and consideration, I chose Joomla. It's a good middle ground, but the feature that settled it was its powerful multilingual capabilities. Offering your content in multiple languages can be a bit of a hassle in WordPress, while Joomla supports it natively and it's straightforward to implement, as you can verify by clicking the Spanish flag at the top.

The rest of this article will explain how to create a website using Joomla, but the global concepts are the same for other options.

4. Installing everything

4.1 Software stack

So, you have now decided which CMS you want. It's time then to prepare a machine able to run it. Things you'll need:

1. The physical hardware. It can be your desktop PC, or a virtual host on a shared machine provided by an external company (a dedicated machine will give better performance, but it's more expensive; unneeded for a personal site). In the latter case they'll provide you with credentials to access a management web interface.
2. An operating system (OS). They say that 96% of the world's servers run Linux. There must be a good reason for that: it's fast, stable, secure and... free.
3. The web server itself. It's software that will listen for client requests (HTTP/HTTPS) and send content in response. It's critical that you use proven software with no (known) bugs or exploits.
4. A database that will efficiently store your tables containing users, passwords, configuration, articles, metadata... It should be secure and allow for easy backups.
5. For most of the CMSs out there (like Joomla), an implementation of the PHP scripting language. It's what pages are "programmed" with; when this code is run by the web server, the actual content is created dynamically and shown to the user. It's also useful to install an administration tool such as phpMyAdmin.

If you paid for external hosting, I've got good news: you're already covered. The virtual (or physical) machine they provided you with comes preinstalled with all these things good to go, no need to tamper with configuration files. Anything else you'll be able to enable through the main dashboard with a couple clicks.

Otherwise, those requisites will be met with the installation of a LAMP bundle (Linux OS, Apache HTTP Server, MySQL/Maria DB database and PHP). Consult your Linux distribution's manual or wiki for instructions on how to do that. Once done, and before proceeding, make sure that everything is up and running and that you can browse to the "It works!" Apache default page (and the phpMyAdmin panel, which can be accessed by entering yourdomain/phpmyadmin in the browser).

Joomla has a list of requirements that both Apache and PHP must meet to be able to work or enable certain functionality. Don't forget to enable those modules and set the proper variables. If you don't have a clue about how to do that, read this wiki for example (it belongs to the Arch Linux distro, but the behavior is the same for other flavors of Linux).

4.2 Joomla CMS

Hosting services have libraries of ready-to-install software packs that will do all the heavy work for you. Hostinger, for example, allows you to setup WordPress or Joomla just by choosing them and saying "yes". I wanted to do it by hand instead, but don't think it's rocket science: all I needed was to download the latest package, upload it to the server using Hostinger's File Manager and decompress it in the correct location (in your own computer it might be /srv/http/). You may have to fix permissions: files should be set to 644, folders to 755 and configuration.php to 444 (read-only). Easy!

Joomla needs a database where to store everything. The CMS will create all tables for you, but you must provide the DB. You can do it with your hosting service's dashboard, or using phpMyAdmin. Also, create a new user and set a strong password (in the database, not the OS) and grant it the correct privileges as seen in the previous link.

To launch the installer, just browse to your site via its domain name or IP ("localhost" or "127.0.0.1" if doing it in your home machine). Joomla will welcome you to the installation process, and then it's just a matter of following the on-screen instructions and filling every form. You have a tutorial available to guide you, but it's not really necessary, I swear. It's mostly automated. Just remember to write down the database name, the user and the password!

If you have any errors, Google them, but they'll usually belong to one of these types:

• Apache or PHP have incorrect parameters (/etc/httpd/conf/httpd.conf and /etc/php/php.ini).
• Apache or PHP don't have the necessary modules enabled.
• Package extracted to the wrong path.
• Incorrect file and/or folder permissions.

After the last step, you'll be gifted with the sight of the administrator interface (the main dashboard), which should look more or less like this (I have some extra extensions):

You'll be able to open it anytime by browsing to yourdomain/administrator.

4.3 Gantry Framework

The default site (you can install sample content to test it) looks a bit dull. Too 1990s. Yes, Joomla has many themes (here called "templates") available (free or commercial), and you can create your own. But it takes time (or money) to do this properly.

Luckily, there's a wonderful alternative: Gantry. It can be installed as a Joomla extension (it supports WordPress and Grav too) and unlocks a modern interface with which you can easily create and edit themes, layouts and styles, with drag and drop capabilities and "particles" (page elements) that use an inheritance system to set their properties. Overall, it would be worth a lot of money, and know what? It's free! A total ripoff. Designing an appealing website will be a matter of hours.

To install it, you need to download two packages: the Gantry core itself, and a theme. There are a couple available for free: Helium (more complex) and Hydrogen (simpler and cleaner). Both look nice. You can see how Helium looks in the official demo site.

4.4 Other

Backing up your site manually with SQL and FTP can be done, but it's tedious and difficult. It's way better to install an extension such as the widely used Akeeba Backup. No need to pay for the Professional version.

This is entirely optional, but if you intend to have HTTPS support, you can install a free SSL certificate from Let's Encrypt (Hostinger includes ZeroSSL for free, you don't have to set it up).

5. Configuration

The intimidating part is over. Now comes the tiring part: to customize everything to suit your needs. Don't skimp on your time: your website could last years online and you should be totally satisfied with it. It's your letter of presentation.

Begin by entering the Global Configuration and change it as needed (there's a shortcut in the dashboard, otherwise go to "System" in the left-hand collapsible menu). Examples of things you may do (don't follow the list blindly, think about what your needs are):

• In "Site->Site":
  • Set the "Site Name".
  • Enable "Site Offline" (you'll want to do this whenever your page is "under construction", it will prevent browsing while keeping it online), then set the message that will appear (e.g. to the default language message). Save, and disable the offline mode (if you want).
• In "Site->Metadata", set the "Site Meta Description" (~150 chars) and the "Content Rights".
• In "Site->SEO":
  • Enable "Search Engine Friendly URLs".
  • Enable "Unicode Aliases".
  • Set "Site Name in Page Titles" (e.g. to "After").
• In "Server->Server":
  • Enable "Gzip Page Compression". This will improve loading times.
  • Set "Error Reporting" to "None". The less information you let out, the better!
  • Set "Force HTTPS" to "Entire Site" (if you have a working certificate).
• In the Smart Search component settings (it's a different category, see the Component settings to the left), set whatever you like. Joomla has a powerful built-in search system that will index your site and show a search field.

5.1 Multilingual support

Joomla's most interesting feature! You'll only have to configure it once and the results are worth it. The caveat is that afterwards, you'll have to create as many menus, categories and articles as there are supported languages (and that's the reason why sometimes it takes me a long time to post updates: I've got double the work).

There's a complete, step-by-step tutorial provided by the CMS documentation, and another one by the developers of Gantry. The contents are basically the same:

• https://docs.joomla.org/J3.x:Setup_a_Multilingual_Site
• https://docs.gantry.org/gantry5/tutorials/multilingual-site

The summary of what needs to be done is as follows: 1) install and configure the language(s) you want (both for page content and administration), 2) enable two plugins, 3) create and publish content, translated for each language, 4) create and publish menus for each language (and set a default home), and 5) add a language switcher widget (the thing with the country flags).

In the dashboard, at the top bar, you'll find four big buttons, one of them labeled "Multilingual Status" (I told you this was an important feature of Joomla). Click it to get an instant assessment of whether you have implemented everything correctly:

Now we have to talk about multilingual associations. What are they? Simple: it's a way of telling Joomla how content in one language relates to content in another. "This is the Spanish version of this English article; they're both the same but in different languages." The CMS will do the rest and show one or the other accordingly when the user switches languages. It's automatic.

• https://docs.joomla.org/J3.x:Multilingual_Associations
• https://docs.joomla.org/Help4.x:Multilingual_Associations

In the left hand menu, go to "Components->Multilingual Associations" to see and edit them, organized by item types:

5.2 URL rewriting

URL rewriting is a server technique that allows the user to see clean, friendly URLs instead of computer mumbo-jumbo, without breaking the links. This improves search engine optimization (SEO) and hence site visibility. It lets us have "www.dasalba.com/reviews/games/doom" instead of "www.dasalba.com/index.php?q=4358395" or whatever.

The instructions are:

1. In "Global Configuration->SEO", enable "Use URL Rewriting".
2. In the Joomla root directory, rename the htaccess.txt file to .htaccess to enable it (it's a preconfigured CMS file).
3. In the Apache configuration (localhost only, Hostinger already has this):
   • Uncomment the line that says LoadModule rewrite_module modules/mod_rewrite.so
   • In DocumentRoot "/srv/http", set AllowOverride All

Optionally, but recommended, redirect your base domain to the www. sub-one (this was already done before, but enabling URL rewriting changed it):

https://www.hostinger.com/tutorials/redirect-non-www-urls-www

5.3 Files and media

By default, all file uploads will be stored in the images/ subfolder of your Joomla installation. I think it's best to keep stuff tidy and distinguish between multimedia and actual documents. To achieve this, configure the Media Manager (in the left hand menu go to "Content->Media" and click the "Options" button) and set "Path to Files Folder" (I chose files/). Also, configure a plugin named "FileSystem - Local" (go to "System->Manage->Plugins") to add that upload directory. You may have to use your file manager to create that folder with the correct permissions.

If using Gantry, there's one more thing we have to change now. In the main dashboard, there are several quick-access shortcuts to categories. One of them says "Gantry 5 Themes". Click that and then "Configure" for your active theme.

As an alternative, you can also choose "Components->Gantry 5 Themes->Default Theme->Configure" in the left hand menu.

Now, go to "Extras->Platform Settings->System – Gantry 5" and enable option "Use Joomla Images Folder".

This will force Gantry to honor Joomla's upload locations instead of using its own, for better integration.

All allowed file extensions must be declared beforehand in the Media Manager, in the general listing of "Allowed Extensions", plus also in the Image, Audio, Video or Document listings. The "Legal MIME Types" listing must also be filled. Here are a few I had to add to my site:

• .epub (application/epub+zip)
• .svg (image/svg+xml)
• .tex (text/x-tex)
• .h and .c (text/x-c)
• .scm (no particular MIME)

Some file types will still get blocked nonetheless for security reasons, such as .py Python scripts. You'll have to upload them manually using your file manager.

It's recommended to upload images in WebP format, not PNG or JPEG, if possible. That format is more efficient and was specifically designed for the web. File sizes should be smaller too (but not always).

To upload SVG images (vectorial graphics), you must sanitize the file(s) first or else they'll get blocked (see Joomla's documentation). You can do it for free here:

https://iconly.io/tools/svg-cleaner

5.4 Caching and performance

The cache can speed up the loading of your site by storing pre-rendered versions of your pages and serving them as needed, but enabling it is a delicate issue. There are several types to choose from and many settings that can help or hinder (or even break) your site. Please read the documentation about it and plan what you need. The more static your site is (not changing frequently, or not served on a per-user basis), the more conservative your caching can be.

An example of how to enable it:

• In "System->Manage->Extensions", enable the "System - Page Cache" plugin. Then in "System->Manage->Plugins", configure it and enable "Use Browser Caching" (this will allow your visitors to store the cached pages locally).
• In "Global Configuration->System", set "System Cache" to "ON - Progressive Caching" (or any other). Set the "Time Limit (minutes)" to whatever you want. For a completely static site, 1440 (24 hours) should be a good value to minimize server load. Then again, you can manually clear the cache after every update to apply it instantly ("System->Maintenance->Clear Cache").

5.5 Content settings

Joomla's default views will render a list of properties for articles and categories, such as author name, dates (created, published, featured, modified...), hits (view count), descriptions... These can be shown or hidden on a per-item basis if you want, with a high degree of granularity, but there's a way to set global defaults that will apply for content that doesn't specify otherwise.

Go to "Content->Articles" and click the "Options" button (or go to "Global Configuration->Component->Articles"), and choose which additional information to show or hide. If you're unsure about what some option does, keep a browser tab open with a sample article and refresh after making a change (and saving).

You can also enable and configure a plugin named "System - Schema.org" to inject JSON+LD data about you in the head tag of all articles. In today's world, it's very important for everything to have metadata that can be parsed by web crawlers and/or AIs. It can improve your ranking.

6. Creating content

Finally! Time to begin filling your site with lots of useless spam that nobody will ever read. Create the Categories, Articles, Field Groups, Fields, Menus and Tags (I seriously encourage you to design everything first, even if it's in a plain text file; also, if your site has several languages, plan the associations between them).

Categories, Articles, Menus and Tags can all have metadata (a meta description of 150-160 characters or less, and keywords), to be set in the "Publishing" tab that opens when editing one. Always fill this for better accessibility and SEO. Some extensions offer to create them automatically by analyzing your content with AI, but I dislike that. Nobody understands what you wrote better than you!

In their table listing, most items have a "Status" column that will tell whether they're published or not. Unpublished content is invisible to the user and won't be accessed. You can change this anytime. Thanks to this, you can calmly prepare stuff for later publishing without worrying about your site looking like a mess.

Also, most content has an alias. This is the name that will appear in the URL, so it can't have spaces. As a convention, use only lowercase letters, numbers and dashes, avoid uppercase and underscores except when necessary. Don't include special characters such as accents. Consider removing articles (the, an...) to shorten it. Joomla will generate a default "Alias" from the item "Title" if you leave the field blank, though it can be changed.

Categories, Menus and Tags have a "Rebuild" button that can fix structural or ordering problems in the database, by computing stuff from scratch. Clearing the cache will NOT have the same effect, nor does Joomla automatically run rebuilds on a schedule. Use it only if you detect problems, but be aware that this may screw your manual sorting (it doesn't have to, but consider it a possibility). Backup, backup, always backup.

6.1 Categories

They allow you to organize your content hierarchically according to some criteria. Using an analogy of articles being files, categories would be equivalent to folders. In the table listing, they can be sorted by dragging with the mouse. Not much else to say about them, except that they can have a description with rich text (like any article). This can save you from having to write an article to introduce them, as descriptions can be rendered in list views.

6.2 Articles

Articles are the basic items that you'll use to build your site, multi-purpose pieces of information. They're much more than blog posts: they can store advanced properties and data that you can then render to your taste or parse using plugins. You can feature selected articles to include them in a special listing or for other purposes.

Articles can be sorted, but first the "sorting order" column header must be clicked (the second one, to the right of the one with the checkboxes). But this will not be of much use, as this ordering only works inside its Category. One fix I found to properly sort them, is to feature them all, and then in "Content->Featured Articles" sort them manually as you wish. This was useful for my landing page, which shows the most recent articles first (I couldn't arrange them by published or created dates as sometimes I've used those in unorthodox ways).

A few tips and tricks for articles:

• Add a "Read more" break to all articles with more than one or two paragraphs. In previews, only the part before the break will be rendered. Use page breaks for very long Articles (optional).
• Set the category, language and tags (only the first one is required).
• You can add an Intro Image (that will be seen in previews) and a Full Article Image (above the text). I use those for the game covers in my reviews.
• Don't forget to fill the metadata (description and keywords) in the "Publishing" tab.
• For every image in the article, set the alternative text (125 chars or less) and enable lazy loading.
• After saving the article for the first time, check the assigned alias (URL) and change if needed.
• The default rich text editor has many features, but sometimes you'll need to do something more advanced. You can edit the raw HTML code of the article by clicking the "Toggle Editor" button that appears at the bottom. Note: if you modify some element and then you make more changes using the editor GUI, you'll lose those advanced modifications (e.g. if you change the class of an <img> element and then you edit it again).

6.3 Menus

This may be complicated to understand. In the apps or webs you use everyday, menus are a hierarchical collection of links to execute some action or visit a page. You could do without them. In Joomla, not only they are entirely mandatory, they also influence how its internal router (that resolves URL requests) behaves. Without a menu, your content will be inaccessible, or at the very least it won't have a search engine friendly URL. You can assign it to a hidden menu to solve this.

To hide a menu entry, unpublish it.

If providing several languages, improperly associated or not matching menus can also lead to errors when switching from one to another.

6.4 Field Groups and Fields

Another powerful feature. Fields are extra data that you can store in articles. You can freely create and name them, and assign them a type from the many existing (plain text, number, date and time, image, checkbox, list, file...). They can be organized in Field Groups (categories of fields), that can themselves be associated to certain categories of articles. When you edit one of these articles, a new tab will appear with form field controls to set the values. An additional tab will be inserted to edit groupless fields. Field types are permanent once created (they cannot be changed afterwards). Beware of mistakes!

I used fields for my game and mod reviews, to store information like the developer, genre, platform, score... I wrote a custom plugin to render those in the article. Basically you can use them as a database. Of course, you can control their visibility: for each one, in the "Options" tab, set "Automatic Display" to "Do not automatically display" and they won't appear in the article (there's no option to hide them all permanently).

6.5 Tags

The Tag system is a component in Joomla. You can assign them to your articles to additionally categorize them, so when the user clicks on a tag, he'll see the full list of articles marked with it. You can set as many tags as you want, but try to be scarce with them to avoid clutter. Here's a tutorial:

https://docs.joomla.org/J4.x:How_To_Use_Content_Tags_in_Joomla

By default tags appear sorted by ID, not name, so if you add more tags later, they could be incorrectly ordered. To fix it you can create a template override of tags.php (instructions in section 7.2).

6.6 Gantry

Time to customize the look and feel of your site already? Begin by reading the whole documentation of Gantry Framework. Don't be lazy and read everything in order. You'll see that it's very intuitive to use. Above all you need to understand how Outlines, Particles, Atoms and Styles work:

• Outlines are like templates that you can assign to specific pages or categories of your site. They define the layout of the page. They are composed by sections that render vertically from top to bottom; you don't have to use them all (some can stay empty). You can insert and resize content (particles) freely inside them.
• Particles are widgets (like modules or elements), more or less complex. A logo, an image reel, a "back to top" button, social network links, a copyright notice, an empty spacer; those are all particles. You have a list to choose from, dragging and dropping to one of the outline's sections.
• Atoms are particles that have behavior but lack a graphical presence (they're not rendered). For example, a script.
• Styles are presets of colors, fonts, spacing... that can quickly change the appearance of your site.

To open the Gantry configuration panel, follow the instructions in section 5.3 (it's very easy, the fastest way is by using the shortcut in Joomla's dashboard). Click the "Configure" button of the active theme. The layout editor screen will load, showing the default Base Outline. This is a special outline that can't be removed, and the only place where you can set the global page settings (custom header HTML, favicon, font...) and the particle defaults (the common properties a given type of particle will have unless modified).

Outlines and particles support a handy inheritance system. You can set them to either copy or inherit properties from a "parent"; in the latter case they'll mimic whatever updates you make in the parent afterwards. One can exert a fine control over this, so you can override the values of individual properties and leave the rest untouched.

Here's what I learned from using Gantry that you may find useful:

• If for some reason you want to return to the default Joomla template (Cassiopeia), go to "System->Site Template Styles."
• To remove an outline, it must have no Assignments. The Base Outline cannot be deleted, nor can be the last custom outline.
• You'll probably need a custom default outline for each language.
• To set the default logo, copyright, branding and social information, etc, go to the Base Outline and then "Particle Defaults."
• To change the favicon, the meta tags (name, description, social), etc, go to "Page Settings" in the Base Outline.
• To hide or show content depending on the device (mobile, screen size...) use the Utility Classes.
  • Tip: in Firefox, CTRL+SHIFT+M will open the mobile mode for testing.
  • In outlines, the "Offcanvas" section contains the mobile menu.
• To align a particle left or right, in its properties, "Block" tab, choose a "Variation".
• Don't forget to customize the Offline and Error outlines too! Like the Base Outline, they're system outlines that can't be removed. The first one is shown when you enable "Site Offline" in the Global Configuration, the second is the "404 - not found" page.
• Gantry lets you edit the Menu (you can even set icons for main categories). This doesn't really touch the Joomla menus, it's a layer of customization that sits on top of them. Nifty.
• In the "Extras" menu, you can switch between "Production" and "Development" modes. The latter will automatically recompile the CSS (the files that define the visual aspect of your site, keeping it separate from the content) when making changes.

For advanced styling changes, you can customize the look and feel of the site with SCSS (a scripting language that will get compiled into CSS code). Follow this tutorial:

https://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet

To create the custom .scss file, go to "System->Site Templates->G5 helium" (or your template), and navigate to the custom/scss/ folder. For example, I have a whopping 700+ line file to control how every element looks. It took a lot of testing, specially the tables! Most browsers offer development tools that will be very helpful. Try right clicking on any page element and choosing "Inspect".

What, are you determined to use SCSS to give your site a facelift, now? Then make sure to comb it entirely to find all elements that need changing. There are some you might skip otherwise, such as the search results page, advanced filter controls... Trust me, just when I thought I was done already, I kept finding something I had missed the following week.

Oh, and you should do a full inspection after every new change too, as something could have broken elsewhere, where you least expect it. When coding SCSS, the more specific the selectors (the instructions that set which matching content the style will apply to), the better. Just how many button classes can Joomla have?

Changing the style of the website will require Production mode to be disabled in Gantry. Otherwise, you'll have to manually recompile the CSS (using "Clear Cache" in the "Extras" menu). If you can't see any effect after making changes, it's due to this!

7. Advanced

7.1 Extensions

Joomla's capabilities can be extended by the use of Components, Modules and Plugins. They can alter not just the behavior, but also the look and feel of your site, further than a theme would allow. Knowing how to code in PHP is recommended, but not compulsory.

• Components are the bigger kind of extension. Think of them as small pieces of software that will add some functionality. Most of them are added to the administrator dashboard, unseen to the users, though their effects can be visible. Examples would be Gantry, a backup extension like Akeeba...
• Modules are like widgets (applets) that can be placed in your pages in named slots called "positions", defined by the template. A language switcher, a search bar...
• Plugins don't have a visual aspect, though they can be managed in the system configuration using a form. They are more or less complex pieces of code that can be triggered to run at certain events. For example, you can write a plugin that before rendering an article, will parse it and apply some formatting.

You can find anything you might need in the Joomla Extensions Directory (JED). Installing one is as easy as going to "System->Extensions", and clicking the "Install Extensions" button. Drag and drop the .zip file you downloaded or point the file browser to it. Done!

7.2 Template overrides

A concept akin to the one used in object-oriented programming, you can modify the behavior of Joomla by changing the PHP code of certain parts. This is done per-template by overwriting entire files (to be precise, you edit a copy of the file, even if you only need to change a line), and offers a lot of flexibility. The CMS will even warn you when an official update includes a newer version of the modified file, so you can port the changes.

To create an override, go to "System->Site Templates" and select the one you're using (e.g. "G5_helium" for Gantry). In the "Create Overrides" tab choose which aspect of the site you'd like to modify to your liking. Its full set of files will be copied to the html/ directory inside the template. Go there and click on any .php file to open it in the editor view, and begin coding. You can choose to view the original contents too, or a summary of the differences for comparison. After saving, clear the cache to see the results.

I implemented a couple of overrides to control how some listings rendered. I hope the Joomla devs don't update those files anytime soon!

7.3 Code snippets

TinyMCE (Joomla's default editor) allows to insert samples of source code, but they won't have syntax highlighting. To fix this, install the PRISM extension and enable it. To learn how to use it read the documentation; you can enable many additional languages (TinyMCE only lets you choose from a handful) and show line numbers. All this will require to edit the HTML source of the <code> element to modify its classes.

7.4 Smart Search

There was a time where you had to integrate Google if you wanted to have a search box in your website. Not anymore! Joomla ships with a too-good-to-be-true search component called Smart Search. By adding a search bar module in any position, your visitors will be able to find any term.

To manage it, go to "Components->Smart Search->Index". You can click the "Index" button to trigger a rebuild (no need to, it will get done regularly), or "Maintenance->Optimise". Finally, the "Options" button leads to the component configuration. You can disable certain content items from being indexed.

7.5 Scripting

There are few things you won't be able to achieve by coding JavaScript. You can add a custom script to your webpage thanks to Gantry: just add it as an Atom at the end of the "Page Settings" tab of the Base Outline. You can also use this to "inject" custom CSS. Be warned that your code will be publicly accessible, as it will be included in the header HTML!

As an example, this is the code I used to give the background a parallax scrolling effect:

const MULTIPLIER = -0.2; // Speed and direction of the scroll.

window.addEventListener("scroll", function()
{
	requestAnimationFrame(function()
	{
		var scrolled  = window.pageYOffset;
		var container = document.getElementById("g-container-main");

		container.style.backgroundPosition = "0 " + (scrolled * MULTIPLIER) + "px";
	});
});

... and that's it! Phew! I thought I'd never see the end of it. Hope you find it useful, and if there's still any doubt left, don't hesitate to contact me.