customize we-megamenu css and full-width

Hi @linno,

To override some library or file in your custom theme it needs to find the definition of that library first.
Seems like you are trying to override we_megamenu_backend.css file, right? If so, it is defined in we_megamenu.libraries.yml file in we_megamenu module folder. The definition is:

form.we-mega-menu-frontend:
  version: 1.0
  css:
    theme:
      assets/includes/bootstrap/css/bootstrap.min.css: {}
      assets/css/we_megamenu_backend.css: {}
      # ...

To override it, in your theme's info file (THEMENAME.info.yml) needs to place something like this:

libraries-override:
  form.we-mega-menu-frontend:
   css:
     theme:
       # here dist/css/we_megamenu_backend_custom.css is relative to your custom theme folder.
       assets/css/we_megamenu_backend.css: dist/css/we_megamenu_backend_custom.css

I hope you got the logic, here you can find more info drupal.org/node/2497313 →

Second question answer

To use a full-width layout basically the only thing that needs to be done is to set the TRUE value for page_layout variable in the corresponding page.html.twig file.
There are multiple options for how exactly it can be done. For example, if you need to have this feature for all pages of the website, you can do it directly in page.html.twig file in your custom theme by putting this somewhere at the top of the file:

{% set page_layout = true %}

If you need this only for specific pages you can either create additional page templates based on template suggestions or pass the value of page_layout in the preprocess function:

/**
 * Implements hook_preprocess_page() for page.html.twig.
 */
function THEMENAME_theme_preprocess_page(array &$variables) {
  // Some condition.
  if ($SOMETHING) {
    $variables['page_layout'] = TRUE;
  }
}

Hi! Thanks for your reply,
the solution for override library wont work (site crashed) in material_base_mdc.info.yml and I not modify the file, but if I modify the material_base_mdc.libraies.yml with this code work fine. Can you help/explain this difference? Sincererly not understand why.

mdc:
  css:
    theme:
      ../../dist/css/mdc.css: { minified: true }
      ../../dist/css/we_megamenu_backend_custom.css: { }

Hi again!
For the layout full I modify the page.html.twig located at "\themes\contrib\material_base\themes\material_base_mdc\templates\layout"

{% extends "@material_base/layout/page.html.twig" %}
<strong>{% set page_layout = true %}</strong>
{% if navbar_style == 'dense' %}
  {% set navbar_style_adjust = 'mdc-top-app-bar--dense-fixed-adjust' %}
{% elseif navbar_style == 'prominent' %}
  {% set navbar_style_adjust = 'mdc-top-app-bar--prominent-fixed-adjust' %}
{% else %}
  {% set navbar_style_adjust = 'mdc-top-app-bar--fixed-adjust' %}
{% endif %}

{% block page_container %}
  <div class="page-container layout-container{{ page_layout ? ' layout-container--node' : ' layout-container--page' }}{{ drawer_full ? ' mdc-drawer-app-content'}}">
{% endblock %}

{% block navbar_adjust %}
  <div class="page-navbar-adjust {{ navbar_style_adjust }}{{ drawer_below ? ' mdc-drawer-app-content'}}">
{% endblock %}

the layout lost some block region (pictures add) why? repeat maybe is my fault... newbie in dupal 10.
Best regards, Luca

Hi @linno,

It is hard to understand the problem of overriding, without seeing the code. But what I can definitely say, if you need to replace the library or file with your file, it needs to be done the way I described in the previous post, in THEMENAME.info.yml file.
If you just need to add some CSS files to the website, then yes, it can be done in THEMENAME.libraries.yml.
By the way, it is a bad practice to change files of the base theme, I'd recommend creating your own custom theme and putting your changes there. You can find how to create a custom theme based on Material base here.

Regarding layout, it is expected behavior for page_layout = TRUE. In this mode, the only content region is rendered. It is designed for cases when the page layout is controlled by some other way than regions, like, Views, Layout builder, and so on.
Probably I could recommend something if you would explain what are you trying to achieve.

Hi @iamdroid,
thanks, I honestly had no idea I had to use a subtheme, I thought that Material Base MDC 3.0.0-beta1 was already the subtheme, now everything is clear, I study Drupal better.
For the full-width request I attach a photo of what I would like, if it is possible.
Full layout, which becomes dynamic if I insert a side menu or blocks on the left side. sorry again for my inexperience.
Thanks again, Luca

Hi @linno,

If I am understanding you right, to achieve that you just need to unset max-width for main-content__container class.

Hi @iamdroid,
Thanks for all! Exactly what I want.
Best regards Luca