How to Use the Breeze Theme in Drupal 8

How to Use the Breeze Theme in Drupal 8

Breeze is a design that we make available as a Joomla template and a WordPress theme. Now, finally, it’s available as a Drupal 8 theme!

We use Breeze as an example in many of our video classes and books.

By using the same design, it makes it easy for OSTraining members to see differences and similarities between the various platforms.

Breeze is fully responsive and uses the Bootstrap framework.

How to install Breeze in Drupal 8

Breeze is a sub-theme of the very popular Bootstrap theme, so we’ll need to install both.

  • Download and install the Bootstrap theme.
  • Download and install the Breeze theme.
  • Go to the “Appearance” tab.
  • Click “Install and set as default” next to Breeze.
Install and enable the Breeze Drupal 8 theme

  • Go to Structure > Block layout.
  • Click “Demonstrate block regions (Breeze Drupal 8 Theme)”
  • You’ll now see a layout of your theme’s regions:
breeze-regions
  • Click “Exit block region demonstration”

We’re now going to put the necessary blocks into the correct regions.

  • Move the “Main navigation” block to the “Navigation” region. This will place the main menu.
  • Move the “Search” block to the “Secondary region”.
  • Move the “Site branding” block to the “Header” region. This will place the site logo.

You might also want to configure the “Site branding” block to remove the “Site name” feature.

  • Click “Configure” next to the “Site branding” block.
  • Make sure that only the “Site logo’ box is checked.
Editing the site branding block in the Breeze Drupal 8 theme

if you want to have dropdown menus on your site, you’ll also need to do this:

  • Click “Configure” next to the “Main navigation” block.
  • Change “Maximum number of menu levels to display” to more than 1.
Editing the menu block in the Breeze Drupal 8 theme

Now when you visit your site, it should look like the image below.

the Breeze Drupal 8 them

Here’s how the dropdown menus will appear:

Dropdown menus in the Breeze Drupal 8 theme

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

23 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mehdi Heidarzadeh
Mehdi Heidarzadeh
7 years ago

Hi

Does this theme support RTL direction?

Daniel Pickering
7 years ago

RTL ?

Mehdi Heidarzadeh
Mehdi Heidarzadeh
7 years ago

Yes, RTL direction for RTL languages.

Daniel Pickering
7 years ago

Hi Mehdi,
Currently I do not believe it does but I could look at making that feature of the theme.
Thanks for the suggestion.

Daniel

Mehdi Heidarzadeh
Mehdi Heidarzadeh
7 years ago

Thanks for the reply Daniel,

It would be great if you implement RTL direction to this great theme.

Then users with languages like Persian, Arabic and Hebrew can use this theme.

Best wishes.

Daniel Pickering
7 years ago

Hi Mehdi,
We have talked it over and we will be looking to add this feature.
It will be listed as a feature on the project when it is ready.
Thanks

Daniel

SimonW
7 years ago

Beautiful theme ! Nice and clean, thanks !

Daniel Pickering
7 years ago
Reply to  Simon

Thanks Simon.

nate
nate
7 years ago

what is the best way to add a full width hero image?

Daniel Pickering
7 years ago
Reply to  nate

Hi Nate,
Can you elaborate on that?
Thanks

Daniel

nate
nate
7 years ago

I’d like to create a new content type which would have a full width hero image (either below the header region) or as a background image with the site branding. The container appears to have a margin of 182 being applied at desktop resolution and I’d like to be able to override that. I realize that this is probably a hack to the template that you designed (I like the template), but I’d like the power to add a hero image that spans the width of the browser window

Daniel Pickering
7 years ago
Reply to  nate

Hi nate,
That would be a theme region you want to add.
Have you considered taking our theme development course ?
[url=https://www.ostraining.com/class/d8-themes/]https://www.ostraining.com/…[/url]
Thanks

Daniel

Antonio Marcos López Alonso
Antonio Marcos López Alonso
7 years ago

Hi,
Any chance to have a multilevel main menu so that hovering level N shows just level N+1 and not all sublevels once at a time?
Thanks

Daniel Pickering
7 years ago

Hi Antonio,
That would require some js probably you could have a look at the existing menu modules I would not be surprised if such a module already exists.
Thanks,

Daniel

Sagir Hussain Khan
Sagir Hussain Khan
7 years ago

Hi Daniel Pickering!

Thanks for your nice theme.

borisandonov
borisandonov
7 years ago

How to make the theme larger, now it is 920px wide

Daniel Pickering
7 years ago
Reply to  borisandonov

Hi Borisandonov,
How wide are you wanting it to be?
Thanks,

Daniel

borisandonov
borisandonov
7 years ago

As normal bootstrap 3 theme, about 1200 i think

Daniel Pickering
7 years ago
Reply to  borisandonov

Hi Borisandonov,
The css controls the width. We could look at adding some variable controls to the css as a feature.
Thanks,

Daniel

Pam Smith
Pam Smith
7 years ago

Very nice theme! For some reason, the nav menu doesn’t have a default color, it appears blank until I hover over a nav button, then it displays color.

Daniel Pickering
7 years ago
Reply to  Pam Smith

Hi Pam,
It appears to be working still on my installation.
Are you using any CSS overrides?
Thanks

Daniel

Pam Smith
Pam Smith
7 years ago

It is working now, another configuration was overriding it. Thanks!

C T
C T
6 years ago

Beautiful theme. Nav menu displays child 1,2, etc but not child of child, is there any way to fix? This is the structure I use:
Parent
Child 1 – child 1-1
Child 2 – child 2-1

23
0
Would love your thoughts, please comment.x
()
x