joomla

Details

Last Updated: Thursday, 10 October 2024 12:53

Published: Friday, 05 October 2018 17:09

Hits: 1543

joomla:

Joomla is very popular open source Content Management Software (CMS) right behind Wordpress in popularity. It's little bit more complex than Wordpress, but has lot more options to customize your website. It's not written around making a blogging website, but to make a regular website. With wordpress too, you can make a regular website, but it will require more work. In joomla, you can start right from the box.

Joomla offical website is: https://www.joomla.org/

A lot of begineer's and advanced learning material is on: https://docs.joomla.org/Main_Page

A very good tutorial as always is on tutorialspoint website: https://www.tutorialspoint.com/joomla/

Joomla 3.9 is latest as of June, 2020. All material below is wrt version 3.9.

Joomla vs WordPress:

Before you install joomla, understand that there are some very basic things missing from joomla that are very standard in Wordpress. I hate joomla for that, but then the lure of having a "customized interface" in joomla made me switch (customization in wordpress is too much work, as it's mostly for blogging. However, there are too many templates available in wordpress, that can allow you to customize any website). Joomla has lots of advanced features, which most of the times are just more fancy and convenient, but don't really add any real value. In fact things of real value have been taken out of joomla, as I note some of them below.

1. Joomla does not have auto save feature. So, basically if you have been typing an article for an hour, and then suddenly realize you have to save, and then you click on save. But then something goes bad (internet connection lost, timeout, autologout etc). Now the page you were trying to save with latest content is lost forever. You still have access to older copy, but your work for last 1 hour is gone. It's not saved anywhere. Wordpress auto saves your articles every few minutes, so I've never lost any article there, but with joomla I've lost lots of articles. One option is to click on "toggle editor" button on bottom of editor, then do select all and copy (ctrl+a, ctrl+c), then paste (ctrl+v) everything in local editor on your local machine, and save it there. Then click on "save" button on joomla, and if for some reason, save doesn't succeed, you have a local copy, from where you can copy and paste again. NOTE: you should always save "html code", as saving raw text loses all markups as bold letters, underline, etc. Also, be default the session timeout is 5 minutes, which is too small and on doing save, it's guaranteed that it will log you out without saving your new content. I extended it to "couple of days", so now I don't lose my articles due to auto log out (better than nothing). This can be done by logging into administrator panel, and clcking on system->global configuration. Now select "system" tab on slight right on top, and scroll to bottom on "session lifetime". Set it to 15000 and save.

2. Joomla doesn't have any search feature to search for articles in your backend (administrator panel). In wordpress, you can search for anything in all articles in backend. This was very convenient, as many times I would not remember which article I put certain information in. Searching for this easily allowed me to find the article. In joomla, there is a search button in backend, but it only searches in title, which is not very helpful. For ex, if I'm looking for a term "TV show" in any of the articles, searching in backend will report only those articles that have this term in the title of the article. The only way to search is to make all articles "published", then goto frontend (i.e your website "xyz.com"), and then search over there. There it searches for that term in all articles, menu items, etc.

3. mouse right click doesn't work in editor when editing articles in joomla. So, you have to goto "Edit" button at top and click on copy,paste etc. This is not too bad, as there are also short cut keys that you can use (ctrl+c to copy, etc0

intsalling joomla:

I've joomla 3.9.10 installed. So, instructions below may differ for other joomla versions. Official joomla website is best resource for installing joomla: https://docs.joomla.org/J3.x:Installing_Joomla

Few tips:

• Download Filezilla client to upload joomla files to your server (filezilla is ftp pgm to transfer files from 1 computer to other)
• On some host, "localhost" doesn't work for hostname in database configuration. Get name of server from you web hosting provider. Ex: on ipage, it's <yourloginname>.ipagemysql.com (i.e if your login for ipage is matt2016, then hostname would be matt2016.ipagemysql.com), while on godaddy it's localhost.
• Once successfully done, you may want to remove login panel from front page of your new website. Goto Extensions->Modules, then search for "login", and then where login form appears, "unpublish" it. That will get rid of the login panel.
• To go to administrator site (aka backend of website), type your website name, and add "/administrator at end. ex: www.maaldaar.com/administrator/

joomla basics:

We'll log into adminstrator site (backend), and then look at various buttons on top. These are the icons you will see on top: System, Users, Menus, Content, Components, Extensions and Help. Most of the things under Users, Menus, Content and Extensions can also be accessed by clicking on System->Control panel.

Template: Templates are what determine how our website looks. It's a type of joomla extension, and you can download any joomla template on internet, and activate it on your website. That will completely change the look of your website. Thus templates make your website customizable. If we click on "Extensions-> templates" on top, we'll see 2 templates available by default (Beez3, protostar). We can also also see the 2 templates by going to system->control_panel->templates. Under styles, it will show all templates. Choose default icon for the template you want to have for your website (by clicking on default). protostar is default, but personally I prefer Beez3, so I change it to Beez3. All website creation notes below have been written with Beez3 in mind. The templates that we talked above are front end template. There are also 2 back end template that change the feel of the administrator panel (after you log in). You can see these by choosing "administrator" instead of "site" on left top side, on the screen where you see the 2 front end templates. The 2 back end templates available by default are Hathor and Isis. Isis is enabled by default. We rarely need to change it, so we never mess with back end template. 

Each template comprises a lot of files. Main file is index.php, which is called on loading your website. This in turn calls many other files which determine the look and feel of your site. You may change the code in the any of the files in this template, and that will change the website appearance. Thus templates contain the main code of your website, and they interact with contents of your website in order to display it. Files in a template can be viewed by by clicking on extensions->templates->templates (not template style), and then clicking on particular template details and files. You will see index.php as well as various dir. Whenever you want to change anything in template, you will need to mess with these files, so you will need to know some php, css and html coding.

3 important concepts to know regarding publishing a page or an article:

1. ARTICLE: first create article using article manager. Articles are the main content that you want displayed on your website (similar to wordpress article concept). We can see all articles by going to Content->Articles. When we see all articles list, you should make sure that you see a green tick mark in "status" in front of any article name. Else that article will not display on your website. You can add a new article by clicking on "new". By default, "content" tab is opened, which gives us a blank editor to type our content. On right side are multiple options: choose "status" as published, Category as "what you want" and other options. There are multiple tabs on top besides the "content" tab. "publishing tab" is a important one, which controls the"status" of the article. If the "finish Publishing" line has a date on it, then the article will expire on listed date, and will cause the "status" to go red. Delete the "finish publishing" line to keep article unexpired. On saving the article, you will see that each article gets assigned an "ID" number. This is the unique number that is used on the link to display the article. For ex: to see article with ID=23, http://www.maaldaar.com/index.php?option=com_content&view=article&id=23. However, when you go to that article on your website, it will have a different link like: http://www.maaldaar.com/index.php/linux/linux-installation. This is because joomla creates an alias for that link, which is human friendly.

2. MENU: However, articles by themselves are not visible on your website, unless they are linked via "menu". Menu is list of menu items. You can think of menu as "restaurant menu", which has various menu items as bread, burger, chips, etc. In joomla, menu items contain the final link to your articles. You can view menu as rectangular box with hierarchy of menu items in it. Usually, it's "top/bottom or left/right navigation gui" box, which has all menu items in it. Clicking on menu item takes you to the page, which has one or more articles in it. Infact, menu item is just a link to whatever you assign it to (we usually assign menu item link to an article, but it can be link to many other things. Joomla allows us to choose what we want that menu item link to point to). For ex: menu might be "Shopping", while menu items might be "electronics", "clothes", "jewelry", etc. All of these menu items together form menu. Do not think of menu and menu item as same thing, they are NOT. menu is a collection of menu items.

If we click on "menu" on top, we will see 2 menu provided by default: main menu and user menu. The default is main menu (shown by home sign). We can add menu items to "main menu" by going to meus->main menu->Add new menu item. On new screen, we choose "menu item type" to be "article", link it to an existing article, save and close. Thus the article gets linked to menu item. We can add more menu items, each of which has link to articles, etc. Ideally there should be a separate menu item for each article, if you want each menu item to point to a article. Any article that doesn't have a link via menu item, will never appear on your website. We can also add new "menu" on top of 2 default menu provided. Click on menus->manage->add new menu. We can have as many menu as we want. Usually, we put all menu items under default "main menu", and that suffices for simple websites.

So, what's the purpose of having more than 1 menu? It's so that we can have different custom menu to display on different pages or on different parts of the same page. For rx, we may have a side menu on our website on left side, which always shows all menu items. However, on top row of website, we may want to have a menu with different menu items as "About Us", "contact", "sitemap", etc. In such a case, we need 2 different menu. We'll see how to place these menu in module section.

We can also create a hierarchy of menu items, so that our website is easy to navigate. When we create or edit menu item, on right side, we see some options. One of the options is "Parent item". Here, by default, it's selected as "Menu item root", but can be chosen as any menu item already created. Then that menu item becomes parent, implying that this menu item is child of that menu item, and sits under it. Similarly, we can have more child menu items. This is very useful to keep your website hierarchical, instead of flat.

An example of such hierarchical menu item is a website that has "finance", "shopping", "real estate" as menu items, and then each of these have further menu items (i.e finance has menu items as banks, stocks, bonds, etc, while shopping has menu items as beauty, clothes, etc). We can link an article to each of these. If we want parent menu items as "finance" to contain something different (i.e have a link of menu items that are under it, or short summary of menu items under it, we can choose "archived articles" etc in it instead of "single article". So, from perspective of joomla, all menu items, whether parent or child, are treated same way. T

Other way to understand difference between menu and menu items is that the top level root menu item is called "menu", while all child items underneath it are called menu items. Thus even though menu is just the top level or parent of menu item, we differentiate b/w menu and menu item, since menu is the one that is called by modules (explained below).

3. MODULE: The 3rd important thing is module (after article and menu). We created menu above (with menu items in it), but it's not visible on website yet. Where and how to place it is decided by module. Menu will not show up on webpage unless it is linked to atleast 1 module (and that module is published or visible). This is because, modules are the ultimate thing that show up on webpage. In template "Beez3", we see html/modules.php file (by going to editor of beez3 template. It's in extensions->templates->templates and clicking on details and files). This file is called via index.php and all modules are loaded and rendered one by one. So, if some menu is not linked from within a module, it will not show up on the website. We can see all available modules by clicking on extensions->modules. For main menu above, we have a default main menu module. Similarly we have "login form" module, "latest articles" module, etc. Position of each of these modules (i.e where they are going to be placed on the webpage) is indicated under "positions". Position of these modules can be changed to anywhere on your webpage as left/right/top/bottom etc. For Beez3 template, main menu module is in position 1 (top) by default, while user menu module is in position 7 (left). Which position goes where on the page is determined by the template code, i.e in template beez3, developer of this template might define "footer" position as one on the bottom of the page, while position 7 might be defined as right of the page. So, when arranging positions of various modules, choose module position corresponding to that template.

We can create many more modules for many different positioning of same main menu. Or we can create new menu as "my custom menu", and create a new module for "my custom menu". Thus module allows us to have flexibility in placement of that box, which may be menu, search form, etc. Without module, menu would be at a fixed location, with same menu items being seen across all articles. The code is hardcoded into the template. But now, we can make many menu (each having different or similar menu items), then make many modules (with each module having different menu). Now on each webpage, we can decide what module to place, where to place, so that different menu will show up on each webpage. This is a big winning feature of having module in joomla (in wordpress, you have same menu across all pages. modules is a new concept introduced in joomla). Thus modules provides one extra level of customization.

As you can imagine, module can be of many type. We can define module as "menu type", where it contains menu. Or it can be "article type", where it contains articles. Thus we can create a new module, assign it a type, and then choose what to display when that module gets loaded (i.e display menu items, articles, etc). Mostly, we have modules as "menu type", as we create menu items to link to our articles. For this website, I already had a "main menu" module, which was of menu type, and it's position was assigned 7 (i.e left). So, when the template gets called, this "main menu" module gets loaded, which is linked to "main menu". So, each module is a rectangular box and it contains inside it whatever we want it o have. All these modules then get displayed on any page at positions assigned, and this is how our final page looks !!

Modules are confusing concept, and the positioning is even more confusing since each template may have it's own definition of what "position-0" means. To help with that, joomla allows positions of modules to be seen on your website itself. For that, first goto Extensions->Templates, then click on "options" icon on top right of that page. Over there, set "Preview module position" as enabled, save and close. Now open your webpage (www.xyz.com), and append ?tp=1 (tp=1 says enable "template positioning") to end of that link (i.e www.xyz.com/index.php/shopping?tp=1). This will show position and style (i.e Position: position-0,  style: none outline) of all the modules that are rendered on that webpage. This is very helpful in understanding and debugging module positioning related issues.

Summary: So, to get your first webpage to be published, you need to understand all 4 things -> article, menu, module and template. Write a new article, then create menu/sub-menu which ultimately have links to articles. Then create or use existing modules to control placement and appearance of these menu/sub-menu, search, tags, etc. Templates are ultimate top level website files, which call and render these modules. You do not need to put any extra code in your template, as modules are rendered by joomla code itself, w/o any special code in your template.

website creation:

That is all we need to know for website creation. Remember that for building a simple website, we need to know very few (< 10) buttons of joomla. We'll just learn about the basic ones now, and then build on top of it later.

1. Log into joomla backend. On the very top, you will see 7 pull down menu:

• system => 2 important links here are: "Control Panel" and "Global configuration".
  • CONTROL PANEL=> It's most important one, as it has links to articles, menus, modules and templates which is all we need to get a working website. In addition to these, it has links to "media", "categories", "user" and Global configuration settings. So, basically we do not even need to go to any of the next 6 pull down menu, as everything of interest is listed under "Control panel".
  • GLOBAL CONFIGURATION => This has global settings for various things on our website, and can also be accessed via "control panel" above. All default settings are good for us, no need to change anything here. Here we globally set options for everything as articles, modules, etc. This page also shows up when we click on settings on left top of page (only seen when we are editing something).
• users => I just have 1 user for my website (which is administrator or me), so no need to mess with anything here. This is irrelevant for most single adminitrator websites.
• menus => This is to manage menus and menu items. We use this to create any new menu or menu item. "Main menu" is already provided by default, so we can add all menu items to this "main menu". Add menu items as described above. We can add new menu also, so that we can other menu besides "main menu". This helps us to keep different menu items under different menu and show them differently by showing different menu on different pages.
• content => We use this to add any new articles by clicking on articles. We can also upload files, images, etc by clicking on "media". Add articles as described above.
  • MEDIA: We can upload upto 10MB size of file in "media" section. You can change default of 10MB to any size by clicking on options on right, or going to system->configuration. The files can be pdf, jpeg, or any kind of video or text file. The path to this folder is "your-website-name/images". So, for a folder in "Media" called "sample" with file abc.pdf in it, the path would be www.mysite.com/images/sample/abc.pdf. We can also specify url as relative to main server path, so url as "images/sample/abc.pdf" is also recognized as a valid url.
  • UPLOAD FILES: The upload feature doesn't allow us to upload any html files, scripts/programs, or any other file that joomla thinks are unsafe. In order to upload such files, you will need to login to your website provider admin page, and directly upload those files in "images" folder. The dir for media is in your joomla_installation_dir/public_html/images.  So, for abc.com, it's in domains/abc.com/public_html/images. Goto this dir. You will see "index.html" file in every folder over here. You can create your folders here, though that's not preferred since then you will miss index.html file here. Best option is to create all your folders from joomla admin page using "create folder", and then upload files using this web server login page (and using file manager). Goto appropriate subdir in images, and upload files there. Or you can use ftp to transfer bunch of files in 1 go.
  • TEXT/IMAGE LINK: For putting link as a text for any article, we can choose Insert->Link drop down menu, and put the URL and the text and other details, and that produces a "text" link. To put a link as an image (instead of a text), first insert an image in an article. Once image is there, select image and click on "insert link". Now you can put the URL that you want your image to point to. If you toggle editor, you should see code like this: <a href=...> <img src=...> </a>. Or you can edit html code directly by going to html editor. This image serves as a thumbnail now. If you want to change shape/size of this thumbnail image, highlight the image, and click on edit image. Now you can edit this image just like any other image in your article. change Dimensions to 800 X 200 or something. Select "constrain proportions" if you want to keep original ratio of width X height of photo.
    • This image link is very helpful when you have a big image to display in your article, but you don't want that to take the whole page. Instead you want to show a scaled down copy of the image (i.e a thumbnail), and then when the user clicks on that thumbnail, it pops up the full size image. This looks neat and is very commonly used on websites. In such cases, the thumbnail image and the full image both have same url, and are pointing to same image on your joomla server.
  • LINK TO SECTION OF PAGE: One other kind of link you may want to put is a link to a particular section of a page. This can be done via putting "#" in href link and putting the "id" in the linked page. Again, use the html code editor directly to put the "id" in the section of page you are linking to. See in html section for details of syntax.
  • MODIFY HTML: Most of the changes you want to do in any article for which you don't have a button available is often easier to do by directly modifying the html code in the editor. Do not install any plugins, extensions or anything else for this.
• components => we do not have anything of immediate need under this, so we can safely omit this whole section.
• extensions => This has links for adding/updating extensions, modules and templates. Since we are going with template beez3
  • modules => This shows all modules, i.e main menu module, login module, search module. You can change the status of module to "unpublish" by clicking the status for that module. You can also add a new module by clicking on new module. We have to select a module type, and then fill in details. If we select module type as "menu", then on next page, we enter the menu that we want in this module, starting/ending levels, etc.
  • plugins => plugin is a kind of joomla extension. You can write your plugin to add new functionality. There are lots of useful plugins installed by default.
    • Link to all plugins is here: https://docs.joomla.org/Help39:Extensions_Plugin_Manager_Edit#/media/File:Help30-Extensions-Plugin-Manager-Edit-pagebreak-options-screen-en.png
    • This link explains well on what plugins are: https://docs.joomla.org/Plugin
  • template => This allows us to see all available templates. If we haven't added new templates (by clicking on extensions->manage->install), we'll see 2 default templates provided by joomla. If we click on any template and click on "advanced", we can change template image, title, etc. Very important to change logo, title and description to match your website.
• help => This has useful help links. Not needed for now.

2. Now, we add a new article using "content" pull down. After saving it, we add a new menu item using "menus" pull down. We add a new menu item under "main menu". We do not add a new menu yet, as we want to stick with default "main menu" provided. We just add a menu item under main menu. Once menu item is added, we now goto extensions pulldown and click on module. We see about 8-9 modules. We click on "main menu" module and make sure that selected menu on this is shown as "main menu". Next we click on extensions->template and make sure the right template is chosen.

3. Once article, menu, module and template are done in step 2 above, our website is ready to show our first article. Refresh your frond end page, and see if it shows your menu item and your article linked to that.

4. Under global configuration->site settings, we should change the name of site to our site. Remember to save any changes that you make, otherwise the change doesn't take effect. That's true for everything.

Helpful joomla settings:

1. Show menu at only 1 level of hierarchy at a time: One of the things that I've wanted to do is to hide sub menu on the main page, and only show the top level menu items. If the user clicks on the menu items, only then it should show lower level menu items. That way your menu items on main page don't show like 1000's of menu items at the same item, which will make it hard to read. One setting to achieve this is via:

 Extensions->Modules. Then select "main menu". It wil take you to "main menu" with 4 tabs, by default, module tab will be selected. On it, click on "show sub menu items" as "No" instead of default "yes". Do not change the start and end level, else sub menu items may not show at all beyond the end level, even on clicking on menu items on the main webpage (which is not what we want). "Click "save & close".

2. Increase timeout duration: set session timeout to 15000 as explained on top of this article. That will prevent a lot of your unsaved work from getting lost.

3. Reordering menu items: For menu items, you will notice that default ordering is decided by the order of creating the menu items. So, if you have menu item "physics", and you wanted to create sub menu items "chapter 1", "chapter 2" and so on, but if you created "chapter 2", before "chapter 1", then chapter 2 will show above chapter 1 in menu list. To fix this, we can change ordering of menu items at any time. This ordering is only available once you have already saved the menu item. After saving, you can click on "ordering" on right side, and click on menu item, after whch you want tyour current menu item to be placed. So, for ex, if you want to place chapter 2 and after chapter 1, then click on chapter 1, and save. Now, on the "ordering" pull down menu, you will see correct ordering. You can also check for correct ordering by refreshing your website page.

4 Separator between menu items: Sometimes, we want a separator between menu items, or something with no link, but just a bold text which separates one submenu from another. This allows for easy navigation. One way to do this is to create a new menu item, but instead of selecting that "menu item type" as "aricles", we select it as "system links". Here we can select it as "menu heading" or "separator" (both seem to do the same thing, but "separator" doesn't change text color/size as explained below. Maybe it has different class. So, stick with "menu heading"), and save it. After saving, we can put it in the correct order by selecting "ordering" on the right side and saving it again (as explained above).

The separator created above has same font size + color as other menu items, so it doesn't look like a real separator. To change the CSS properties like color, font-size, etc we need to edit the user.css file. Here's a link on how to do it: https://joomla51.com/tutorials/template-customization/applying-color-to-a-single-menu-item-in-joomla

In short, goto extensions->templates. goto "Beez3 details and files" or files of whatever is your current template. It takes you to the dir of that template. goto "css" folder, create a new file called "user.css", and write your custom css code here (seems like user.css is already provided in latest joomla version, so just add your code in there). This will overwrite other css proporties provided by default. We can make changes directly in any of the css files also, but then any changes you make to any of these files will be lost when you import new version of joomla (as beez3 and protostar templates are provided with joomla package and as such get overridden). user.css does not get over written by new installation, so any css changes to any file should be made in the user.css. user.css is the last css file to be loaded when joomla is running, so any settings in css/user.css will over write css settings in any other css file. So, don't change any other css file in template, just copy the code from other css file to user.css and make required changes in user.css.

In the ex provided in link, "item-210" is the class selector for menu items, where 210 is the id of that menu item as seen under that menu item listing.

If we want to apply a particular set of properties to all elements of a certain class, the better way would be to first find the class of such elements, and then apply the property. To find the class, we can look at html code of any page of our website. If I go to firefox browser, bring up my website and look up the source code, and search for any of menu item separator item (i.e finance), I see that the class for these is "nav-header", so I apply the properties to this class as below. In my case, I coded as below to change color to red and font-size to large, with padding to provide some extra separation b/w menu items and menu separator. 

.nav-header {
  color: red;
  font-size: large;
  padding: 15px 0px 10px 0px; /* provides top padding of 15px, while bottom padding of 10px. Top padding doesn't seem to work?? FIXME ??
}

5. Delete menu items and articles: When you trash a menu, menu item, article, etc, they don't get deleted, and it's possible to retrieve it from trash. However, sometimes when you try to create something with same name, joomla will not allow, even if the item is in trash. In such cases, you will need to delete that trash item permanently. The way to do it is to go to "search tools", when you are at at "all menu items", "all articles", etc, and then choose "status" as "trashed". then it will show "all trashed items". then click on "empty trash", and then item will be deleted permanently.

6. Featured articles: By default your first menu "Home" is shown on front page. Whatever is in the "home" article is what is displayed. However, you can make joomla show certain featured articles on this page, so that it looks more lively and recent, then having same stale content for ever. A very good link on how to do this:

https://docs.joomla.org/Managing_the_Featured_Items

In short, these are the steps. Change the menu item type of  "Home" menu item from "single article" to "featured article" by going to articles->featured articles. You can customize the payout of this page by changing settings under layout tab. You can also set the article order here. Now save "Home" menu item. At this point, you can go to articles page, and designate those articles as "Featured" which you want to display on "Home" page, and they will show up. You can also have a separate "Article" menu to show all articles under that menu. Then you can have a subset of these articles marked as "featured" and show them under "Home" menu.

One of the common things when displaying featured items is to show only a small introductory section of article, and not the whole article. That allows readers to see a lot of articles at once and they can click on articles of their choice. One way to achieve this is to add a "read more" by going to article and clicking "Read More" (3rd or last line on the article tab where you select size, link, etc for article). This adds a "red line" on your article content (in html code, you will see <hr id="system-readmore" /> at that place). However, when you go to your website, and look at this featured article, you won't see any text associated with this "Read More" tag. By default, "Read More" text is hidden. To fix this, goto menu for "Home" (or whichever menu is assigned for featured articles). There goto "options" tab, change "show read more" to "show" and "show title with read more" to hide (this may be needed only for beez3 template, since that template adds a title to be displayed by default on any read more button). You can change any other settings here too (like showing the article publish date, number of hits, etc). You can add a "introductory image" to an article, and that will show up alongside the article in featured article list.

One other way to show articles of certain type only is to put them into a ceratin category, and then create a menu with menu type as "articles->category list", and then under "choose a category", enter that category. then all articles belonging to that category will show up.

Writing new template:

Beez3 template:

We used the default "beez3" template above, but it's good to know how to write our own template. Before we write our own template, lets look at all the files on beez3 template. To do this, we goto extensions->templates->templates and click on details and files. It shows us few directories and bunch of files. We can also goto our webserver, and look in this folder to see these files:

website_server/public_html/templates/beez3/ => In your case the website server name may be something like abc.com

A short description of these files is provided on joomla website here:

https://docs.joomla.org/Understanding_Joomla!_templates

Important Folders:

css => lots of css files

html => lots of dir within it. contains template override files

images, javascript, languauge => these dir are not so important

 Important files:

templateDetails.xml => holds meta info related to the template

index.php => It's the main skeleton of webiste, and is the main file called for any page that is shown on the website. Fe details of this file:

• Adds all the CSS stylesheets which are in css dir as layout.css, position.css, general.css. If user.css file is present, it's loaded at the end, so that it overrides all other css files
• Main html file starts after that:

component.php, error.php => not so important for now

Few customizations to beez3 template:

1. Removing fontsize buttons: In beez3 template, by default, there is a "font size = Bigger Reset Smaller"  section on top right corner (just before the search box), which looks annoying to many. To remove this, we can just comment out this section in index.php. Just comment out line 130, which is "<div id="fontsize"></div> " as shown below (NOTE: it's html code in this line, so comment has to be in html syntax)

<!-- <div id="fontsize"></div> -->

2. Removing banner: In Beez3 template, you will notice a big banner with "joomla logo on left and and We are Volunteers message on right". The easiest way to remove this is to modify index.php file.

<div class="logoheader">  ..... </div> => This is the section that is responsible for putting that banner. Comment out the whole section as follows

<!-- <div class="logoheader">  ..... </div> -->

However modifying this file as above got rid of the container itself, which causes your top menu items (that can't fit the width of browser) to disappear when reducing the width of browser. The div container earlier used to hold those roll over of menu items from 1st line to 2nd line. so, instead we'll just remove the logo section and then take care of that div container other way.

Comment out the logo section as follows. (This preserves the div container as is. Don't comment out the div section, just the <h1> content inside it):

<!-- <h1 id="logo"> .... </span></h1> -->

 That gets rid of the logo, but the background picture is still there, as the css code for class="logoheader" is still present in personal.css. Here background image is set to "personal2.png" which is what we see on our webpage. This picture is not in media folder of joomla, but in "images" folder of beez3 template.

.logoheader {
    background: url(../images/personal/personal2.png) no-repeat right
     bottom #0C1A3E;
    color: #FFFFFF;
    min-height: 250px;
}

Instead of modifying the code here, we copy it in user.css, and modify it over there. That way it overrides whatever is in personal.css with the new settings in user.css. We should never modify any css file except for user.css (for reasons already mentioned)

In user.css, modify the background image to some other image, or just set background image to none.

.logoheader {
    background: url(../images/personal/bg2.png) repeat right bottom #0C1A3E; //here we set it to some other image already present in that folder with repeat option so that the smaller sized image repeats itself. NOTE: bottom #0C1A3E is part of "background" and should have been on same line for clarity (see ;  in end)   
    color: #FFFFFF;
    min-height: 250px;
}

If we don't want to put a picture at all, and just put some color or leave blank, we can set that as follows:

.logoheader {

    background-image: linear-gradient(red, yellow, green); //Use this option if you want to have some colorful design there. Many more functions available in CSS documentation
    background-image: none; //Use this option if you want no image at all
    color: #FFFFFF;
    min-height: 50px; //Change the height to 50px, since we don't want a big blank section in there. If we set it to 20px or less than only 1 row of "menu items" can fix, which causes menu items to dis appear if width of browser reduced too much. 50px allows you to have 2 rows, so it's somewhat better as it allows more menu items to show until they disappear
}

3. changing width of page: By default, you will see that your joomla website doesn't extend all the way to the right side, i.e if you keep on increasing the width of your browser, the website stops growing in width on right/left side, and will instead start showing blank on right/left most side. We'll need to change width attribute, and the place to change it is in user.css of the beez3 template (as explained under item 4 above in joomla settings). A sample code to change width is as below:

/* copied from file css/position.css, changing max-width from 1050px so that 15 inch laptop screen can be full width */
#all {
    margin: 0 auto;
    max-width: 1550px;
    padding: 0;
    text-align: left;
    font-size: 0.8em
}

/* copied from file position.css, above code didn't change article width, just page width. This changes article max width from 660px */
#wrapper2 .item-page {
    max-width: 1260px
}

/* copied from file position.css, changed width from 21% and added max-width to keep navigation menu on left from getting too wide */
.left1 {
    padding: 0;
    float: left;
    margin: 10px 3% 10px 0;
    width: 16%;
    max-width: 80px
    position: relative
}

4. Adding footer: Beez3 template doesn't show footer on webpage by default. However it's really easy to add footer via 2 ways: First is where we use the footer module that is already provided. We click on "Modules", then new which shows all modules available. We choose "footer" module and place it in position 14, which will place the footer on bottom of page. Second way of adding footer by choosing "Custom" when clicking on new module. This custom footer module can be written by putting in whatever content you want in the editor of footer module. If you want the footer content to be centered, then you can put this html code in Editor:

<p style="text-align: center;">  Copyright © 2020 Maaldaar </p>

One thing to note is that since we extended the width of our website, we should increase the width of footer module too by adding this in user.css:

#footer {
  max-width: 1550px
}

