Civic Theme

As mentioned in the previous article about setting up the MacBook environment, both the Bootstrap5 theme and Civic Theme are installed on my MacBook. This article takes a closer look at Civic Theme.

Introduction.

This article covers CivicTheme — one of the best Drupal themes for understanding what Drupal is really about. It was developed for use by educational institutions like universities, government agencies, and public-sector organizations, and is actively used by Australian government and educational institutions as well as NASA.

Civic Theme is developed and distributed by Salsa Digital in Australia. The concept centers on public accessibility and social responsibility, with careful consideration for users who may not have strong IT literacy.

In collaboration with Australian government agencies, Salsa Digital has also developed and distributed GovCMS — a theme designed specifically for government use. GovCMS is intended for government and public institutions and is not available to general commercial use. It shares the same development philosophy and design concept as Civic Theme.

That all sounds a bit formal, but the core development focus is on helping large organizations handle large volumes of information, organize it effectively, and deliver it accurately to the right audience — which in practice makes it easy for visitors to find what they're looking for.

It's not really a theme intended for personal blogs like mine, but even for an individual putting together a blog, the information organization is so well thought out that it's remarkably easy to build a site that's clean and readable for both the admin and the visitor.

Using Civic Theme.

Civic Theme was the first theme I used with Drupal, so I have a real attachment to it. It has an excellent interface that makes site building intuitive. Working with the provided templates lets you naturally learn Drupal's features and settings, so building progresses without getting stuck on initial configuration.

Content types, Views, and Block Layout can all be handled using the provided templates without needing to think about Drupal's underlying configuration. My hosting is Xserver Business Standard, where I've installed Drupal and Civic Theme and published the site.

Xserver.

Xserver Business Standard is a shared server with functional limitations, but it runs PHP 8.3.x and MariaDB 10.5.x. It meets the requirements for Drupal Core 10.3.x, which runs without issues, and Civic Theme's latest 1.9.x series also runs without problems.

Node.js.

Civic Theme also recommends running on a subtheme, and building a site with a subtheme requires Node.js 18.1.4 or higher for SCSS compilation. Since Xserver Business Standard only supports up to Node.js 17.x, I continued running on the main theme for a while after launch without using a subtheme.

Build file.

With the site running provisionally without a subtheme, I'd been considering migrating to a VPS that supports Node.js 18.1.4 or later — but since the Civic Theme installed on my MacBook uses the recommended subtheme, I found a workaround: uploading the CSS build files compiled on the MacBook to Xserver. This makes it possible to use the subtheme without Node.js running on the server, so the site now runs on Xserver Business Standard.

The following is the website built with Civic Theme.

1-1. Readable articles and ease of building.

1. One of Civic Theme's standout features is how readable its articles are. The default components — font choices, sizes, letter spacing, heading elements, and accents — are carefully selected and tested, so there's no need to think about CSS customization.
2. Civic Theme is designed so that people without strong IT literacy can build and run a website. The admin interface follows Drupal's standard layout, but templates with initial and basic configuration already applied are provided — optimized so you can build a site without having to think about Drupal's underlying settings.

1-2. Functional features.

1. By making full use of the Paragraphs module, a variety of decorated components are provided. These components can carry Views elements, allowing content types to freely incorporate Views functionality.
2. As a result, you can freely lay out article lists within content without thinking about Views configuration — the same way you create articles and pages with a content type.
3. Modules suited to Civic Theme's concept are pre-packaged from the start, so additional module installation after setup is minimal. This keeps module management straightforward.
4. The Serch API module is used for search. It extends Drupal Core's built-in search with Views functionality, allowing flexible customization of search result design and categorization.
5. The Webform module is used for web forms. It offers more features than Drupal Core's default contact form, including design options and HTML email support.
6. The default content types include Page, Event, and Emergency. The Page content type is used most, and with the decorated components available, almost any page can be created with it. Taxonomy also comes with tags and site selection vocabularies pre-configured, so articles and pages can be categorized without needing to think about initial vocabulary setup.
7. A responsive navigation menu is provided, so a navigation menu can be built simply by setting names and links. A footer menu is provided in the same way.
8. The default Block Layout includes 4 header rows, 1 full-width banner row, 1 highlight row, 2 sidebar rows on each side, and 3 footer rows. You can use everything or pick only the blocks you need, making it a layout that scales from small sites to large ones.
9. Design consistency is thorough — from article fonts and headings to every component and menu, everything is designed within Civic Theme's concept, so the finished site has a unified look.
10. There's a high degree of freedom with site color — section colors can be freely set from the theme settings. The base concept divides into Light (white and light gray backgrounds) and Dark (based on dark blue — the color of the Australian flag), and templates built around these two schemes are provided.

1-3. A theme suited to beginners.

