#C26 Civic Theme

As I mentioned in the previous article about setting up my MacBook, I have the Bootstrap 5 theme and the Civic Theme theme installed on my MacBook. In this article, I will be summarising the Civic Theme.

This time, we will be looking at an article about CivicTheme, a theme that is very good at helping you understand the features and image of Drupal. The theme was developed with the aim of being used by educational institutions such as universities, government agencies, and companies with a high level of public interest, and is actually used by Australian government agencies, educational institutions, and NASA websites.
Civic Theme was developed and distributed by Salsa Digital in Australia. The concept is that it is a theme that emphasises public and social aspects, and it is designed so that even people without IT literacy can manage websites.
Salsa Digital has also developed and distributed a theme called GovCMS, which is designed for use by government agencies, in collaboration with Australian government agencies. GovCMS is designed for use by government and public institutions, so it cannot be used by ordinary companies. The development concept and design concept of GovCMS are the same as Civic Theme.

This is a bit of a serious topic, but large organisations handle large amounts of information, organise it accurately, and focus on developing the ability to accurately convey information to their target audience.

This makes it easier for visitors to find the information they want from the content placed on the site. This is not a theme that is normally used for individual blogs like mine, but it is a theme that makes it easy for individuals to create and publish blogs, and it is also easy to build a website that is very easy to read for both the administrator and the visitor, making it easy to organise information.

Civic Theme is a theme that I chose when I first started using Drupal, so I have a lot of affection for it. Civic Theme has an excellent interface that makes it easy to understand how to build a site. By touching the prepared templates, you can learn about each function and setting of Drupal in a natural way, so you can build your site without getting frustrated by not understanding the initial settings.

You can also use the content types, views and block layouts provided in the templates without having to worry about Drupal's function settings, which will help you to build your site. We have installed Drupal on Xserver Business Standard, which is the infrastructure we have contracted for, and have installed Civic Theme and published it.

Xserver Business Standard is a shared server, so there are some functional limitations, but it is running PHP 8.3.x and Maria DB 10.5x. It meets the operating requirements for Drupal Core 10.3x, so Drupal Core 10.3x is running without any problems, and the latest version of Civic Theme, 1.9x, is also running without any problems.

Civic Theme also recommends using sub-themes, and when building a site with sub-themes, you will need Node.js 18.1.4 or later to compile SCSS. As Xserver Business Standard only supported Node.js up to version 17x, we did not use sub-themes for a while after the site went live, and continued to use the main theme.

As we were considering moving to a VPS service that would run Node.js 18.1.4 or later, as we were in a temporary operation situation without using sub-themes, but the Civic Theme installed on the MacBook uses the recommended sub-theme, so it is possible to use sub-themes even if Node.js does not run by uploading the CSS file built on the MacBook to Xserver, and we are currently operating on Xserver Business Standard.

The following is a website built with Civic Theme.

1. One of the features of Civic Theme is that the articles are very easy to read. The parts that are provided by default, such as font selection and size, character spacing, heading elements and accents, have been carefully selected and verified, so there is no need to think about things like CSS customisation.
2. One of the features of the Civic Theme is that it is designed so that even people without IT literacy can build and manage websites. The administration screen is based on the basic Drupal structure, but it is optimised so that you can build a site without having to worry about Drupal settings, as it comes with a template that has already been set up with Drupal's initial and basic settings.

1. By making effective use of the paragraph module, there are multiple decorated components available. These prepared components have view elements, so you can freely add view elements to content types.
2. This means that you can freely lay out listed articles in content in the same way as creating articles and pages in content types, without having to think about view settings.
3. The modules that fit the Civic Theme concept are packaged together from the start, so you can install the theme and then add modules with a minimum of fuss. This makes it easy to manage modules.
4. The Search API module is used for the search function. This is a module that extends the search function provided by default in Drupal Core, and you can use the Views function, so you can design the search function and categorise it in a flexible way.
5. The Webform module is used for web forms. It has more functions than the contact form provided by default in Drupal Core, and you can use various functions such as design and HTML email.
6. The default content types are Page, Event and Emergency. Although we mainly use the Page content type, by using decorated components, it is possible to create almost any page using the Page content type. Since the taxonomy settings also have a vocabulary for tags and site selection, it is possible to sort articles and pages without having to worry about the initial taxonomy vocabulary settings.
7. A navigation menu that is responsive is provided, so you can create a navigation menu simply by setting the name and link. A footer menu is also provided.
8. The default block layout consists of four header rows, one full-width banner element and one highlight element each, two sidebar rows on the left and right, and three footer rows. You can use the full layout or select the blocks you need, so it is a layout that can be used for everything from small to large sites.
9. The design is consistent throughout, from the fonts and headings in the articles to the components and menus, and the Civic Theme concept has been used to design the site, so the finished website will have a consistent design.
10. The site colour scheme is highly flexible, and you can set the site colour for each section freely in the theme settings screen. The basic concept is to divide the background colour and text combinations into light and dark, and templates are provided with a white, light grey-based light colour scheme and a dark colour scheme based on dark blue (the colour of the Australian flag).

