Creating a Display Suite Custom Layout I'm using Display Suite for my website and I want to add a couple layouts to Display Suite, to apply to some pages. I have checked out how to add custom layout to Drupal Suite with google, Stack Overflow and Drupal Answers. What I did:


created a folder "ds_layouts" in my custom theme folder;
created a folder for my custom layout "ds-2col-stacked-custom" in "ds_layouts" folder;
created two files "ds-2col-stacked-custom.css" :


>

.ds-2col-stacked &gt; .group-fhl {
  float: left; /* LTR */
      width: 70%;
}

.ds-2col-stacked &gt; .group-fhr {
  float: right; /* LTR */
  width: 30%;
}

 .ds-2col-stacked &gt; .group-left {
  float: left; /* LTR */
  width: 50%;
}

[dir="rtl"] .ds-2col-stacked &gt; .group-left {
  float: right;
}

.ds-2col-stacked &gt; .group-right {
  float: right; /* LTR */
  width: 50%;
}

[dir="rtl"] .ds-2col-stacked &gt; .group-right {
  float: left;
}

.ds-2col-stacked &gt; .group-footer {
  clear: both;
}


and "ds-2col-stacked-custom.html.twig" :

    &lt;{{ outer_wrapper }}{{ attributes.addClass('ds-2col-stacked', 'clearfix') }}&gt;

  {{ title_suffix.contextual_links }}


    &lt;{{ fhl_wrapper }}{{ fhl_attributes.addClass('group-fhl') }}&gt;
    {{ fhl }}
  &lt;/{{ fhl_wrapper }}&gt;

  &lt;{{ fhr_wrapper }}{{ fhr_attributes.addClass('group-fhr') }}&gt;
    {{ fhr }}
  &lt;/{{ fhr_wrapper }}&gt;


  &lt;{{ header_wrapper }}{{ header_attributes.addClass('group-header') }}&gt;
    {{ header }}
  &lt;/{{ header_wrapper }}&gt;

  &lt;{{ left_wrapper }}{{ left_attributes.addClass('group-left') }}&gt;
    {{ left }}
  &lt;/{{ left_wrapper }}&gt;

  &lt;{{ right_wrapper }}{{ right_attributes.addClass('group-right') }}&gt;
    {{ right }}
  &lt;/{{ right_wrapper }}&gt;

  &lt;{{ footer_wrapper }}{{ footer_attributes.addClass('group-footer') }}&gt;
    {{ footer }}
  &lt;/{{ footer_wrapper }}&gt;

&lt;/{{ outer_wrapper }}&gt;



in file "Mytheme.layout.yml", I added:



  


ds_2col_stacked_custom:
  label: Two column stacked layout custom
  category: Display Suite
  class: '\Drupal\ds\Plugin\DsLayout'
  type: partial
  template: ds_layouts/ds-2col-stacked-custom/ds-2col-stacked-custom
  library: ds_2col_stacked_custom
  regions:
    fhl:
      label: fhl
    fhr:
      label: fhr
    header:
      label: Header
    left:
      label: Left
    right:
      label: Right
    footer:
          label: Footer



in file "Mytheme.libraries.yml", I added:



  


# DS.
ds_2col_stacked_custom:
  version: VERSION
  css:
    theme:
      ds_layouts/ds-2col-stacked-custom/ds-2col-stacked-custom.css: {}


In Manage Display for page I see the option for my custom layout, and when I apply it, it's working (html tags and css classes are added to the page), but it does not apply any of my css for my layout. I think there is something wrong with the way I added css file to my custom layout.
You’re calling a library with dashes but it was defined with underscores. Update it to match the name.

You should be calling it via 'mytheme/library-name', so:

library: mytheme/ds_2col_stacked_custom