I create the website for my business for free with Joomla - Part 3

Today, we will continue to create the website for your bookstore by going a little further.
Don't worry, this third episode will still be fun and informative. In the program :

• Display of the different literary genres and highlighting of certain books

• Customization of literary genres with a dedicated display

Let's translate it into Joomla language. Here is what you will learn to do thanks to this tutorial:

• displaying the articles from a category on frontend

• Pin an article on the top of the blog

• Create a child template

• Customize the CSS of this child template

I know it may sound impressive but as for the previous episodes, you will have no difficulty in achieving all this.
Come on, it's time to get to work!

The literary genres

As in a physical bookstore, the books must be arranged by literary genre so that visitors can easily locate them. This is what we are going to see now. Thanks to Joomla, we will display all the articles of a particular literary genre. This way, your visitors will know where to go to look for a detective novel, a children's book or a comic book.

And as in a real bookstore, you will see that we can really go quite far in the formatting of this display.

The blog category menu item

From the Joomla administration panel, open Menus and then, select your menu. In this example, we'll work on the main menu.

Click on the button New on the top of the page and then, follow these steps:

• Field Title : indicate the name of the literary genre (it is this name that will be displayed on the site)

In the Detail tab:

• Click the button Select

• In the popup window, click on Articles then on Category Blog

• Then select the articles category using the button Select

Save your entry and have a look to your blog in frontend.
We have indeed displayed the articles of the category of our choice, as desired.
If the result is pretty simple, we will improve it and even customize it with the following.

Let's go back to editing our blog menu item in the backend.

Open now the Blog layout tab:

• Leading Articles: you can choose the number of posts to display full-width on the blog's homepage. As a general rule, it is the last article published in this category which is highlighted in this way.

• Leading Article Class: Vous pouvez indiquer une classe CSS qui sera appliquée à cet article mis en avant.

• Intro Articles: Indicate here the number of articles (books) to be displayed on the blog's home page.
• Article Class: You can add any CSS class for your own styling ideas.
• Columns : Choose the number of columns on which your articles will be displayed.
• Multi Column Direction : You can select here whether your articles should be displayed in rows or in columns.

• Links: Joomla will display the number of articles given here simply with the title of these articles.

• Featured Articles: Do you want to display featured articles on your blog? Yes? Nope? Uniquely?

• Linked Intro Image: Joomla gives you the possibility to add a link on the introductory image of your articles (it's the same link as the one on the title of the article)

• Include Subcategories: do you want to include in your blog, the articles contained in the subcategories of the previously selected category?

Finally, you have several options to choose the order of display according to the order of the articles, the order of the categories and even based on the dates of the articles.

The possibilities are almost endless and of course, you can adopt a different display for each blog menu item. But be careful not to confuse your visitors. The best thing is still to keep consistency to facilitate the navigation of your visitors.

I invite you to have fun with these settings to see how the different parameters work on frontend.
When you have found the best setting, click the Save and Close button.

How to highlight an article?

Like a in bookstore, you may want to highlight a specific book. On you website, you also may want to display a specific book on the top of your blog and that this book stays in first position.

We have seen in the blog settings that it is possible to have one (or more) articles highlighted.
The problem is that when you will add a new item in this category, it will replace the previous one. So what to do?

Go back to your blog menu item and open the Category tab.

• Subcategory Levels: none

Open the Blog layout tab.

• Display one leading article

• Include all subcategories

• Chose Featured Articles Order for Article Order

Double check that you have chosen to show the featured articles.

Et voilà, all new no featured articles that will be published in the parent category or in the subcategories of your blog, will be displayed under your pinned article.

Let's play with the template

Don't be afraid, you will see that everything is going to be fine.

Since version 4.1, Joomla offers the possibility to create child templates. That is to say that you can create a copy of your template to modify it as you wish. The advantages of child templates are that you can have as many as you want, you can modify them as you want and nothing will disappear with the next Joomla or template update.

Create a child template

In the left menu, click on System.

Click then on Site Templates in the Templates panel.

Then, open your template.

Click the Create Child Template button on the top of your page.

Then enter the name of your child template (for example: detective novels) and select the additional template styles to import from the parent template.

Click on the Create Child Template button to confirm your entry.

Your child template is now available in the list of templates.

Use case of a child template

Well, I have the impression that this child template does not impress you more than that.
To show you the merits of this feature, here is a rather amusing case study that I suggest you carry out.

Open the child template you just created (in our example: detective novels)

Click on the button New file

Select the folder CSS on the left and then on the right, indicate user in the field File Name and select css for File Type

Click on the button Create.

Copy/paste these lines of code into your new user.css file (thanks to Viviana Menzel for her help):

.bw {
--cassiopeia-color-primary: #000;
--cassiopeia-color-hover: #999;
--cassiopeia-color-link: #666;
}

Click on the Save and Close button when you have finished typing.

Now, open the blog menu item you created at the beginning of this article.

In the Detail tab:

• For the parameter Template Style, select the child template you've just created

In the tab Page display:

• Indicate bw in the field Page class.

Click the button Save and Close button when you have finished typing.

Now display your "Detective novels" category on frontend to see that it has adopted a graphic charter much more related to crime novels!

More about Child Template

Our friend Philip Walton wrote an excellent article about child template: Sweet child o' mine... A deep dive into Joomla Child Templates.

There you go, we have already come to the end of this episode.
Admit it, this was ultimately not very complicated.

In the next episode

In the 4th episode, we will see how to set up a book search system. We will also see how to display related books, books by the same author, and why not, books by the same publisher.

And thanks to the overrides magic, we will see how to harmonize the style and ddesign of these modules.

See you soon and happy holidays!