There was an important notice provided by Joomla that affects new Joomla 4.0 installations.  They produced an update that will affect anyone updating from version 4.04.  

Not making these changes will result in a failure for updates beyond version 4.04. 

If you are using only the core files, then the change will not apply to you.  These changes were made in order to modernize the updating of Joomla from version 4.04 and going forward.

The changes will require a change to the .htaccess file.

1. Log into the cPanel and then go to the File Manager.
2. Go to your Joomla’s site files and look for the .htaccess file. You will be looking for the following line:

RewriteRule ^administrator/components/com_joomlaupdate/restore\.php$ - [L]

3. If you’re working with an earlier version of Joomla (from version 2.51 – 4.0.3), then you should be changing it to this code:

RewriteRule ^administrator\/components\/com_joomlaupdate\/restore\.php$ - [L]

4. If you’re working with Joomla 4.04 then you should use the following code:

RewriteRule ^administrator\/components\/com_joomlaupdate\/extract\.php$ - [L]

For additional information please refer to the following:

• Solutions to known issues
• Additional advice/notes for future changes can be found here
• For additional assistance from other Joomla experts, check out the Joomla Forums.

Joomla development requires you to do quite a bit of work up front if you want your site to look both presentable and unique. That said, there are a number of small, helpful tips you can use to make your early site development experience as manageable as possible. Below we cover a few things you can do to make your Joomla development experience an enjoyable one.

• Joomla Development Offline Mode
• Increase Time Before Admin Logout
• Test Extensions with Temporary Sites Emails

Joomla Development Offline Mode

The Joomla 4 offline mode lets you work on your Joomla site while keeping it inaccessible to the general public. This is especially helpful when you are just setting up your site or performing a major overhaul. You can enable the Joomla 4 offline mode from the dashboard in just a few clicks.

1. First, login to your Joomla Home Dashboard.
   
2. From your home dashboard, click on System on the left-hand side.
3. Under Setup, click on Global Configuration.
   
4. Be sure you are on the Site tab — you should be by default — and toggle the Site Offline switch to Yes.
   
5. You can leave a default ‘site maintenance’ message in place, or write a custom one of your own in the Custom Message field.
6. If you want, upload an image for your offline site with Offline Image. This is optional.
7. Click Save at the top of the page.

Your Joomla site is now offline! As you can see below, the Joomla 4 offline mode still leaves a user login screen, so that site administrators can easily login and continue working on the site, but otherwise makes it clear that your site is currently unavailable.

Increase Time Before Admin Logout

For security purposes, Joomla will automatically log you out of your administrator account after a set period of time. While this is great for security, many developers find the default time before your account is logged out to be quite short. Luckily, it’s easy to increase the time before you are automatically logged out of your admin account from the dashboard.

1. After logging in to your Dashboard, click on System.
   
2. From the System Dashboard, select Global Configuration.
   
3. Click on the System tab.
4. Find the entry for Session Lifetime (minutes) and fill in how long you want Joomla to stay logged in before automatically logging you out.
   
5. Click Save in the upper-left corner.

Test Extensions with Temporary Emails

This tip was recommended to me by one of our team members. Many Joomla extension developers will require you to provide an email address before downloading their extension. You may not want to provide an actual, important email for this — both for security purposes, and in case the developer takes this as an opportunity to send you endless newsletters and product updates.

Avoid the hassle and create an email address just to access the extension download itself. This way you can keep administrator emails free of spam and delete the temporary address if the extension leads to any issues.

You can take the strategy one step further and setup temporary site installations when you are testing extensions. While you’re unlikely to find malware in any extensions you download via the official Joomla extensions directory, it’s better to stay safe. Besides, it’s a good idea to test out the extensions before you go installing them on your site, and a temporary installation on something like a subdomain is the perfect way to make sure an extension will work for you.

You need something added to your site as soon as possible and need to be 100% certain that the solution you choose will get the job done. Some Joomla extensions, from e-commerce to forms, offer you multiple choices that can range from free to paid. Here are some tips on choosing the best extension for your site.

• List Extensions and Features
  • Have Time? Just Try the Free
  • Study the Terms and License
• Product Longevity & Community Engagement

List Extensions and Features

Start off by going through the Joomla Extensions Directory and finding as many extensions as you can that do what you need them to do. The best case scenario for your situation is that you find a free, highly reviewed, popular extension that does exactly what you need it to do. It’s great when that happens, but here’s how to approach the decision-making process when things aren’t that easy.

List the extensions you find and keep their pages open in a few browser tabs. From here on out we can focus on the qualities that make them different and figure out what works for you.

Have Time? Just Try the Free

This may seem obvious, but if you’re in the middle of a tough decision it can help to remember the basics. If you are trying to choose between free and paid extensions, and you have the time available to you, go ahead and download the free extension and install it to either a staging site or a test site set up for this purpose. This will also let you rule out any free extensions with unusual use or licensing requirements early on.

