PX Mosaic is a Joomla 6 template for a personal blog, on the T4 Framework. This guide covers the quickstart, installing on an existing site, fonts and colours, module positions, the PX Content blocks, posts, topics and cover images, the AcyMailing newsletter, and upgrades.

Overview

PX Mosaic ships with the demo site of The Pixel, a personal blog: a home page with a fixed cover, a journal with six topics, video and gallery pages, essays, about, now and contact pages. Posts are ordinary Joomla articles; the home sections are modules you can edit, so you replace the texts and photos instead of building pages from nothing.

  • Fixed cover beside the content, with its own photo on every page and article.
  • T4 Framework: logo, fonts, colours, menus and layouts on one settings screen with a live preview.
  • 5 PX Content blocks made for this template (cover, content bands, photo row, newsletter, social links), plus the general blocks of the PX Content module.
  • Journal, video and gallery from one blog category, filtered by tags; an essay list layout.
  • AcyMailing newsletter sign-up, styled to match.
  • Edit on the page: change texts and pictures right on the site, without opening the module.

Quick start in 5 steps

  1. Install the quickstart on your hosting.
  2. Put in your site name and your own photo and intro in the cover.
  3. Rename the topics (categories) to what you write about.
  4. Replace the demo posts with your own articles, each with an image for its cover.
  5. Set the sender address of your newsletter.

What you can download:

PackageUse it when
QuickstartYou start a new site. It installs Joomla 6, the template, PX Content, AcyMailing and the demo content in one go.
TemplateYou add PX Mosaic to a site you already have.
PX Content moduleNeeded with the template package. Already in the quickstart.
T4 Framework pluginNeeded 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

  1. Download the PX Mosaic Quickstart from your account on thepixel.dev.
  2. Create an empty database and a database user on your hosting.
  3. Upload the zip to the folder where the site will live, and extract it.
  4. Open your domain in the browser. The Joomla installer starts.
  5. Fill in the site name, your admin account and the database details, then click Install Joomla.
  6. When the installer finishes, click Remove "installation" folder.

The quickstart already contains the T4 Framework, the PX Content module, AcyMailing and all demo posts and images. You do not need to install anything else.

Install on an existing site

Install the packages in this order through System » Install » Extensions » Upload Package File:

  1. T4 Framework plugin (the template needs it to run).
  2. PX Mosaic template.
  3. 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 posts and modules: build your pages with the steps in Set up your pages.

Template settings (T4)

Go to System » Site Template Styles and open PX Mosaic - Default, the style every page uses. The T4 settings screen shows Site Settings, Navigation, Theme Color, Layouts and Global Settings on the left and a live preview on the right.

Site name and fonts

  • Logo Settings: site name and slogan. The large name on the home cover (“The Pixel”) is part of the Cover block.
  • Typography: the demo uses Gloock for headings and DM Sans for text.

Colours

  • Primary is the ink of buttons and the newsletter band (#3A3C51), Warning the amber of labels and lines (#E8B44C). Change them to your colours.

Layouts

Layouts Settings shows the rows of the page, 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

PositionWhere
coverThe fixed cover column of the home page
topbar, topbar-rTop menu and the Subscribe button
off-canvasMenu in the side panel (“Menu” on the cover)
section-1 … section-9Home sections: intro, topics, start here, journal, now, newsletter, photo row, keep reading
breadcrumbs, sidebar-rightBreadcrumbs; sidebar of account pages
footer-logo, footnav-1 … footnav-5Footer: thanks text, page links, topics, social links
footerCopyright line

Go to Content » Site Modules to see every module with its position.

PX Content blocks

The cover and several home sections are PX Content modules. Open one, 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.

BlockStylesUsed in the demo for
Cover1The home cover: name, labels, intro, About tab and the latest post from three topics. Its background is the cover photo.
Content1 Intro with portrait
2 Columns		“A small corner of the internet”; the Now columns
Gallery1The row of six square photos (Instagram)
Newsletter1Image band with a sign-up form
Social1Social links in the footer

Edit texts on the page

  1. Log in on the site.
  2. Click Edit content at the bottom right of the page.
  3. Double-click a text to change it. Use the small toolbar for bold, italic and underline. Press Ctrl/⌘+Enter to save.
  4. Pick a new picture from the Media Manager, or open Settings for the other options of a block.
  5. Click Done when you are finished.

Posts, topics and covers

Topics

Each topic is a Joomla category (Essays, Slow Travel, Kitchen, Books, Photographs, Notes to Self) with a Category Blog menu item. Journal is the blog of all topics. Rename the categories and menu items to your own topics.

The Video and Gallery menu items show the journal filtered by the tags Video and Gallery. Add the tag to a post and it shows there, with a small badge on its card.

Essays

The home page and the Essays list can use the Essay layout: choose it in the menu item's Blog Layout (px_mosaic:essay).

Cover images

  • An article's cover is its Full Article Image (or Intro Image when there is none).
  • A page opened from a menu item (About, Now, Journal…) can have its own cover: set the image as the menu item's Open Graph image in its T4 tab. The same image is used for link previews.
  • The home cover is the background of the Cover block.

Photo posts

Put the photos in the article as normal images. Visitors click a photo to see it larger and use the arrows to move through the set.

Newsletter (AcyMailing)

The sign-up form on the home page is an AcyMailing subscription module, styled by the template. Before you send anything:

  1. Open Components » AcyMailing » Configuration and set your From and Reply to addresses (the quickstart uses This email address is being protected from spambots. You need JavaScript enabled to view it.).
  2. Check the mail sending method on the same screen, then send yourself a test.
  3. Readers who sign up land in the list chosen in the module settings.

Set up your pages

  1. About and Now are single articles with a menu item each. Edit the text and set a cover image (see Cover images).
  2. Contact is a Joomla contact. Change the address and email in Components » Contacts.
  3. The home sections are modules in section-1 … section-9, assigned to the Home menu item.
  4. The demo also styles Joomla's own pages: login, registration, profile, contacts, tags, archive, search and authors (the Joomla menu). Keep the ones you need.

Frequently asked questions

How do I change the name and photo on the cover?

Log in, click Edit content and double-click the name or intro on the cover, or open the Home cover module in Content » Site Modules. The photo is the block's background.

Do I need AcyMailing?

No. Unpublish the newsletter module and the Subscribe button if you do not send a newsletter.

Does PX Mosaic work with Joomla 5?

No. PX Mosaic is made for Joomla 6 and needs PHP 8.3 or later.

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

Take a full backup

Back up your files and database before any upgrade, so you can go back if something goes wrong.

  1. Joomla shows when a new PX Mosaic version is out. Download the latest Template, T4 Framework plugin and PX Content module from your account on thepixel.dev.
  2. Install them through System » Install » Extensions. Joomla updates them in place; your settings, modules and custom CSS are kept.

Do not edit the template files directly: an upgrade overwrites them. Put your changes in Custom CSS instead.