Creating a Display Suite Custom Layout

Question

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 > .group-fhl {
  float: left; /* LTR */
      width: 70%;
}

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

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

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

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

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

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

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

    <{{ outer_wrapper }}{{ attributes.addClass('ds-2col-stacked', 'clearfix') }}>

  {{ title_suffix.contextual_links }}


    <{{ fhl_wrapper }}{{ fhl_attributes.addClass('group-fhl') }}>
    {{ fhl }}
  </{{ fhl_wrapper }}>

  <{{ fhr_wrapper }}{{ fhr_attributes.addClass('group-fhr') }}>
    {{ fhr }}
  </{{ fhr_wrapper }}>


  <{{ header_wrapper }}{{ header_attributes.addClass('group-header') }}>
    {{ header }}
  </{{ header_wrapper }}>

  <{{ left_wrapper }}{{ left_attributes.addClass('group-left') }}>
    {{ left }}
  </{{ left_wrapper }}>

  <{{ right_wrapper }}{{ right_attributes.addClass('group-right') }}>
    {{ right }}
  </{{ right_wrapper }}>

  <{{ footer_wrapper }}{{ footer_attributes.addClass('group-footer') }}>
    {{ footer }}
  </{{ footer_wrapper }}>

</{{ outer_wrapper }}>

• 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.

Answer 1

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