Not every free to download extension is actually free to use! Free to download extensions could just be demos for a paid extension, or they may require payment to modify or fully utilize the extension even after you install it.

Study the Terms and License

For paid extensions, figure out exactly what you are purchasing. Will this purchase allow you to use the extension however you wish, or will the license only apply to one specific website? Are updated versions built in? Do you qualify for any premium support for your purchase? These aren’t small considerations. While it’s rare for Joomla extensions to have the same sort of aggressive pricing strategies you can encounter in certain premium WordPress plugins due to the nature of the community, you still need to be careful of the fine print.

Product Longevity & Community Engagement

Over the last decade, Joomla has gone from one of the most popular Content Management Systems available to a niche platform kept alive by a die-hard fanbase. Various developers have come and gone, but those that have stuck around and continue to support their products are likely in it for the long haul.

If cost is not an issue, and the extension you find does everything you need it to do, favor companies that have built and maintained a reputation over the lifespan of Joomla. If they are still engaged with the community, supporting their product and responding to feedback, then they are clearly dedicated to the platform.

Independent developers are already fighting an uphill battle; many will build excellent products for something like Joomla, only to eventually face the reality that they no longer have the time or money to support something so niche. If a developer has stuck around this long, then their products are a much safer bet.

Working with Joomla sites requires that you work with a particular template that determines how your site will appear on the front end.  If you are using an earlier version of Joomla (earlier than 4.0), then you will need to plan on updating your template to be compatible with Joomla 4.0.  One of the main sticking points for the conversion is the adoption and integration of Bootstrap 5.x into the Joomla code. Many of the older templates use old components that are outdated and considered a security risk.

This tutorial will summarize the conversion scenarios, template assessments, and recommendations to support Joomla 4.x templates. This article is based on the Template Considerations During Migration document on the Joomla.org website.

• Template Conversion Scenarios
• Reference Documentation for Migration

For great server solutions to host your new Joomla 4.0 website, check InMotion’s Managed VPS services.

Template Conversion Scenarios

Your templates will generally fall into one of these categories when assessing it for migrating to Joomla 4.x:

• You purchased a template
• You have a custom template designed for you
• You are using a default template that has been customized

You should keep in mind that migrating to a newer version is also an excellent time to improve or change your current website look and feel.  A newer version can mean faster, more secure software available for your use.  If you are still on version 1.5 of Joomla, then it is also important to remember that the templates of that version were not responsive. 

Default Joomla Templates

Here’s a list of the templates based on the version number

Protostar from Joomla 3.x is not compatible with Joomla 4.x.  The template will be replaced with Joomla 4’s Cassiopeia on conversion/migration.  If you do not plan to use the default Joomla 4 template, then you will need to find another template that is compatible with Joomla 4.0.  Since Protostar is based on old Bootstrap (version 2.x) and Jquery 1.x, it is one of the main reasons that this particular template is not compatible to Joomla 4.x.

Custom Templates from a Third Party Developer

You should first check with the developer to see if they already have a version compatible with Joomla 4.x.  Be aware that version 1.5 will most likely require more work in the conversion due to the lack of responsive design. For the most part, you should check with the developer to determine the proper upgrade path of your template regardless of the version.

Reference Documentation for Migrating Templates

This list is directly from the Joomla.org documentation, “Template Considerations During Migration.”

Migrating an older template may often require planning or require the help of a developer. The migration path itself can be long depending on the version you are using. If you decide to undertake the migration path, make sure to first assess the possibility of using converting or re-creating your content using the newer template.

Joomla has a lot going for it as a content management system, but one common complaint is a lack of built in autosave. Don’t worry, though — it’s easy to enable Joomla autosave functionality with a popular extension.

• Install Joomla Autosave
• Set-up Joomla Autosave
  • Some Notes on Configuration Options
• Using Your Editor with Autosave
• Other Ways to Autosave

Install Joomla Autosave

1. Visit the downloads page for the CrOsborne xbAutosave extension and download the latest version.
2. Save the ZIP file to your computer and leave it compressed.
3. In your Joomla 4 Home Dashboard, click on System.
4. Under Install, click on Extensions.
5. Be sure you are in the Upload Package File tab.
6. Follow the onscreen instructions to upload the file by drag and drop, or browse for the file that you downloaded above.
   
7. You should see an installation successful message, along with some details on the plugin.
   

Set-up Joomla Autosave

As soon as you install the extension, you’ll see a link to the extension documentation page, along with a prompt to go enable the extension and adjust options. If you decide to do this later, all you need to do is visit Plugins under Manage on your System page.

1. Find the entry for xbAutoSave. Use the search box to narrow down the entries if needed.
   
