Customizing the Default Theme in Drupal

2 min read

Let’s look at the default theme (garland) and customize it.

We can customize the following features:

  • Color scheme, either based on a color set, or by changing the individual colors
  • If certain elements, such as the logo, are displayed
  • The logo
  • The favicon

Back in the Themes section of the Administer area, there is a configure link next to each theme; if we click this we are taken to the theme’s configuration page.

Although Doug ideally wants a new theme that is unique to his website, he also wants to have a look at a few different options for the default theme. In particular, he wants to add his company’s logo to the website and try a number of red color schemes as those are his corporate colors.

Color Scheme

The color scheme settings are quite intuitive and easy to change. We can either:

  • Select a color set
  • Change each color by entering the hexadecimal color codes (the # followed by 6 characters)
  • Select the colors from the color wheel

To change a color using the color wheel, we need to click on the color type (base color, link color, etc.) to select it and then chose the general color from the wheel and the shade of the color from the square within.

When we change the colors or color set, the preview window below the settings automatically updates to reflect the color change.

The following color sets are available:

  • Blue Lagoon (the default set)
  • Ash
  • Aquamarine
  • Belgian Chocolate
  • Bluemarine
  • Citrus Blast
  • Cold Day
  • Greenbeam
  • Meditarrano
  • Mercury
  • Nocturnal
  • Olivia
  • Pink Plastic
  • Shiny Tomato
  • Teal Top
  • Custom

Quite a number of these are red-based color schemes, let’s look into them, they are:

  • Belgian Chocolate
  • Meditarrano
  • Shiny Tomato

Belgian Chocolate Color Set

The Belgian Chocolate color set uses a dark red header with a gradient starting with black flowing into a dark red color. The page’s background is a cream color and the main content area has a white background as illustrated by the picture below:

Mediterrano Color Set

The Mediterrano color set uses a lighter red color where the gradient in the header starts with a light orange color which then flows into a light red color. Similar to the Belgian Chocolate color scheme the background is cream in color with a white background for the content area.

Shiny Tomato Color Set

The Shiny Tomato color set has a gradient header that starts with deep red and flows into a bright red color. The page’s background is light grey with white background for the main content area, reflecting a professional image.

The Shiny Tomato color set uses a red scheme which is in Doug’s logo and he feels this set is the most professional of the three and wants us to use that.

 

Packt

Share
Published by
Packt

Recent Posts

Top life hacks for prepping for your IT certification exam

I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…

3 years ago

Learn Transformers for Natural Language Processing with Denis Rothman

Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…

3 years ago

Learning Essential Linux Commands for Navigating the Shell Effectively

Once we learn how to deploy an Ubuntu server, how to manage users, and how…

3 years ago

Clean Coding in Python with Mariano Anaya

Key-takeaways:   Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…

3 years ago

Exploring Forms in Angular – types, benefits and differences   

While developing a web application, or setting dynamic pages and meta tags we need to deal with…

3 years ago

Gain Practical Expertise with the Latest Edition of Software Architecture with C# 9 and .NET 5

Software architecture is one of the most discussed topics in the software industry today, and…

3 years ago