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.
- Go to Structure > Block layout.
- Click “Demonstrate block regions (Breeze Drupal 8 Theme)”
- You’ll now see a layout of your theme’s 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.
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.
Now when you visit your site, it should look like the image below.
Here’s how the dropdown menus will appear:
Hi
Does this theme support RTL direction?
RTL ?
Yes, RTL direction for RTL languages.
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
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.
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
Beautiful theme ! Nice and clean, thanks !
Thanks Simon.
what is the best way to add a full width hero image?
Hi Nate,
Can you elaborate on that?
Thanks
Daniel
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
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
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
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
Hi Daniel Pickering!
Thanks for your nice theme.
How to make the theme larger, now it is 920px wide
Hi Borisandonov,
How wide are you wanting it to be?
Thanks,
Daniel
As normal bootstrap 3 theme, about 1200 i think
Hi Borisandonov,
The css controls the width. We could look at adding some variable controls to the css as a feature.
Thanks,
Daniel
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.
Hi Pam,
It appears to be working still on my installation.
Are you using any CSS overrides?
Thanks
Daniel
It is working now, another configuration was overriding it. Thanks!
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