2. Click the grayed-out X by the plugin. It should turn to a green checkmark, alongside a message that the plugin has been enabled.
   
3. Click on the xbAutoSave listed on the page to see and adjust the extension’s configuration options.

Some Notes on Configuration Options

With Timed Autosave enabled, set the Autosave Period to an interval that’s right for you. Be sure to save the configuration when you’re done setting things up.

In the configuration menu, you’ll see a warning about versioning. If you’ve enabled versioning on your Joomla site, be sure to follow the plugin’s advice regarding your autosave period and clear out unwanted versions frequently to prevent hitting your site’s version limit on a new article.

Using Your Editor with Autosave

The most important thing to remember when using the Joomla Autosave extension is that autosave will not work on a new article until the article has been saved at least once normally — by clicking the green Save or Save & Close button at the top of the article. This is just to prevent an article from getting saved before the title, alias, and other formatting details have been chosen. Don’t worry about forgetting this, as every new article will have a warning included reminding you to fill in basic configuration details and save before relying on the autosave extension.

Other Ways to Autosave

The autosave extension is not the only way to add autosave functionality to your Joomla page. The popular Joomla Content Editor, or JCE Extension also has a built-in autosave feature. The main difference between JCE’s autosave and the Autosave extension is that the JCE saves content to the browser, while the autosave extension directly writes to the Joomla database. Saving to the database protects your data in a wider variety of situations, but also requires you to follow the configuration steps above to keep the extension functioning correctly.

Occasionally you will need to hide menu items when working with your Joomla 4.0 website. When you have multiple menus on different pages you may need to simply not include items on a particular page. You can also trash menu items or simply unpublish them in order to keep them for later use. Learn how to change a menu item in your existing menu so that it appears only when you want it to appear.

• Trash a Menu Item
• Unpublish a Menu Item
• Hide a Menu item

Looking for a new home for your new Joomla 4.0 website? Check out InMotion’s fast VPS hosting hosting solutions for secure, performance-oriented servers.

Trash a Menu Item

Trashing a menu item does not immediately delete the menu item from your site. Trashing a menu item does automatically unpublish that item, but it also removes it from the menu list. Trashed items will not be available to your website visitors. Follow the steps below to trash a menu item in your Joomla 4.0 site.

1. Log in to the Joomla Administrator Dashboard.
2. Click on Menus in the main menu located at the left side of the dashboard page.
   
   
   
3. Select the Site (page) menu where the menu item you wish to trash is located. This will list the menu items on that site (page).
   
   
   
4. Click on the checkbox next to the menu item that you wish to delete.
   
   
   
5. Select Trash from the Actions drop-down menu at the top of the page.
   
   

Items that are trashed are automatically removed from the menu and the menu is automatically saved. You will also see a green bar confirming that the item has been unpublished.

How to Empty the Trash to Delete Menu Items

In order to delete the menu item permanently, you will need to remove it from the trashed list. Follow the steps below to permanently delete a menu item that has been trashed:

1. Log in to the Joomla Administrator Dashboard.
2. Click on Menus in the main menu located at the left side of the dashboard page.
   
   
   
3. Select the Site (page) menu where the previously trashed menu item is located.
   
   
   
4. Click on Filter Options in the filtering menu above the table listing the menu items.f
   
   
   
5. Click on the Select Status drop-down menu then click on Trashed.
   
   
   
6. You will then see any trashed items in that menu. In the actions tool bar at the top of the page you will see a button labeled Empty Trash. Select the trashed item(s) then click on Empty Trash.
   
   
   

Unpublish a Menu Item

Unpublishing a menu item removes the item from the menu and from its availability to website visitors. However, it does not delete the item from the menu list that you can see in the administrator dashboard. Follow the steps below in order to unpublish a menu item:

1. Log in to the Joomla Administrator Dashboard.
2. Click on Menus in the main menu located at the left side of the dashboard page.
   
   
   
3. Select the Site (page) menu where the menu item you wish to unpublish is located.
   
   
   
4. In the menu list, click on the check box for the item that you want unpublished. Note that a published item has a circled green checkmark that you can click on to instantly unpublish a menu item. If you want to unpublish multiple items, then select the checkbox to select multiple items.
   
   
   
5. If you have select multiple menu items, then go to the actions toolbar at the top of the page, and then click on the drop-down menu.
6. Select Unpublish. When the menu is unpublished you will see a green bar confirming the action.

How to Hide a Menu

When you decide that you want to hide a menu item, you will need to first be aware of the menu item want to hide. Like the other actions that you can take with Joomla 4.0 menu, you will need to have access to the administrator dashboard. Hiding a menu item simply makes it inaccessible without having to unpublish the item. Follow the steps below to hide a menu item:

1. Log in to the Joomla Administrator Dashboard.
2. Click on Menus in the main menu located at the left side of the dashboard page.
   
   
   
