Posted by lubwn on Tue, Mar 30, 2021 - 8:00pm

I loved in Drupal 7, that it had classes everywhere. Each block has it's own ID and numerous classes, body has classes of content type, node ID, whether user is logged in / out, if the current page is frontpage etc.

All those handy classes were stripped. Now it is a lot harder to actually style the website to our needs in Backdrop CMS.

Flexible layout just create mess like this:

<div data-row-id="1bed85be-29aa-4eb2-8041-656f166bfc21" class="flexible-row l-1bed85be-29aa-4eb2-8041-656f166bfc21">

When we can not even count on that this class will stay the same, actually it will when duplicating layout (tested) and this is also a problem. Since most of the time when duplicating a layout I need the duplicated one to have some class different so it can be styled differently in theme.

Setting a class on regions does nothing because those data-rows are parents.

Could we bring the functionality somehow back? 

As a comparision, D7 has those classes in body:

navbar-is-fixed-top html not-front not-logged-in no-sidebars page-node page-node- page-node-2 node-type-page

Backdrop CMS has:

page node-type-page has-flexbox

Thanks in advance.

Comments

klonos's picture

Tue, Mar 30, 2021 - 10:03pm by klonos

Hey  👋

When you are logged in, you should see the following classes:

page front logged-in node-type-page node-123 has-flexbox

Not sure about the html CSS class, but when you log out, the logged-in class is removed. So instead of the not-logged-in class, you can target CSS with body:not(.logged-in).

Same with the not-front class: the front class is removed when viewing anything other than the front page, so you can use body:not(.front) instead.

As for the navbar-is-fixed-top class, was that provided by the admin_menu module or some other module in Drupal 7? You may need to create a feature request for that to be added if you need to use it. Alternatively, you may add that class in your theme. You can find information about all that in the "Adjust CSS selectors" section of the Converting themes to Backdrop from Drupal 7 documentation page.

Can you please try that and let us know how you go? If there's anything not clear in the documentation, please report back so we can fix it.

Thanks

Sun, Apr 04, 2021 - 5:05am by herb

I agree about flexible layout templates needing more classes. Even though classes can be set per row in the template there's no way to set a class per region.

Until this gets improved I suggest copying the template and putting it into your layouts folder in root. Then you can add in classes easily and remove the uuids.

Though I agree we need an issue for improving it. The one Olaf linked to is more about IDs rather than classes.

Olafski's picture

Mon, Apr 05, 2021 - 7:21am by Olafski

I've tested Herb's pull request. It works good, and I think, a class name for the region is helpful in many use-cases.

That said, the region of a Flexible layout row is one of the more inner elements. I'm wondering if / how we can provide better classes for the outer 'data-row' element (the row wrapper). There is already the option for "Additional row classes", but in my opinion custom classes for the wrapper are at least equally important.

Mon, Apr 05, 2021 - 12:21pm by lubwn

Thank you everyone for solving this for me. I applied a code change in file layout-flexible.tpl.php like it was suggested on github and it works perfectly! It is fine for now since we can target regions but I am afraid further core update will overwrite this.

EDIT: I placed the file in my theme folder and now core update should not overwrite it. So thats fine for now.