2

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.

4

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

  • updated code (in question i updated it too) but still no luck. just to clear, i call css file via "library: ds_2col_stacked_custom" correct? – Forey Vitaliy Jul 23 '18 at 12:50
  • Clear the cache after any changes. – Kevin Jul 23 '18 at 13:20
  • did that many times... nope... not working. – Forey Vitaliy Jul 23 '18 at 14:20
  • The code above still says library: ds_2col_stacked_custom – Kevin Jul 23 '18 at 14:21
  • thanks. it worked when noticed and applied your comment : You should be calling it via 'mytheme/library-name', so: library: mytheme/ds_2col_stacked_custom – Forey Vitaliy Jul 23 '18 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.