3. Select the Site (page) menu where the menu item you wish to hide is located.
   
   
   
4. Click on the menu item that you wish to edit. This will check in the menu item. Note that if the item is checked out (with a padlock symbol), then you will need to check in the item before you can edit it. You can click on the padlock to check in an item.
   
   
   
5. Click on the tab labeled Link Type.
6. Scroll to the bottom of the Link Type tab and you will see two sliders labeled: Display Menu Item Title and Display in Menu. Menu items are displayed by default. So the Display in Menu slider will be set to Yes. Click on the Display in Menu slider so that it says No.
   
   
   
7. At the top of the page, click on either the Save button or the Save and Close button.

When you look at the menu list again, you will see that the menu item will be labeled “hidden.” Website visitors will not be able to see it.

Congratulations! You now know how to trash, unpublish, or hide menu items on your Joomla 4.0 website! To learn more, check out the Joomla 4.0 education channel in our InMotion Hosting Support Center website!

Knowing how to add and remove menu items is one of the most common tasks when working with a Joomla 4.0 website. A website menu is a roadmap to a website. Well-designed menus will get your visitors to the content they want to see quickly and easily. At the same time, you will want to be able to replace to remove content identified through the menus on your Joomla site.

This article will take you through the steps of adding and removing a menu item on a Joomla 4.0 website. We also define all of the menu items involved in creating each menu entry.

• Adding a Menu Item
• New Menu Item Options
• Removing a Menu Item

Searching for a new web host for your upgraded Joomla 4.0 website? Check out InMotion’s Managed VPS solutions for secure and performance-oriented servers that are tailored to your budget needs.

Adding a Menu Item

The steps to add a menu item in Joomla 4.0 are simple. For the purposes of showing how to add a menu item, we will walk you through the steps without discussing each option in depth. The details for the items in adding a new menu item will be detailed in the following section. Follow the instructions below to go through the process of adding a new menu item:

1. Log into the Joomla Administrator Dashboard.
2. In the main menu, click on Menus. If you’re unfamiliar with the menu interface, please see Learning About the Menu Interface in Joomla 4.0.
3. If you have a menu structure already and you know where you want the new menu item to be, then click on the + sign next to the site item where you want to add the menu item. Otherwise, at the top of the page, click on +New to open the new menu item interface.
   
   
   
   
   
4. When the new menu item interface appears, make sure to give the item a title. The items that starred (*) are required. Make the title as concise as possible. The alias used in the URL for the title is derived from the title that you add. Keep your titles as concise as possible to keep the URL for your new menu item from being too long.
   
   
   
   
5. That next item that you need to fill is the Menu Item Type. Click on the blue Select button to choose the item you wish to use for the menu item. If you have content already prepared for this menu item, then you can select it. However, if you’re planning to write the article that applies, youu can select Articles > Create Article.
   
   
   
   
   Once you select the option, click on the Close button in the bottom right corner.
   
   
   
   
   
6. Next, under Menu, select where you want t the menu to appear. In general, you will have menu structure in place. If you don’t then select Main Menu as a default for now.
   
   
   
7. That completes the required sections of creating new item. click on Save or Save and Close in the top left corner. You will see a confirmation when the item has been saved.

The menu item will appear in the menu that you selected. In this example, you can see it added to the Main Menu.

New Menu Item Options

When you add new menu items there are many options for each tab that can be selected. Each option is labeled with a number and the corresponding description is numbered below.

Details Tab

The details tab starts after the Title and Alias

1. Title* – this is the title displayed in the menu
2. Alias – auto-generated from the title; used in the URL for the menu item
3. Menu Item Type* – can be a core menu type provided by installed extension. The options include:
   
   Articles – Archived Articles, Category Blog, Category List, Create Article, Featured Articles, List All Categories in an Article Category Tree, Single Article
   
   Configurations – Display template Options, Site Configuration options
   
   Contacts – Create Contact, Featured Contacts, List All Categories in a Contact Category Tree, List Contacts in a Category, Single Contact
   
   News Feeds -List All Categories in a News Feed Category Tree, List News Feeds in a Category
   
   Privacy – Confirm Request, Create Request, Extend Consent
   
   Smart Search – Search
   
   |System Links – Menu Heading
   
   Tags – Compact List of Tagged Items, List All Tags
   
   Users – Edit User Profile
   
   Wrapper – iFrame Wrapper
   
4. Link – System generated link for the menu
5. Target Window – window where menu will appear selected from drop-down list
6. Template Style – selected template available per the Joomla installation
7. Menu* – required item that shows where the menu link will appear
8. Parent Item – parent menu item
9. Status – Published, Unpublished, or trashed
10. Default Page– the designated home page for the site; there can only be one home page
11. Start Publishing– date to publish menu item
12. Finish Publishing – date to unpublish menu item
13. Access – level of access that can view the men item
14. Note – area provided for a note that an administrator can save for the menu item