Civic Theme was the theme I chose when first using Drupal. Since it lets you build a site without thinking about Drupal's features and settings, you naturally end up using those features as the build progresses. Once you're more comfortable with Drupal, you can start checking and adjusting settings as needed, and that hands-on contact is how you come to understand Drupal's configuration.

The main reason I was able to build a Drupal site without giving up is Civic Theme's concept of making site building and operation accessible to anyone. Installing the theme and using the templates lets you see what the finished site will look like — without needing to think about initial Drupal configuration. Being able to picture the finished product is what lets you naturally pick up Drupal's basics as you build.

Using Civic Theme and actually working with Drupal builds up a concrete vision for the site. Starting from a default out-of-the-box build, a picture of how to actually publish it starts to take shape — and pursuing that vision means learning Views configuration, content type concepts, and taxonomy usage and application as you go.

For all these reasons, it's a theme I'd recommend to anyone approaching Drupal for the first time — though it does have some issues around installation and updates that could trip up a beginner.

1-4. Issues with Civic Theme.

1. A patch needs to be applied to resolve a Layout Builder issue
2. Some modules used by Civic Theme rely on dev (development) rather than Stable releases, requiring changes to Drupal's composer.json
3. With many highly customized modules in use, dependency errors can occur during module or theme updates

Civic Theme's consistent public-minded design and ease of building and operation make it well suited for Drupal beginners — but the issues around installation and updates do require basic terminal operation and an understanding of PHP and database fundamentals. You don't need to write code from scratch, but file operations and PHP command usage are necessary.

1-5. Cases where terminal operations and PHP knowledge are needed.

1. Switching PHP versions on Xserver can be done from the Xserver admin console, but paths and symbolic links are not configured automatically, so you need to check the PHP version and configure paths and symbolic links manually.
2. For example, when installing Civic Theme on Xserver, an Mbstring error appeared — resolving it required changing the php.ini entry from mbstring.encoding_translation = Off to mbstring.encoding_translation = 0.
3. Composer is not installed on Xserver by default. Installing Composer requires using PHP commands.
4. Patching in Drupal uses the composer-patch plugin, but without understanding how to install Composer plugins and apply patches, the Layout Builder fix patch for Civic Theme won't apply and the theme installation cannot be completed.
5. Without understanding composer.json and how to edit it, the required modules distributed as dev versions cannot be installed and Civic Theme installation will fail.

Getting Civic Theme running requires terminal operations tailored to the environment, PHP command usage, and Composer operations not covered in Drupal's standard tutorials — all at the installation stage.

The key issue with Civic Theme is that approaching Drupal and Civic Theme as a GUI-based CMS you can follow from tutorials isn't enough — you need to understand and be prepared to learn that it's a system built on PHP and a database, or even installation will be a struggle.

Once installation is complete, building the site goes more smoothly than with other themes — but because a dev version of Layout Builder is used and it can have compatibility issues with the Paragraphs module, updates sometimes cause problems that need to be resolved independently.

I tend to jump on updates as soon as they arrive — and it's true that I've been burned by errors a few times. That said, the errors have generally been minor display issues with layout or rendering rather than anything catastrophic, and removing and reinstalling modules or rebuilding Composer usually resolves them.

Civic Theme is an excellent theme — building a site from the templates in the admin interface is approachable even for beginners, who can produce a high-quality website.

On the other hand, the ease of building comes from effectively combining multiple modules, which means module dependency errors are prone to appearing. Handling installation and update errors requires basic terminal skills, PHP knowledge, Composer usage not covered in Drupal tutorials, and the ability to find and understand information published on Drupal.org.

It's an excellent theme for those who come to Drupal with a purpose beyond just trying it out, and who have the mindset to learn through dealing with errors. It's also a great option for engineers comfortable with PHP and databases who find design challenging.

It was originally developed for public and educational institutions — with the assumption that installation and updates would be handled by specialists while the organization handles site operation. It's not really a theme for individuals like me, but its excellent design and strength in organizing and communicating information make it a theme that embodies Drupal's characteristics and use cases, and it's also outstanding as a learning resource.

It was the first theme I used and the one that deepened my understanding of Drupal, so I have a strong attachment to it and a lot of sympathy for Civic Theme's concept. This site runs on Bootstrap5, but there's a lot to learn from Civic Theme — the use of Paragraphs, Serch API, and more — so it's a theme I'll keep working with.

Conclude.

In the previous article I reviewed and updated the MacBook local environment. As part of that, I updated Civic Theme on the MacBook and dealt with a few errors that came up.

Revisiting the file structure during that process revealed a solution to the subtheme issue I'd given up on due to Xserver's Node.js limitation: uploading the SCSS build files from the subtheme installed locally on the MacBook.

I'd planned to use a subtheme from the start and had been running the site provisionally without updating its articles, but with subtheme operation now possible I've resumed running the site — which is what prompted this article.