PX Unity is a Joomla 5.4 and Joomla 6 template for city halls, councils and nonprofits, on the T4 Framework, with optional CiviCRM. This guide covers the quickstart with CiviCRM, installing on an existing site, template styles, logo, colours and dark mode, module positions, the PX Content blocks, the CiviCRM blocks and pages, and upgrades.
Overview
PX Unity ships with the demo site of Unity City, a fictional city, and the Unity Community Foundation: two home pages, about, careers, FAQ, services, departments, documents, open data, news, events, contact, and the CiviCRM pages for donations, membership, events and a petition. Every section is a module you can edit, so you replace texts and photos instead of building pages from nothing.
- Two home pages: a city hall (Home) and a community foundation (Community), with their own menus, top bar and footer.
- T4 Framework: logo, fonts, colours, megamenu and layouts on one settings screen with a live preview.
- 18 PX Content blocks in 26 styles made for this template, plus the general blocks of the PX Content module.
- CiviCRM (optional): styled contribution, membership, event and petition pages, and home page blocks that read live numbers from CiviCRM.
- Light and dark mode with a header toggle for visitors.
- Edit on the page: change texts and pictures right on the site, without opening the module.
Quick start in 5 steps
- Install the quickstart on your hosting.
- Choose your home page: the city hall or the community version.
- Put in your logo, site name and brand colours.
- Replace the texts and photos of each section in PX Content, or on the page itself.
- Set up your own campaigns, events and membership types in CiviCRM and put their IDs in the CiviCRM blocks.
What you can download:
| Package | Use it when |
|---|---|
| Quickstart – Joomla 5.4 | You start a new site. It installs Joomla 5.4, CiviCRM, the template, all extensions and the demo content in one go. |
| Quickstart – Joomla 6 | The same site on Joomla 6.2. Choose it if your hosting runs PHP 8.3 or later. |
| Template | You add PX Unity to a site you already have. |
| PX Content module | Needed with the template package. Already in the quickstart. |
| T4 Framework plugin | Needed with the template package. Already in the quickstart. |
Installation
System requirements
- Joomla 5.4 or Joomla 6
- PHP 8.1.2 or later for Joomla 5.4, PHP 8.3 or later for Joomla 6
- MySQL 8.0.13+ or MariaDB 10.4+
- Apache 2.4+ or Nginx 1.21+
- About 350 MB of disk space for the quickstart (CiviCRM is most of it)
Install the quickstart
The quickstart is the fastest way to a site that looks exactly like the demo.
- Download a PX Unity Quickstart from your account on thepixel.dev: Joomla 5.4 or Joomla 6. Both have the same template, CiviCRM version and demo content.
- 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.
- Log in to the administrator once. On this first visit the site finishes the CiviCRM set-up by itself (menus, caches and database triggers), then turns that step off.
CiviCRM reads its database, paths, site address and keys from Joomla's configuration.php, so there is nothing to edit after the install, and the site keeps working when you move it to another folder or domain. The keys are made from the Joomla secret, which is unique to your site.
The demo contacts use example.org addresses and the demo mailings are not queued, so nothing is sent from your new site. To send CiviCRM mailings and reminders, set up the CiviCRM scheduled jobs (a cron job) as described in the CiviCRM documentation.
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 Unity template.
- PX Content module.
CiviCRM is optional. Without it, the CiviCRM blocks show the texts you type in their settings. To add it, install CiviCRM for Joomla from civicrm.org. A manual install gives you the template and its styles, but not the demo pages and modules: build your pages with the steps in Set up your pages.
Template styles
Go to System » Site Template Styles. PX Unity has five styles. px_unity - Default is the default: every page without its own style uses it.
| Style | T4 layout | Used for |
|---|---|---|
| px_unity - Default | default | News, events, departments, documents, contact: page header, content and sidebar. |
| px_unity - Landing | home | The city hall home page and the pages built from full-width sections: about, careers, FAQ, services, open data. |
| px_unity - Landing (Community) | home | The community home page. |
| px_unity - Default (Community) | default | The community pages: stories, contact and every CiviCRM page. |
| px_unity - Demo | demo | The demo chooser page. You can delete it with its menu item. |
The Community styles use the community navigation profile: its own menu, top bar and header button (“Donate” instead of “Pay a bill”).
Assign a style to a page
Open the menu item in Menus and choose the style in Template Style on the Details tab.
Template settings (T4)
Click a style name in Site Template Styles to open the T4 settings screen: Site Settings, Navigation, Theme Color, Layouts and Global Settings on the left, a live preview on the right.
Site Settings, Navigation, Theme Color and Layouts are saved as named profiles (default, home, community…). Several styles share a profile, so a new logo or colour in one style shows on every style that uses the same profile.
Logo, fonts and dark mode
- Logo Settings: site name, slogan, logo image and a smaller logo for phones. The demo logo is
templates/px_unity/images/logo/px-unity-logo.svg. - Typography: body and heading fonts. The demo uses Plus Jakarta Sans for both.
- Color mode: Light (the default) or Dark opens the site in that mode with the toggle in the header; System follows each visitor's device; Off keeps the site light and hides the toggle. A visitor's own choice is remembered in their browser.
Colours
- Brand colours: Primary is the amber of the buttons and highlights (
#F2A73D), Dark the slate of the header and dark bands (#242F35), Light the pale teal of the light sections (#E2EEEE). Change them to your colours; buttons, links and section backgrounds follow. - Palettes: colour sets that sections and modules use for their background and text.
Layouts
Layouts Settings shows the rows of each layout, top to bottom, with their module positions. Drag rows to reorder them, or open a row's settings to change its width and background.
Your own CSS
Use Tools » Edit Custom CSS for small design changes. Your CSS is kept when you update the template.
Module positions
| Position | Where |
|---|---|
topbar-l, topbar-r | Top bar: address, email and opening hours; helpline and social links |
header-r | Header button (“Pay a bill”, “Donate”) and search |
off-canvas | Menu in the mobile panel |
slideshow | Home hero, or the page header of a Landing page |
section-1 … section-12 | Full-width sections of the Landing layout |
sidebar-blog, sidebar-right | Sidebars of news, events and account pages |
footer-cta | Question or volunteer band above the footer |
footer-logo | Footer logo, tagline and newsletter sign-up |
footnav-1 … footnav-4 | Footer columns: menu, links, social and legal, addresses |
footer | Copyright line |
Go to Content » Site Modules to see every module with its position. Type part of a title in the search box (Home 1, Home 2, About, Services…) to see the modules of one page.
PX Content blocks
Most sections are a PX Content module. Each module shows one block, such as a hero, a row of numbers or an events list, with its own texts, pictures, colours and buttons. Open the module, click Change block to pick another block or style, and fill in the tabs below it. Advanced JSON at the bottom holds all settings as text, to copy a block to another module or site.
The blocks of PX Unity
| Block | Styles | Used in the demo for |
|---|---|---|
| Hero | 1 Slider with stat cards 2 Photo with donation form | City hall home; community home |
| Page head | 1 | Page header of the Landing pages |
| Features | 1 Icon grid 2 Numbered cards | “Everyday city services”; “Four ways to make a difference” |
| Content | 1, 2, 3 | “Open, accountable”, “Skip the queue”, documents with quote |
| Showcase | 1 Department cards 2 Photo tiles slider | Departments; programmes |
| Campaign | 1 | Featured campaign with progress (CiviCRM) |
| Events | 1 | Upcoming events with places left (CiviCRM) |
| Pricing | 1 | Membership plans (CiviCRM) |
| Petition | 1 | Petition with signature count (CiviCRM) |
| Stats | 1 | City and impact numbers |
| Testimonials | 1 | Resident and volunteer stories |
| Clients | 1 | Partners and supporters |
| Call to action | 1 Band 2 Photo band | Question and volunteer bands |
| Header CTA | 1 | The header button |
| Top bar | 1 | Address, hours and helpline |
| Newsletter | 1 | Footer sign-up |
| Footer | 1, 2, 3 | Footer menu, addresses, social links |
| Demo bar | 1 | The demo switcher (you can unpublish it) |
Edit texts on the page
You can change most texts and pictures right on the site. It works for users who may edit modules.
- Log in on the site.
- Click Edit content at the bottom right of the page.
- Double-click a text to change it. Use the small toolbar for bold, italic and underline. Press Ctrl/⌘+Enter to save.
- Pick a new picture from the Media Manager, or open Settings for the other options of a block.
- Click Done when you are finished.
CiviCRM
PX Unity styles the CiviCRM pages that visitors see: contribution pages (donate, membership), event lists, event information and registration, petitions and profiles. They get the same page header as the rest of the site, a summary card next to the form and buttons in your colours. The demo links them from the Community menu.
Blocks that read CiviCRM
Put the ID of your CiviCRM item in the block settings. You find the IDs in CiviCRM (for example Contributions » Manage Contribution Pages: the id= in the page link).
| Block | Setting | Shows |
|---|---|---|
| Hero, style 2 | CiviCRM contribution page ID | The donation amounts of that page; the form opens it |
| Campaign | CiviCRM campaign ID, contribution page ID (optional) | Amount raised, goal, donors and days left |
| Events | How many upcoming events, or specific event IDs | Date, place, places left; a waitlist button when an event is full |
| Pricing | Membership type IDs (one per card), signup contribution page ID | Plan names and prices |
| Petition | CiviCRM petition (survey) ID | Signatures and goal; the form signs the petition |
When CiviCRM is not installed, or an ID is empty or not found, these blocks show the texts typed in their other fields. CiviCRM numbers are cached for a short time, so a new donation can take a few minutes to show.
Set up your pages
Choose your home page
The quickstart opens on the demo chooser. In Menus » Main Menu, set Home (city hall) as Default Page, or set the Home item of the Community menu if you use the community version. Then unpublish the Demos menu item and the Demo bar module.
Inner pages
- Create the article (for example About) and a menu item for it.
- For a page built from sections, choose px_unity - Landing and add PX Content modules in
slideshowandsection-1…section-12, assigned to that menu item. - For a normal page with a sidebar, keep px_unity - Default. The page header takes its intro from the menu item's Meta Description.
News, events and documents
- News and events: a Category Blog menu item. On the home pages they are Articles - Category modules with the
unity-newsorunity-eventlayout (Advanced tab). - Documents: a Category Blog menu item with the Documents layout. Each article is a row with date and intro; put the file in the article's Link A to show a download button.
Frequently asked questions
Do I need CiviCRM?
No. The template and every block work without it. You need CiviCRM only for online donations, memberships, event registration and petitions.
Joomla 5.4 or Joomla 6?
Both work. The template package is the same for both; the two quickstarts differ only in the Joomla version (5.4.10 or 6.2.0), with the same CiviCRM 6.19.2. Joomla 6 needs PHP 8.3 or later. For an existing site, use the Joomla version it already runs.
I moved the site to another domain. Do I need to change CiviCRM?
No. CiviCRM takes the site address from Joomla. Clear the caches in System » Clear Cache and in CiviCRM (Administer » System Settings » Cleanup Caches).
How do I change the city name in the demo texts?
The names (“Unity City”, “Unity Community Foundation”) live in the modules and articles: change them there, or on the page with Edit content. The logo and site name are in Site Settings.
My changes do not show on the site. What do I do?
Clear the cache in System » Clear Cache and reload the page. With CSS & JS Optimization on, also reload with Ctrl/⌘+Shift+R after you change Custom CSS.
Where can I get help?
Ask in the ThePixel forum. Tell us your Joomla, PHP and CiviCRM versions and the page where you see the problem.
Upgrade
Take a full backup
Back up your files and database before any upgrade, so you can go back if something goes wrong.
- Joomla shows when a new PX Unity version is out. Download the latest Template, T4 Framework plugin and PX Content module from your account on thepixel.dev.
- Install them through System » Install » Extensions, the same way as a new install. Joomla updates them in place.
- Your template settings, modules and custom CSS are kept.
Update CiviCRM with the CiviCRM package for Joomla from civicrm.org. Do not edit the template files directly: an upgrade overwrites them. Put your changes in Custom CSS instead.