Link Type

The Link Type tab provides the properties for the menu link. It includes the following:

• Link Title Attribute – optional custom description for the title attribute of the menu link
• Link Class – optional custom style to apply to the menu link
• Link Image – optional image that is used with the menu link
• Image Class – optional class to apply to the image
• Display Main Title – used as a menu title if the optional image is used
• Display in Menu – option to hide the menu item from displaying in the menu

Page Display

The Page Display is used to store values for the display of the menu page (site). These settings include:

• Browser Page Title – optional text used for the the browser page title. The default value is based on the menu item title
• Show Page Heading – used to show or hide the Browser Page title. Will revert to menu item title if not text was added for the Browser Page title
• Page Heading – optional alternate text for the page heading
• Page Class – optional CSS class that can be used for specific CSS styling applying to the page

Metadata

The Metadata tab provides an area where specific text can be stored to help describe and provide keywords to help with search engines. This tab includes the options for:

• Meta Description – optional paragraph used as the descripton of the page in the HTML output; used by search engines to describe the page
• Meta Keywords – optional comma-separated list of keywords and/or phrases
• Robots – instructions for search engine robots (Use Global/Index, Follow/No ind3x, follow/Index, No follow/No index, no follow – these options are selectable from down menu). Based on the meta tags used in a Robots.txt file.
• Secure – (off/on/ignore) – will appear if you have HTTPS enabled on your server and valid SSL certificate applied to your site. If selected, then it will force the use of the secure link

Module Assignment

Joomla modules can be assigned to work with specific elements of your site. For example, menus can have one or more modules that affect their behavior. A search and breadcrumbs module can be set to show on all pages. There are two main settings at the top of the tab:

• Unassigned Modules – (show/hide) shows or hides modules unassigned to this menu item
• Unpublished Modules – (show/hide) shows or hides modules that unpublished

Removing a Menu Item

There are multiple ways to remove a menu item, but we will be focusing on the quickest and simplest way to remove a menu item. This will prevent the user from being able to access that menu item on the front end.

1. Log in to the Joomla Administrator Dashboard.
2. Click on Menus in the main menu located at the left side of the dashboard page.
   
   
   
3. Select the site (page) from the menu in the left-hand column. You will see a list of the menu items appear.
   
   
   
4. To remove a menu item, simply click on the circled green check mark. This will immediately unpublish the item and it will not appear in the menu.
   

This is just one method of removing a menu item. For a more in-depth look at removing items from your menu check out How to Trash, Unpublish, and Hide Menu Items in Joomla 4.0.

When you think about menus on a website you begin to understand their importance for your viewers. Menus provide the necessary navigation interface for the content of your site. Without menus, your visitors would be unable to get to your content unless they know the specific link to find what they’re looking for.

Joomla 4.0 menus are affected by the theme being used by the Joomla site. This means that the location and appearance of the menus will be determined by the theme that you have selected. However, the content and make-up of the menus can be easily managed through the menu interface in the Joomla 4.0 administrator dashboard.

This article will take you through the general menu interface in order to familiarize you with menu features provided through Joomla 4.0. You will learn how to find the menu options in the administrator dashboard, the difference between

• The Joomla Menu Interface
• Understanding the Difference between Site and Menu
• Menu Actions and Filtering Toolbars

Need a secure and reliable home for your new Joomla 4.0 site? Check out InMotion’s Managed VPS solutions! You’ll find servers tailored for your budget needs.

The Joomla Menu Interface

The menu in a Joomla site can be accessed in two different ways: the front end and the backend. The front end is generally where website visitors can interact with the menu items that you have added to the site. The appearance and position of a menu are determined by the Joomla theme that you have selected for the site. The default theme that comes with Joomla 4.0 is Cassiopeia. You can see the menu at the top of the home page when you access the site in a web browser.

The backend is where you would manage the menu created in your Joomla site. You can access the menu through the Joomla Administrator Dashboard. Here are the steps to access the menu in the dashboard:

1. Log in to the Joomla Administrator
2. In the main menu at left click on Menus.
   
   
   
3. Here you can see the main options for working with menus in Joomla. Click on the square icon next to the Menus item in order to get to the Menu Dashboard page. You can see the icon highlighted in the screenshot below:
   
   
   
   The Menu Dashboard will give you the menu items using a view organized by Menus and Site.

Understanding the Difference between Site and Menus

Like any website, Joomla websites are composed of pages. Individual Joomla pages are referred to as sites. Content created within each site is known as an article. The menu section allows you to add sites to your website. Each site can have its own menu.

In the example above you can see 4 sites: Main Menu (home), Main Menu Blog, Special Menu, and Bottom Menu. If you think of each of these sites as pages in a website, then it becomes easier to understand.