The Civic Theme is the theme I chose when I first started using Drupal. The Civic Theme allows you to build a site without having to worry about Drupal's functions or settings, so as you build your site you will naturally be using Drupal's functions. Once you have become familiar with Drupal, you can check the settings as necessary, and by touching the settings you will be able to understand Drupal's settings.

The fact that I was able to build a website without any problems using Drupal was largely due to the concept of Civic Theme, which aims to enable anyone to build and operate a website. By installing the theme and using the template, you can see the completed version of the site without having to worry about Drupal's initial settings. By being able to visualise the completed version, you can learn the basic usage of Drupal naturally while actually building the site.

By using the Civic Theme and actually using Drupal, you will be able to create a concrete image of your site. As you progress from building a site with the default settings to actually publishing it, you will be able to expand your image of the site, and as you do so you will understand things like view settings, the meaning of content types, and how to use and apply taxonomy.

For this reason, we recommend this theme for those who are new to Drupal, but there are some problems with installation and updates, so beginners may find themselves frustrated by the installation and updating process.

The need to apply a patch to resolve layout builder issues

1. The need to change some of the descriptions in Drupal's Composer.json file, as some of the modules used in Civic Theme use the features of dev (development version) modules rather than stable (stable version) modules
2. The fact that many of the high-functionality modules have been customised, so there is a possibility of errors being generated due to dependencies when updating modules or updating the theme
3. Civic Theme is suitable for beginners to use Drupal because it is developed with public awareness, and it is easy to design, build and operate a consistent site. However, you will need to understand the basics of terminal operations, PHP and DB in order to solve problems related to installation and updates. 

You do not need to know how to write programs from scratch, but you will need to know how to operate files and php commands.

1. You can switch the PHP version on Xserver using the Xserver administration console, but since paths and symbolic links are not set, you will need to check the PHP version and set the paths and symbolic links.
2. For example, when installing Civic Theme on Xserver, I got an error about Mbstring, and to fix this error, I needed to change the php.ini setting from mbstring.encoding_translation = Off to mbstring.encoding_translation = 0.
3. Composer is not installed by default on Xserver. To install Composer, use the php command.
4. Drupal uses the composer-patch plugin to apply patches, but if you don't understand how to install Composer plugins and how to actually apply patches, you won't be able to apply the patch to fix the Civic Theme layout builder, and you won't be able to install the theme.
5. If you don't understand composer.json and how to write it, you won't be able to install the necessary modules distributed as dev versions, and you won't be able to install the Civic Theme.

In order to use Civic Theme, you will need to operate the terminal and php commands according to your environment during the installation process, and you will also need to operate Composer, which is not covered in the Drupal tutorial.

The problem with Civic Theme is that it is not a CMS that you can use on a GUI following the Drupal and Civic Theme tutorials, but rather a system that uses PHP and a database, so you need to understand this and be aware that you need to learn it in order to install it.

Once the installation is complete, you can build your website more easily than with other themes, but because it uses the dev version of the layout builder module, there are cases where it causes problems with the paragraph module when updating, so you need to resolve any errors yourself.

As I like new things, I update as soon as I get a notification, but it's true that I've had some painful experiences with errors. However, as most of the errors are not catastrophic, but simple display errors related to layout and rendering, I deal with them by deleting and reinstalling the module or rebuilding Composer.

Civic Theme is an excellent theme, and building a website from the templates provided in the admin screen is easy to understand even for beginners, and even beginners can build a high-quality website.

On the other hand, because it achieves ease of construction by effectively using multiple modules, there is a tendency for errors to occur due to the dependencies between modules, and in order to deal with the high threshold for installation and errors when updating, it is necessary to understand the basic operations of the terminal, understand PHP, understand how to use composer, which is not covered in the Drupal tutorial, and understand the information published on Drupal.org for collecting error information.

This is an excellent theme that is recommended for those who have the goal of actually using Drupal rather than just trying it out, and who have the learning mindset to deal with errors and other issues. It is also recommended for engineers who can use PHP and DB without any problems but who are not good at design.

Originally, it was developed with the assumption that it would be used by public institutions and educational institutions, and it is a theme that is not intended for use by individuals like me, but it is a theme that excels in design, information organisation and announcements, and it is also excellent as a learning resource, as it can embody the characteristics and use cases of Drupal.

It was the first theme I used, and it also helped me to understand Drupal better, so I have a strong attachment to it, and I can relate to many of the concepts of the Civic Theme. This site is built on a Bootstrap 5 theme, but there are many elements that are useful for reference, such as the paragraphs and Search API used by the Civic Theme, so it is a theme that I will continue to use in the future.

Last time, I reviewed the local environment of my Macbook and updated it, but I updated the Civic Theme installed on my MacBook and dealt with the several errors that occurred.

At that time, I rechecked the file structure, and I solved the problem by using the SCSS build file built into the sub-theme installed locally on the MacBook, which I had given up on using due to the limitations of Node.js in Xserver.

I had not updated the articles while the site was temporarily running because I had assumed that I would be using a sub-theme after the site was published, but I have resumed running the site because it is now possible to run it with a sub-theme, so I am writing about it this time.