PX News is a Joomla 6 news template on the T4 Framework. This guide covers the quickstart, installing on an existing site, styles, fonts and colours, light and dark mode, the front page and its story list layouts, sections, video and gallery stories, journalists, advert slots, the AcyMailing newsletter and upgrades.
Overview
PX News ships with the demo site of a daily news site: a front page with twelve bands, twelve sections with their subsections (World, Politics, Business, Culture, Opinion, Tech, Science, Health, Sport, Travel, Food, City), video and gallery stories, author pages, advert slots, a newsletter and more than 140 stories. Stories are ordinary Joomla articles in categories; the page sections are modules you can edit.
- 2 template styles: the front page and every other page.
- T4 Framework: logo, fonts, colours, mega menu and layouts on one settings screen with a live preview.
- 8 story list layouts for Articles modules.
- Light and dark mode with a header switch and night colours.
- Story formats: standard, video and gallery, set on the article.
- News Ad block of PX Content for advert slots, editable on the page.
- AcyMailing newsletter sign-ups, styled to match.
Quick start in 5 steps
- Install the quickstart on your hosting.
- Put in your logo, fonts and brand colour.
- Rename the sections (categories) to yours and give each its colour.
- Add your journalists as users with a profile, then publish your own stories.
- Set the sender address of your newsletter.
What you can download:
| Package | Use it when |
|---|---|
| Quickstart | You start a new site. It installs Joomla 6, the template, PX Content, AcyMailing and the demo content in one go. |
| Template | You add PX News to a site you already have. |
| PX Content module | Needed with the template package. Already in the quickstart. |
| T4 Framework plugin | Version 2.6.5, needed with the template package. Already in the quickstart. |
Installation
System requirements
- Joomla 6.x
- PHP 8.3 or later
- MySQL 8.0.13+ or MariaDB 10.4+
- Apache 2.4+ or Nginx 1.21+
Install the quickstart
- Download the PX News Quickstart from your account on thepixel.dev.
- Create an empty database and a database user on your hosting.
- Upload the zip to the folder where the site will live, and extract it.
- Open your domain in the browser. The Joomla installer starts.
- Fill in the site name, your admin account and the database details, then click Install Joomla.
- When the installer finishes, click Remove "installation" folder.
The quickstart already contains the T4 Framework, the PX Content module, AcyMailing and all demo stories and images. You do not need to install anything else. To get short URLs without index.php, rename htaccess.txt to .htaccess and turn on Use URL Rewriting in the Global Configuration.
Install on an existing site
Install the packages in this order through System » Install » Extensions » Upload Package File:
- T4 Framework plugin (the template needs it to run).
- PX News template.
- PX Content module.
AcyMailing is optional: install it from acymailing.com if you want the newsletter form. A manual install gives you the template, but not the demo stories and modules: build the front page with the positions and layouts in Front page and module positions.
Template styles and settings
| Style | T4 layout | Used for |
|---|---|---|
| px_news - Home | home | The front page |
| px_news - Default | default | Sections, articles, author pages, tags and every other page |
Choose the style of a page in its menu item (Template Style on the Details tab). Open a style to reach the T4 settings: Site Settings, Navigation, Theme, Layouts and Global Settings, with a live preview.
Logo, fonts and colours
- Site Settings » Logo: your logo (the demo logo is
templates/px_news/images/logo/px-news-logo.svg). - Typography: the demo uses Google Sans for text and Playfair Display for headings.
- Theme: brand and text colours of the light theme, and the Night mode colours used in dark mode.
Light and dark mode
In the style's settings, Light / dark switch shows the button in the header; a reader's choice is kept in their browser. Default theme sets what a first visit opens in: Light, Dark or Follow system (the reader's device setting). Turn the switch off and every reader sees the default theme.
Your own CSS
Use Tools » Edit Custom CSS for small design changes. Your CSS is kept when you update the template.
Front page and module positions
The front page is built from modules. Most are Articles modules with a PX News layout (Advanced » Layout), so they fill themselves from your stories.
| Position | What the demo shows there |
|---|---|
home-tags | Trending topics strip (Popular Tags, layout strip) |
home-1, home-1-rail | Lead story and the politics band; World, Opinion, Trending and an advert in the rail |
home-2, home-3, home-3-rail | World panel; the city desk, business, people and travel; Latest news, Stream and Top daily |
home-4 | Wide advert |
home-5 … home-8 | Editor's Pick, Culture & Lifestyle, The PX View and more opinion, Tech and Science |
home-9 | Newsletter sign-up (AcyMailing) |
home-10, home-10-rail | Business, Sport, Science, Health and World; a tall advert, Trending and Most read |
home-11, home-12 | More sections (a desk per section) and The Latest News |
mega-world, mega-business, mega-culture | The mega menus (layout mega) |
sidebar-r, article-bottom | Most read in the section and topics beside articles; More stories under them |
footer-logo, footnav-1 … footnav-5, footer-social, footer | Footer: tagline, menus, newsletter, legal, social links, copyright |
Story list layouts
Articles modules can use these layouts: lead (large lead story), cards, side (picture beside the text), stack (headlines), numbered (Most read), section (a section band), quote (opinion) and mega (mega menu). Choose the category, number of stories and ordering on the module's Module tab.
Sections, stories and journalists
- Sections are top-level categories with a Category Blog menu item; subsections are child categories and show as filter pills on the section page. In the category's PX News tab, Category colour sets the colour of its dots, kickers, labels, section heads and mega menu; subsections use their parent's colour.
- In an article, the Format field chooses Standard, Video or Gallery. A video story takes a YouTube or Vimeo link (Video URL) or a Video file; a gallery story takes photos with captions and opens them in a lightbox.
- The Video and Gallery menu items list the stories tagged Video and Gallery. Tag your stories the same way to add them.
- Tags such as Climate or Elections show as topics beside articles and in the trending strip.
Journalists and author pages
Bylines come from the article's author. Give each journalist a Joomla user in the Author group and fill in the User info tab of their profile: Avatar, User Position and About Me. They show in the author box under each story, on the writer's author page and on Our journalists. The demo journalists are blocked users that cannot log in; replace them with your own.
Advert slots and editing on the page
The advert slots are PX Content modules with the News Ad block: a small label, one line of text and a button with its link. Style 1 is the box for the rails (Box height: fit content, medium 300 or tall 600); style 2 is the wide banner between bands. To show a real advert, put an image or HTML code in a Custom module in the same position instead.
Edit texts on the page
- Log in on the site.
- Click Edit content at the bottom right of the page.
- Double-click a text to change it. Press Ctrl/⌘+Enter to save.
- Open Settings for the other options of a block.
- Click Done when you are finished.
Frequently asked questions
How do I add a new section?
Create a category (and child categories if you need them), give it a colour, and add a Category Blog menu item for it in the Main Menu. To give it a mega menu, add an Articles module with the mega layout in a new position, then place that position in the menu item's mega menu under Navigation in the T4 settings (the demo uses mega-world, mega-business and mega-culture).
Do I need AcyMailing?
No. Unpublish the newsletter modules and the Newsletter link in the header if you do not send a newsletter.
Does PX News work with Joomla 5?
No. PX News is made for Joomla 6 and needs PHP 8.3 or later.
How is PX News different from PX Magz?
PX News is laid out like a daily news site: a dense front page with many bands, rails with Latest and Most read, advert slots and dark mode. PX Magz is a magazine with an issue, photo stories, podcasts and a slower front page. Both run on Joomla 6 and T4.
My changes do not show on the site. What do I do?
Clear the cache in System » Clear Cache and reload the page.
Where can I get help?
Ask in the ThePixel forum. Tell us your Joomla and PHP versions and the page where you see the problem.
Upgrade
When a new version is out, Joomla shows it under System » Update » Extensions. Download the new Template package from your account on thepixel.dev and install it over the current one through System » Install » Extensions. Your content, modules, template settings and Custom CSS stay. Install a newer T4 Framework plugin or PX Content module only when the release notes ask for it.