A site (or page) can have featured content and a separate or similar menu. For example, you might create a site called About Us and include several articles that describe your company and/or employees. That site may also have the same menu as what’s on your home page, or no options at all depending on what you want to show. There would normally be a home button to return to the home page.

In our screenshots, the Main Menu (home) with the home icon next to it is the home page for the Joomla site. This menu item is normally used as the return option that brings you back to the home page. So, if a user goes to a different page on your website then wants to go back to the home page, you would provide that menu item so that they can click on it to return.

In this theme, there is also something called Main Menu Blog. This can be confusing, but you can see this menu described when Manage is selected in the Menu dashboard. You will see the following:

Here you can see a description under the Main Menu blog that says “The horizontal dropdown menu”. This menu is what you see on the front end of the website:

In order to manage these menu items, we clicked on Main Menu Blog in the menu list. This will display a table listing of all the menu and submenu items in the horizontal drop-down menu. The list will also include the submenus that are not shown in the screenshot. Note that if you click on the menu item on the right side, then it will only display the properties of the individual menu item. This is where you can give the item a unique name and description.

Clicking on the menu item in the menu column will bring up the menu list as shown in the horizontal menu. When you compare the menu items in the list you can see that they match the horizontal menu as previously shown.

Let’s take a closer look at each column in the table:

• Status – lets you know if the menu item is published or not
• Title – the title of that menu item. Clicking on this item will give you properties for that menu item
• Menu – this is location of the menu item in the menu structure
• Home – identifies the home page
• Access – identifies the access to that menu item
• ID – internallly generated number ID

Menu Actions and Filtering Toolbars

When you look at the menu items, you will see options at the top that include New, Actions, and Rebuild. We describe each of the options in the list below.

• New – allow the creation of a new menu item
• Rebuild – rebuild the menu table in the even that the table becomes corrupt; normally not required

Actions drop-down menu

• Publish – menu item will be available to website visitors
• Unpublish – removes the menu item from public website visitors
• Check-in – checks the select menu item(s) in to help manage menu items being edited
• Home – sets the home page (this can only be one site page)
• Trash – marks menu items as trashed (not permanently deleted)
• Batch –  batch processes a change that would apply to multiple selected menu items

Directly beneath the top three buttons of New, Actions, Rebuild are the filtering options. The filtering options allow you to separate and display only the items that you have opted to show. There are multiple filtering options that you can choose from as per this screenshot:

