6 minutes reading time (1102 words)

Cassiopeia, Joomla’s powerful built-in template: how to use css classes for your category blog

Cassiopeia, Joomla’s powerful built-in template: how to use css classes for your category blog

2024-01-Cassiopeia

There are a number of content display options in Joomla. One of them is the category blog, that allows us to display multiple articles from a category. This option has many settings, which can be confusing for users, so this article will describe the parameters and demonstrate what they do.

Global settings

If we go to Content -> Articles and click on Options at the top right, we end up in the global settings for content (articles and categories). As the name suggests, these settings apply globally, i.e. the same for all articles and all categories. Global settings can be overwritten in a menu item, which gives us extra flexibility in the display of the content.

For the category blog, the settings under “Category”, “Blog/Featured Layouts” and “Shared” are important.

Category

Here we can first choose the general layout of the categories: blog or list. We can also decide whether to display category title, category description and category image or not. If we have nested categories, we can choose how many levels to display (subcategory levels).

If a category is empty, it can still be displayed (Empty Categories) and a “No Articles” message can appear separately.

When we work with subcategories, we can mark them with a heading (Subcategories Heading). Additionally, the description of the subcategories and the number of articles in the category (# Articles in Category) can be displayed.

We can also display the tags (of the category).

Blog/Featured Layouts

In this tab there are again a number of parameters. First, you can define how many articles are presented as leading and how many as intro. CSS classes can be entered for these articles (Article Class). The standard template Cassiopeia comes with a few classes that are important for displaying a blog:

boxed image-right image-left image-alternate (in combination with image-right or image-left) image-bottom

But it can also be any CSS class, for example a Bootstrap class or one you defined.

For a multi-column arrangement of articles, we can define the number of columns and the direction. Finally, you can enter how many articles are displayed as links. Further settings include the integration of subcategories and the link to the intro image. If not selected, only titles (if set) and/or read more buttons (if available) can be clicked.

Shared

Here we find the settings that are shared for blog, list and featured layout and affect the sorting of content and the display of page numbers and featured articles.

Category Order: No sorting, Category Order (set manually), Title Alphabetical and Title Reverse Alphabetical

Article Order: Newest First, Oldest First, Title Alphabetical, Title Reverse Alphabetical, Author Alphabetical, Author Reverse Alphabetical, Most Hits, Least Hits, Ordering (set manually) and Reverse Ordering

Date for Ordering (if sorting by date, which date is relevant): Created, Edited, Published

Pagination: Auto, Hide, Show

Pagination Summary: Hide, Show

Featured Articles (if a category contains featured posts, how should they be included): Hide, Show, Only

Menu settings

To display articles from a category, we need a menu item of type “Category Blog”. Here we again find a series of tabs with important parameters. Under "Category" are the same settings as in the global options and can be left as is or changed. This makes it possible to present different categories in different layouts on the site.

In the "Blog Layout" tab we find the settings from the global options "Blog/Featured Layouts" and "Shared", with one exception: the link to the intro image is missing here.

Now that was all very theoretical, what do the results of these settings look like?

Let's start with the standard settings of a fresh Joomla installation. As an example, I'm building a news site with a category "Blog" that has three subcategories: Sports, Music, and Movies. The parent category has no articles of its own.

My menu item shows the "Blog" category with the following settings:

Settings under category

Settings under Blog Layout

With the settings Subcategory Levels = 1 and Include Subcategories = None, we get a list of the subcategories of "Blog" and because the parent category does not have its own articles, the corresponding message appears.

image

If we click on a subcategory, it looks like this:

image
We can change a few parameters:

image

The message about non-existent articles disappears and next to the subcategories we see the number of articles per category.

image

But this doesn't really look like a blog yet. We change the settings again:

Subcategory levels = None

Include Subcategories = All

Leading Articles = 0

Intro Articles = 6

Columns = 2

Links = 0

I also included the CSS class "boxed" so that we can better see the difference between "Down" and "Across" in the multi-column arrangement.

image

With the "Down" arrangement, the CSS class "masonry-2" (because we selected 2 columns in the options) is automatically inserted into the code. This class is defined in Cassiopeia in such a way that the articles are first arranged one below the other and then fill the columns. The Masonry effect is more visible when articles are of different lengths. Another example of Masonry layout: https://cassiopeia.joomla.com/sample-layouts/masonry-layout

image

If we now set the arrangement to "Across", the articles will first be sorted next to each other and then into rows. The CSS class “columns-2” is responsible for this (automatically inserted in the code). In this case, the length of the articles doesn't matter, the boxes are all made the same size because the CSS class is defined as "grid".

image

To illustrate it even more graphically:

Two columns down

image

Two columns side by side

image

A final example with changed settings:

Article Class = boxed image-right image-alternate

Columns = 1

Category Order = None

These settings cause the images to be displayed alternately to the right and left of the text. The "image-alternate" class must always be used in combination with "image-right" (the first image on the right) or "image-left" (the first image on the left). Category Order = None means that the category does not play a role, the articles are sorted by the date of publication only using the Articles Order = Most Recent First.

image

Further settings, which I will not describe in detail here, can be found in the “Options” tab. These parameters (show title, show intro text, position of article info, etc.) have an impact on both the blog layout and the display of the articles themselves.

I hope this article helps to understand the variety of setting options for a Joomla blog layout. Now you can have lots of fun creating your own blog and exploring the layout possibilities.

This article is also available in German on my own blog.

×
Stay Informed

When you subscribe to the blog, we will send you an e-mail when there are new updates on the site so you wouldn't miss them.

Smoothest Joomla Upgrade - My History of Joomla Up...
Local Community liaisons, what are they and do you...
 

Comments

No comments made yet. Be the first to submit a comment
Already Registered? Login Here
Guest
Sunday, 23 June 2024

Captcha Image