You can make basic settings for the site colour, text colour, link colour, etc.
Notice.
This article was written when I was testing Drupal on a local environment before publishing it on Lightsail. After that, I selected Bitnami's Drupal, which I installed in the Tokyo region using the Lightsail blueprint, and it was set to 10.3.3 by default. After installation, I updated it, so this website is published using Drupal 10.3.5. *As of 30th September 2024
As mentioned in the article, the Mac environment is built using Drupal 11.0.4. We had planned to run Drupal 11.0.4 on AWS, but the Drupal instance provided by the Lightsail blueprint is not compatible with Drupal 11.0.4, so please understand that the article is published using Drupal 10.3.5 and the content is difficult to understand.
I will write about Amazon Lightsail in a separate article.
Bootstrap5 Default Settings.
In the previous section, we completed the settings for the Bootstrap 5 sub-theme, so in this article, we will go through the basic settings for Bootstrap 5 > Theme basic settings. The work is not very difficult, but it is easier to understand if we explain the functions from the configuration of the Drupal administration screen, so we will explain it using a configuration diagram.
The items that can be set in the Bootstrap 5 theme are
- Site colours
- Text and link colours to match the colours
- Header and footer colours, including the navigation menu
- Title logo
- Favicon
minimum of settings.
Basic Structure.
|- [1] B5 subtheme (Default theme)
|- [2]Settings
|
|- [3]Home > Administration > Appearance > Appearance Settings > B5 Subtheme
|- [4]Global settings / Olivero / Claro / Bootstrap5 /B5 subtheme
|
|---- [4-1]Page element display
|---- [4-1-1]User pictures in posts // Select check
|---- [4-1-2]User pictures in comments // Select check
|---- [4-1-3]User verification status in comments // Select check
|---- [4-1-4]Shortcut icon // Select check
// Select all checks
|
|---- [4-2]Use the logo supplied by the theme
// Use the logo supplied by the theme // Select check
|
|---- [4-3]favicon
// Shortcut icons or favourite icons are displayed in the address bar and bookmarks in most browsers.
// Use the favicon supplied by the theme // Select check
|
|---- [4-4]Style guide
// Style guide demonstrates abilities of bootstrap framework. Style guide is now part of bootstrap tools module. Install and enable to the module to enhance content editor and developer workflows.
|
|---- [4-5]Body options
// Combination of theme/background colour may affect background colour/text colour contrast. To fix any contrast issues, override corresponding variables in scss file: [bootstrap 5 theme]/dist/bootstrap/[version]/scss/_variables.scss Website container type
|
// Type of top level container: fluid (eg edge to edge) or fixed width
|
// Website container type configuration
|
|---- [4-5-1]Body theme: // Select from the following
|---- [a.]Do not apply theme // Selection
|---- [b.]Light
|---- [c.]dark
|
|---- [4-5-2]Body background:
|---- [a.]Do not apply color // Selection
|---- [b.]Secondry
|---- [c.]Light
|---- [d.]Dark
|
|
|---- [4-6]Navbar options
|
|---- [4-6-1]Navbar theme:
|---- [a.]Do not apply color // Selection
-----Omitted Dark, etc., for the same reasons as above.-----
|
|---- [4-6-2]Navbar background:
|---- [a.]Do not apply color // Selection
-----Omitted Dark, etc., for the same reasons as above.-----
|
|
|---- [4-7]Footer options
|
|---- [4-7-1]Footer theme:
|---- [a.]Lightt // Selection
-----Omitted Dark, etc., for the same reasons as above.-----
|
|---- [4-7-2]Footer background:
|---- [a.]Do not apply color // Selection
-----Omitted Dark, etc., for the same reasons as above.-----
|
|
|---- [4-8]Text formats and CKEditor
// Configuration for text formats and editors.
|
|
|---- [4-9]Subtheme
|
|
|- [5]Save Configuration // Save the configuration once you have decided on the settings.
The process is as above.
To Summarise.
- Theme > Bootstrap5 SubTheme > Select Settings
- Settings Screen > Page Element (Post, etc.) Settings
- Settings Screen > Logo and Icon Settings
- Settings Screen > Style Settings > No settings
- Settings Screen > Body Settings > No selection as the background is white
- Settings Screen > Navbar Settings > Select Light
- Settings Screen > Footer Settings > Select Light
- Settings Screen > Text Editor Settings > No settings
- Settings screen > Subtheme settings > No settings required as they have already been set > No settings required
- Save the configuration using the above settings
Set the basic theme as above.
As this is the initial setup, we will create a sample page and post to check the appearance. As this is a temporary setup, we will leave the icons and favicon as they are, and change them to the official ones once the page structure has been decided.
You can change the colours and styles of the tags that can be used with CKEditor using SCSS, but for now I'm thinking of creating it from the default state and then changing it afterwards.
As I'm still in the process of building it locally, this will be an article on the production process before it is published. Please note that there may be parts that differ from the article content when it is actually published.
Conclude.
The standard settings for the Bootstrap 5 design theme have been completed for the Drupal site built on the MacBook, and the website is now ready to be published, so the next section will summarise the Amazon Lightsail hosting service that we are using for this website.
In practice, I use Drupal settings and test pages on a Mac to verify operation and decide on the design, but it would be easier to understand if I summarised this in a post after the site has gone live, so I will summarise the post on the AWS Lightsail hosting service that I have selected and am currently using.
In the next section, I will explain the outline of the AWS hosting service ‘Lightsail’ that I use.