• Site – this drop-down menu allows you select either Site or Administrator. This identifies where the menu would be used
• Select Menu (Main menu Blog selected in the screenshot above) – you can choose the existing menu to filter
• Search – type in term you wish to use to isolate menu items
• Filter options
  • Select Status – select items that published, unpublished, trashed or all (show all items regardless of status)
  • Select Access – shows items based on user access type (public, guest, registered, special, super users)
  • Select Max Levels – shows items based on hierarchy (1 – no parent items, 2-10 levels – only shows items that fall into that hierarchy order
  • Select Parent Menu – show only items items in a parent menu item
• Order – show results in ascending or descending order
• # (currently showing 20 in screenshot) – number of results to show at one time

This concludes our overview of the menu interface in both the front and backend of your Joomla 4.0 website. To learn more using the menu, please our article on Adding and Removing Menu Items in Joomla 4.0.

One of the more common ways to emphasize text in a Joomla 4.0 site is to use Bootstrap’s alerts. Alerts give you a different text look, background, and in some cases even adds a small graphic.

This article will provide the code and examples of how you can add alerts to your Joomla content.

• How to add Bootstrap 5.0 Code in Joomla 4.0
• Examples of Different Alert Types
• Triggering Alerts
• Alerts with Icons
• Working with Assistive Technologies

Need a home for your newly created Joomla 4.0 website? Check InMotion’s Managed VPS solutions! You’ll find secure servers tailored to meet your budget needs!

How to add Bootstrap 5.0 Code in Joomla 4.0

When you’re working in Joomla, adding the code is very simple. Here’s a quick example of you how you would add the code using the Joomla 4.0 editor:

1. Log into the Joomla Administrator Dashboard.
2. Click on Content in the main menu.
3. Add a new article or edit an existing one. This will put you into the Joomla content editor.
4. Click on Toggle Editor in the bottom right corner of the editor. This will place the editor in text mode. You should only add code in this mode.
   
   
   
5. Type in or paste in the code that you want to use.
   
   
   
6. Once you have the code added, click on Save or Save & Close in the top left corner of the editor to save your changes.
7. When your code is saved you can see that there is an option to preview your article at the top of the page (next to the Save options). Click on Preview. The code is highlighted by a red box.
   
   
   

Examples of Different Alert Types

Using color with your text alerts can help to convey meaning to the viewer. Bootstrap alerts currently convert 8 different colors that can be used to help emphasize messages to your users. These colored alerts are defined by their name and color.

You can apply alert types to text using DIV, H, P, and span tags. The format is the same from tag to tag.

The colors may slightly differ depending on your display device and graphics card. So, to provide a better understanding of each alert type the example code will be followed by a sentence describing the background and font color of each alert.

Primary alert

<div class="alert alert-primary" role="alert">
  This is a primary alert!
</div>

The primary alert has a light blue background with the font being a darker blue.

Secondary Alert

<div class="alert alert-secondary" role="alert">
  This is a secondary alert!
</div>

The secondary alert has a light gray background and the type is displayed in a dark gray.

Success Alert

<div class="alert alert-success" role="alert">
  This is a success alert!
</div>

The success alert has a light green background and the type is dark green.

Danger Alert

<div class="alert alert-danger" role="alert">
 This is a danger alert!
</div>

The danger alert has a lighter red background and a dark red font.

Warning Alert

<div class="alert alert-warning" role="alert">
  This is a warning alert!
</div>

The warning alert has an amber background and dark brown type.

Info Alert

<div class="alert alert-info" role="alert">
  Thi is an info alert!
</div>

The info alert has a light blue background and the type is a dark blue.

Light Alert

<div class="alert alert-light" role="alert">
  This is a light alert!
</div>

Although it’s hard to see, there is a slightly darker background (almost white) and the type appears to be a dark gray.

Dark Alert

<div class="alert alert-dark" role="alert">
  This is a dark alert!
</div>

The dark alert has a darker gray background and the type is almost black.

The 8 alert types have distinctive colors that can be used to convey meaning for the text that you are displaying to your viewers. For example, if you are discussing a critical point, then you may want to display a portion of the text in red to show its importance.

Triggering Alerts

In addition to supplying different colors of text, you can use an alert so that it appears after you have triggered it with a button or link.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

The code above makes use of a button and the collapse option provided with Bootstrap 5.0. You can click either button and then a danger colored alert will appear

Alerts with Icons

Alerts can also make use of Bootstrap icons in order to provide a small flexible graphic that can bring more emphasis and meaning to your text.

Bootstrap Icons use the SVG format, allowing you to embed the image using HTML. Bootstrap Icons also have a width and height of 1em that can be changed by using different font sizes.

Here is an example of code with an alert using a graphic:

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

Using the code, you can add a small icon that will help to provide better emphasis for your text.

Working with Assistive Technologies

When using colors with Bootstrap code like alerts, there can be issues with assistive technologies such as screen readers. The colors used by the code may add meaning to a text phrase, but this can’t be interpreted by the screen reader. To help provide the information for individuals using screen readers, it is common practice to use the span tag with the “visually-hidden” class. Here’s an example:

<div class="alert alert-success"> <p>You have succeeded in advancing!</p>
<span class="visually-hidden">success alert is being used and is colored green</span>
</div>

The text is generated with no issue, but the “visually-hidden” option is used to keep the text hidden.

To help your users who may be visually impaired and requires the use of assistive technologies, make sure to use the “visually-hidden” class to help provide the extra meaning that your colored alerts may hide.

One way to emphasize the articles that you have created as content on your Joomla 4.0 site is to use an extension like Mini Frontpage by TemplatePlazza. This extension lets a viewer scroll through content quickly and gets their attention through its placement and interface.

Follow the instructions in this article to learn how to get this free extension, install it, and use it on your Joomla site!

• How to Obtain the Free Mini Frontpage Extension
• Install the Extension
• Use the Extension on your Joomla 4.0 Site

Looking for a new home for your new Joomla 4.0 website? Look no further than InMotion’s Managed VPS solutions! You’ll find performance-oriented servers configured for your application and budget needs.

How to Get the Mini Frontpage Extension

The free version of the Mini Frontpage extension can easily be downloaded from the Template Plazza website, but you will need to first sign up as a user if you have not already created an account. Once you have a user created, you can log in and then download the extension.

1. Log in as a user.
2. At top of the page, click on the Extensions menu item.
3. Click on the icon that represents the Mini Frontpage extension.
   
   
   
4. You will then be sent to the download page. Click on the Download button.
   
   
   
5. You will get a Zip file when the download completes. The current file name is mod_minifrontpage_unzip-first.zip To save yourself a little time (and follow the filename’s direction), unzip the file. This zip file contains 2 versions of the extension. For the purpose of this article we will be using the 4.0 version. Make sure you know the location of the file so that you can find it when you install it.

When you unzip the file, you will see two files: mod_minifrontpage_J4.zip and modminifrontpage_J3.zip. We will be using the “J4” version of the file in the next section.

Install the Extension

Now that you have the installation file, we will go into Joomla 4.0 to install it. Follow the instructions to complete the installation and then activate the extension so that you can use it with your Joomla 4.0 site.

1. Log into the Joomla Administrator Dashboard.
2. In the main menu to left of the screen, click on System.
   
   
   
3. Next, click on Extensions in the section labeled Install.
   
   
   
4. Once you click on Extensions, you will get a prompt to drag-and-drop the installation file or search for it so that you can upload it. Remember that the installation file is named: mod_minifrontpage.zip.
   
   
   
5. When you select the installation zip file it will automatically begin the installation process. When it’s done you’ll see a screen like this:
   
   
   
   
   Next, you will to click on the link labeled “Open Module Manager to publish the module.”
   
6. Once you’re in the Module Manager, you will see a list of all the modules starting with the ones that you have most recently installed. To activate, click on the circled X next to the module name that you have just loaded.
   
   
   
   Once you have clicked on the X it will change into a green circled checkmark. This will enable it to be active so that you can use it to make your contact standout on your Joomla site.

Use the Extension on your Joomla 4.0 Site

When the extension has been activated, then you are ready to use it on your Joomla 4.0 site. Before you can start to use the extension you will need to first see the position on where it will appear, how many articles will be displayed, etc. Follow the directions below to make changes on the Module page.

Editing the Module Options

The module page contains many options that you can set for the Mini Frontpage extension. The screenshot for the Module tab has been divided into three parts so that you can see each section.

1. Log into the Joomla Administrator Dashboard.
2. Click on Content in the main menu at left.
   
   
   
3. Next, click on Site Modules.
   
   
   
   Here you will see a list of the modules including the Minifrontpage extension that you loaded earlier. Click on the link for Minifrontpage to proceed.
4. Once you have the Site Module opened, you will be able to make some necessary changes. The Module tab is the first section that you will start with. All of the tabs will be described below.

Module Tab

This tab is divided into 3 screenshots because of the numerous options. Note that the top section also includes a link to the PRO version of the plugin.

Note that if you make changes to the settings, then click on Save or Save & Close in the top left corner in order to save your changes.

At the top of the page, you can set the Title for this particular module. Then, in the top right corner, you can elect to show or hide the title.

In the right column, you will then see Position. Click on the drop-down arrow to select a position within your site. The availability of locations will depend on the theme you are using.

Underneath Position is the option for Status. By default, it is set to Published. This means that when the changes are made and saved, then these changes will be displayed on the front end of your Joomla site. There is also the option for Unpublished which removes the current settings, removing them from being displayed, but not deleting them. The option for Trashed also deletes the previous settings reverting everything to the default settings.

The options for Start Publishing and Finish Publishing allow you to schedule when these settings will be applied.

Under the Basic Settings section You will see:

Articles to Display – this is the number of articles displayed and rotated by the module

The next section shows the middle of the Module tab.

Skipped Item – this is the number of items that will be skipped if you want to start on a different item in the list other than the first one.

Show introtext – select to show or not show the introductory text for the displayed article. This may be affected by the theme you are using.

Title Chars Limit – limits the number of characters for the article title.

Category – select the article category that you want to be displayed. Leave blank to select all categories.

Tags – choose the article tag that will be displayed. Leave empty to choose all tags.

Featured Articles – select to show articles that are marked as Feature.

Order – allows you to select different options for how items will be displayed:

The last screenshot shows the bottom options in the Module tab.

Thumbnail Width and Thumbnail Height – this is the size of the graphic being pulled in from the article to be displayed. You can manually set the size that will be used.

Show Default thumbnail – if there is no graphic associated with the article, then this will be the graphic that is displayed. You can choose to hide or show this image. You can also create a custom one and upload it.

Menu Assignment Tab

This tab is very important as it does determine where the module will be displayed. If you don’t select a page or pages for it displayed, then it may appear that the extension is not working. Here you can see all of the options that you can select:

The options for menu assignment for the Mini Frontpage include: On all pages, No pages, Only on the pages selected, and On all pages except those selected.

CSS Adjustment

This section allows you to add CSS code or Snippets that allow you to modify how the module will appear on your site.

Advanced

The advanced tab includes options for specifying module class, caching, module style, bootstrap size, header tag (size), and header class. If you are not familiar with these settings, you may want to speak with an experienced Joomla developer to make sure that the settings you use will help your site.

Permissions

The permissions tab lets you set who has access and who can make changes to this module. Typically, the Super User has all of the rights for full access. The Manager (Administrator) will have almost the same rights but will not be able to edit the front-end settings. Leave this set to default if you want only the original administrator(s) (with superuser rights) the permissions to make any changes. You can find more about access control and user permissions in our article about access control.

This concludes our tutorial on using the Mini Frontpage extension with a Joomla 4.0 site. Here’s an example where I specified the position to be the left sidebar, with 1 column showing all the articles (the arrow allows users to see an excerpt of articles as they click on it).