RSS is much maligned but it is a really simple syndication format for news feeds which has been around for decades. It represents an easy way to add freshly updated content to your Joomla site automatically.
Creating an RSS feed in a Joomla 4 site
To create one, in Joomla 4
- Open the Joomla Administrator and log in
- Select Feeds under Components
- Click or tap the 'New' Button
- Provide a title for the feed
- Enter the link and optionally a description
- Save & Close
That's it. Your feed is created. Now you need to make it available on your Joomla site.
You can make it available in a number of formats, by adding a menu item to your Joomla site.
Making the RSS feed available in a Joomla 4 site
Open the Joomla Administrator and log in. Then Select Feeds under Components
Click or tap to add a new feed.
Give the feed a title, enter or paste the link to it, add a description if you wish and save the form.
Once you have filled out the form save and close it.
Thats it, you created your first external news feed. You can add as many feeds as you wish and they are managed in the feeds list
To publish them you will need to add them to a menu and determine the format in which you wish to publish the feed. To do this choose Menus, New item from the Administrator. Give the menu the title you wish to appear in your site.
Now choose the Menu Item Type. The choices are:
- List all Categories in a News Feed Category Tree. This shows a list of all categories and allows you to nest feed content in your Joomla website.
- List News Feeds in a Category
- Single News Feed
We just have one feed so will choose Single News Feed.
Select the News Feed
Your Feed is now a menu item and fills up with content automatically, while preseving the structure of your site template.
Styling the leading item in the list - the number itself - using CSS
As a final touch, I increased the font-weight and font-size of the leading item in the list. In this case the number. This was achieved using a newish CSS pseudo-element ::marker which allows for styling of the marker box of a list item, typically a bullet or number.
::marker {
color: black;
font-size: 1.4em;
font-weight: bold;
}
See MDN Web Docs - Web technology for developers, CSS: Cascading Style Sheets, ::marker