A very good video for this is here: https://www.youtube.com/watch?v=orWoxsjD170

5. Changing default joomla icon to your own website icon: Beez3 template (or any template) by default shows joomla icon on the tab where you open website. It's called "favicon" (favorite icon). You would want to change it to some other custom logo or picture. You can create or find an image for your logo, and then goto https://favicon.io/, and then use the converter over there to create a ico file from png or jpg file. Once you have created ico file and downloaded it in your local computer, you now goto your webserver hosting panel to upload this file. You can't use joomla admin interface of your website to upload this file, as it doesn't support uploading these kind of files. Once you goto dir: templates->beez3 of your server website dir, you need to upload this file with the name favicon.ico in this dir. any other name won't work. Now if you refresh your website multiple times, you should see your new logo on tab of your browser.

More details here: https://docs.joomla.org/Special:MyLanguage/Changing_the_site_favicon

6. changing page title to be displayed on browser for any menu item: By default, page title shows the menu name. Sometimes we may want to change this default behaviour. For ex: menu item "home" (which is the homepage for yur page) shows "home" by default on the title of the page. We may want to change it to the name of the website. For that, go to menu item "home", then click on tab for "page display" and change the title to "maaldaar" (or in your case your website name). Now whenever you goto your website, the default title shown on browser tab will be "your website name". NOTE: "home" title still remains for the menu item.

7. 404 Error page: By default, 404 error page shows joomla error page, with all joomla content. To customize it, you need to create a custom 404 page, and then link to it in error.php file. There is a good article about this: https://www.joomlashack.com/blog/joomla/404-pages/

First create an article with any title for your 404 page, then create a menu item for that article. "Unpublish" it so that it doesn't show up in "menu list". Now goto "error.php" file in Extensions->Templates->Templates->Beez3_details_and_files. Over there enter the line as below just after "defined('_JEXEC') or die;"

 if ($this->error->getCode() == '404') { header('Location: /theURLtoYour404Page'); exit; }

Leave rest of the code unchanged. You can remove it too, but it doesn't matter, as we already did a exit in the line above. So, rest of the code never gets executed. To remove the top bar from our error page (" the box that shows "Published, Hits, last updated, etc), we have to hide all those from showing by changing settings for this article on artcle page or menu settings.

New template from scratch:

The best way to learn templates is by writing your own template. This link explains it very nicely:

https://docs.joomla.org/Creating_a_basic_Joomla!_template

Once you have written your template, set your default template to your own template, and test it on your own website. Even though your website won't look fancy, but it will work !! I haven't gotten time to write my own template yet, but someday I will.