Page and Module Class Suffixes in Joomla

When creating modules in Joomla, you may have seen a "Module Class Suffix" option.

When you add menu links in Joomla, you may have seen a "Page Class" option.

Did you know that these two features are very closely related? These features allow you to add custom CSS to specific modules or pages. This makes suffixes a really good way to style individual modules and pages.

Many Joomla template designers rely heavily on these suffixes to create their unique designs.

In the videos below, we'll introduce you to page and module suffixes. These videos are part of our "CSS for Joomla" class which is available inside Joomlashack University.

Read more: Page and Module Class Suffixes in Joomla

Absolute Beginner Guide to Joomla Modules

One of our customers asked how to work with Joomla modules. Modules are small blocks around the edges of your site. They make life easier for your site’s visitors.

They allow visitors to quickly find information, links, or features. In this tutorial, you will learn how to create Joomla modules.

You'll also learn the three ways in which you can control modules. You'll learn how to:

  • Change the position of modules
  • Change the order that modules appear in
  • Change menu links that modules appear on.

Read more: Absolute Beginner Guide to Joomla Modules

CSS Grid #23: Building a Hamburger Icon Menu

CSS Grid #23: Building a Hamburger Icon Menu

This tutorial will explain how to code a basic hamburger icon, in order to display the main navigation with CSS Grid.

The navigation will be hidden by default at all screen sizes and it will appear when clicking the hamburger icon.

The desktop version of the code displays a horizontal menu, whereas the mobile version (< 700px) displays a vertical menu.

Read more: CSS Grid #23: Building a Hamburger Icon Menu

CSS Grid #22: Theming a Footer with CSS Grid and Media Queries

Theming a Footer with CSS Grid and Media Queries

In this tutorial, you are going to build a footer element with media queries. The main part of the footer contains 6 elements on a wide screen.

This layout works with screens larger than 960px.

The 6 elements are as follows:

  • The logo.
  • The primary navigation.
  • The secondary navigation.
  • The social media block.
  • The contact block (phone number and email address).
  • The submit form for the newsletter subscription.

Read more: CSS Grid #22: Theming a Footer with CSS Grid and Media Queries

3 Ways to Disable a Joomla Plugin

3 Ways to Disable a Joomla Plugin

Some of the most common errors we see on Joomla sites involve plugins.

A normal Joomla site will have dozens of plugins, so they are a common source of errors.

In this tutorial, I'm going to show you how to disable a troublesome plugin, using three different techniques.

The first technique is the normal way to disable a plugin. The second and third techniques can be used if the plugin has locked you out of Joomla's administrator area.

Read more: 3 Ways to Disable a Joomla Plugin

CSS Grid #21: How to Insert an Empty Row in CSS Grid

How to Insert an Empty Row in CSS Grid

As you already have learned in the previous tutorials of this series, CSS Grid (the Grid specification in your browser) positions grid items into grid cells or areas, based on an auto-placement algorithm, unless you position the items by yourself.

The browser will automatically create new rows and place items according to their source order. But what if you want to have an empty row without content? 

In this tutorial, you will learn how to generate an empty row in a grid and then use this row to overlap two grid items.

Read more: CSS Grid #21: How to Insert an Empty Row in CSS Grid

CSS Grid #20: Build a Teaser Gallery with Cards

CSS Grid #20: Build a Teaser Gallery with Cards

The card gallery is a popular design pattern on the web and you see them often in newspaper, magazine and online commerce sites, because of a number of reasons:

  • Cards can be adjusted to all screen sizes (responsiveness).
  • The information can be read and processed in an easy way.
  • Cards help the user focus on the detail.
  • Cards increase usability.

In this tutorial, you will learn how to use the CSS Grid to create a card based layout. Each card will have a teaser to a particular book. The layout will be by default responsive and without the use of media queries.

Let’s start!

Read more: CSS Grid #20: Build a Teaser Gallery with Cards

How to Create Custom Administrator Menus in Joomla

One new feature in recent version of Joomla 3 is the ability to create new admin menus.

This is a very handy feature for sites with multiple users. Instead of trying to manipulate the permissions for some users, you can simply give them a different set of menu links.

In this example, I'll show you how to make an admin menu that only shows for the Administrator user group. We also have a tutorial on creating custom administrator modules in Joomla.

Read more: How to Create Custom Administrator Menus in Joomla

Multiple Sitemaps Are Better Than One Large Sitemap

5 Important Reasons to Use Multiple XML Sitemaps

OSMap is the most popular way to create a sitemap for Joomla sites. 10,000 of Joomla users rely on OSMap to help Google and Bing understand their site's content.

Over the years of developing OSMap, we've spoken with Joomla users who have larger and larger sites. Some sites have 10,000 URLs, some have 50,000 URLs and we've even talked to users with hundreds of thousands of pages.

For these large sites, we do not recommend using a single sitemap. Neither do Google or Bing.

In this blog post, I'll explain why and how you should use multiple sitemaps for large Joomla sites. 

Read more: Multiple Sitemaps Are Better Than One Large Sitemap

CSS Grid #19: Difference Between Grid Containers and Block Containers

Until now, in this series we have assumed that grid containers behave the same as block containers. But there are some subtle differences between them.

Being aware of those, will help you improve your development workflow. This tutorial will explain the differences between the Grid containers and regular block containers.

Read more: CSS Grid #19: Difference Between Grid Containers and Block Containers