This article covers the basic settings for site colors, text colors, and link colors.
Notice.
This article was written while testing in a local environment before publishing Drupal on Lightsail. The Bitnami Drupal instance selected from the Lightsail blueprint and installed in the Tokyo region defaulted to version 10.3.3, and after updating post-installation, this website launched on Drupal 10.3.5. ※ As of September 30, 2024
As described in the articles, the Mac environment was built on Drupal 11.0.4. The original plan was to run Drupal 11.0.4 on AWS, but since the Drupal instance provided by the Lightsail blueprint did not support Drupal 11.0.4, the site launched on Drupal 10.3.5 instead. Please note that this may make some of the article content harder to follow.
Amazon Lightsail is covered in a separate article.
Bootstrap5 Theme Basic Settings.
With the Bootstrap5 sub-theme configuration completed in the previous article, this article covers the Bootstrap5 basic settings — specifically the Theme settings. The work itself isn't particularly involved, but walking through the Drupal admin interface structure makes it easier to understand, so I'll use a layout diagram to explain.
The items configured under the Bootstrap5 theme are:
- Site colors
- Text and link colors to match the color scheme
- Header and footer colors, including the navigation menu
- Title logo
- Favicon
- — these represent the minimum necessary settings.
Basic Settings.
Drupal Administration > Appearance > Bootstrap5.
|- [1] B5 subtheme (Default theme)
|- [2] Settings
|
|- [3] Home / Administration / Appearance / Theme settings
|- [4] Common settings / Claro / Olivero / Bootstrap5 / B5 subtheme
|
|---- [4-1] Toggle display
|---- [4-1-1] User avatar on posts // Check to enable
|---- [4-1-2] User avatar on comments // Check to enable
|---- [4-1-3] Comment approval status // Check to enable
|---- [4-1-4] Shortcut icon // Check to enable
// Check all
|
|---- [4-2] Logo image
// Use the logo provided by the theme // Check to enable
|
|---- [4-3] Favicon
// The shortcut icon or favicon is displayed in the address bar and bookmarks in most browsers.
// Use the favicon provided by the theme // Check to enable
|
|---- [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: choose from the following
|---- [a.] Do not apply theme // Selected: none
|---- [b.] Light
|---- [c.] dark
|
|---- [4-5-2] Body background:
|---- [a.] Do not apply color // Selected: none
|---- [b.] Secondry
|---- [c.] Light
|---- [d.] Dark
|
|
|---- [4-6] Navbar options
|
|---- [4-6-1] Navbar theme:
|---- [a.] Light // Selected: Light
----- Omitted: Dark and others follow the same pattern -----
|
|---- [4-6-2] Navbar background:
|---- [a.] Lightt // Selected: Light
----- Omitted: Dark and others follow the same pattern -----
|
|
|---- [4-7] Footer options
|
|---- [4-7-1] Footer theme:
|---- [a.] Lightt // Selected: Light
----- Omitted: Dark and others follow the same pattern -----
|
|---- [4-7-2] Footer background:
|---- [a.] Lightt // Selected: Light
----- Omitted: Dark and others follow the same pattern -----
|
|
|---- [4-8] Text formats and CKEditor
// Configuration for text formats and editors.
|
|
|---- [4-9] Subtheme
|
|
|- [5] Save configuration // Save configuration once settings are finalized
That covers the overall flow.
Configuration Applied.
- Appearance > Bootstrap5 SubTheme > Settings
- Settings > Toggle display (posts, etc.)
- Settings > Logo and icon configuration
- Settings > Style guide > No items to configure
- Settings > Body options > No selection (background is white)
- Settings > Navbar options > Selected: Light
- Settings > Footer options > Selected: Light
- Settings > Text formats and CKEditor > No items to configure
- Settings > Subtheme > Already configured > No items to configure
- Saved configuration with the above settings
This completes the basic theme configuration.
Since this is the initial setup, I'm creating sample pages and posts to check how things look as I configure. The icon and favicon are left as-is for now, as these are placeholder settings — I'll swap them out for the proper ones once the page layout is finalized.
Colors and tag styles available in CKEditor can be changed via SCSS, but for now I'm building the website in its default state, planning to make adjustments on top of that once it's up.
At this point I'm still building locally, so these articles document the pre-launch production process. Please note that some details may differ from the actual published version.
Conclude.
With the standard Bootstrap5 theme settings configured for the Drupal installation on my MacBook and the website ready to go, the next article covers Amazon Lightsail, the hosting service I use for this website.
In practice, I've been using Drupal settings and test pages on the Mac to verify behavior and finalize the design, but it made more sense to document that after the launch articles — so I'll first cover the selection and setup of the hosting service, AWS Lightsail.
The next article covers AWS Lightsail, the hosting service I use for this website.