I have a sub-theme for Omega 5 and was able to add new regions. Now I can't figure out how the Layout Builder Breakpoints group is generated. I'm trying to add my new regions into All, NARROW, NORMAL, & WIDE that can be adjust later by the those user who isn't not technique.

For Example,

Currently FOOTER Group is set 12 Columns and only one region. What If I wanted to add Footer One, Footer Second, Footer third? where can this be add?

I figure something needed to be edit in the Omega 5's parent theme file. Not exactly sure which file.

Need help here

Thanks

Comments

FutureITS created an issue. See original summary.

SushiKong’s picture

SushiKong CreditAttribution: SushiKong commented
Issue summary: View changes
Toby Wild’s picture

Toby Wild CreditAttribution: Toby Wild as a volunteer commented

Hi, not an expert on this, just something that's worked for me.

I'm going through this on my PC as I type:

  1. I have 'Footer Region' that I can see.
  2. Inside 'Layout Builder', I select:
    • Layout of 'Front'
    • Breakpoint group = 'test.default' (My sub-theme only has one).
  3. I scroll down and can see 'Region group: Footer'.
  4. Expand that out and I see 'Footer', 12 column width.
  5. I open up test.info.yml and add "footer_second: 'Footer Second'" in the list of Regions
  6. Save
  7. I then open /config/install/test.layout.front.yml and scroll down to the first instance of the word Footer.
  8. Inside Regions, I duplicate 'footer' and add in 'footer_second', and change both widths to 6.
  9. Copy the 'footer' elements into all the All/Narrow/Normal/Wide sections of the file.
  10. Not sure if I need to, but I copy it across into /config/install/test.layout.front.generated.yml as well.
  11. Save both
  12. Set Bartik as your default theme.
  13. Uninstall your custom theme.
  14. Install and set default to your custom theme.
  15. Open up the Layout Builder now, and you see see both Footer elements.
  16. Check the page with Region debugging on and you WONT see it.
  17. This is because the theme knows there is a new area, but doesn't know where to render it.
  18. If you haven't already, copy the page.html.twig from the base Omega folder into your custom themes Template folder.
  19. Down the bottom, you will see : {{ page.footer }}
  20. Below that, add in {{ page.footer_second }}.
  21. Save
  22. Clear your cache and you will see it looking really weird, with the second region sitting in and around the first region.
  23. Because now the system knows about it, but the styles don't know what it's supposed to look like.
  24. Back inside the theme, click on 'Save and Update styles'.
  25. This will rebuild the CSS files and include the new regions.
    • This seems to be because in the old D7 v3 method, you would simply apply a class of 'col-6' if something was 6 columns wide, and the CSS knew what to do.
  26. Now it appears we are dynamically creating the CSS using the names of each of the regions.

I sure hope this isn't the correct way of doing it, because I'm sure as hell not uninstalling and reinstalling my theme everytime I make a change.... this isn't supposed to be Wordpress for christ sake.

SushiKong’s picture

SushiKong CreditAttribution: SushiKong commented

Step 14, when I reinstall and set as default the system crash. It's giving me "The website encountered an unexpected error. Please try again later. drupal" error. Is there a tool we can return back with why there is a error?

Toby Wild’s picture

Toby Wild CreditAttribution: Toby Wild as a volunteer commented

@FutureITS
My only guess would be if you were using the Zend PHP Framework, I've heard it has really good error reporting, giving you the file and function that failed to run.

If you aren't or can't, then try stepping back through each change you made.
Maybe compare your changes to a vanilla starter kit.

Remember that the .yml files are white space sensitive, so you need to make sure everything is indented properly.