0

Is there a way to add wrapper div around few form element in admin theme? I have a content type that i want to style its admin theme. I already have m sub-theme. I couldn't find the file that is rendering that page only. I thought i can style it using the same method as doing front end for content type. ( finding the html comment to where the files are and access each element using content.field.). So i am pretty lost on how to do this...

1
  • 1
    Admin themes can be styled using the same techniques as the frontend theme. However, you need to edit the admin theme, not the frontend theme. Jun 15, 2022 at 6:20

1 Answer 1

2

You can add theme suggestions to the form element and add the wrapper divs to the elements template. See How do I write a template file for a specific input field?

Or you can style the entire node edit form by copying this twig file into the theme folder:

/my_admin_theme/templates/node-edit-form.html.twig

{#
/**
 * @file
 * Theme override for a node edit form.
 *
 * Two column template for the node add/edit form.
 *
 * This template will be used when a node edit form specifies 'node_edit_form'
 * as its #theme callback.  Otherwise, by default, node add/edit forms will be
 * themed by form.html.twig.
 *
 * Available variables:
 * - form: The node add/edit form.
 *
 * @see claro_form_node_form_alter()
 */
#}
<div class="layout-node-form clearfix">
  <div class="layout-region layout-region--node-main">
    <div class="layout-region__content">
      {{ form|without('advanced', 'footer', 'actions') }}
    </div>
  </div>
  <div class="layout-region layout-region--node-secondary">
    <div class="layout-region__content">
      {{ form.advanced }}
    </div>
  </div>
  <div class="layout-region layout-region--node-footer">
    <div class="layout-region__content">
      <div class="divider"></div>
      {{ form.footer }}
      {{ form.actions }}
    </div>
  </div>
</div>

Seven and Claro have already implemented this for the node form. How to implement it for other forms see How to render specific form elements from the *.theme file

4
  • How can i access the elements inside of the form? Lets say in the view filter exposed i can access each exposed filter seperately but for this one I am not sure how to do so from this template file. Jun 15, 2022 at 8:22
  • For example <div class="title-wrapper">{{ form.title }}</div> and then add the title field to without() {{ form|without('title', 'advanced', 'footer', 'actions') }}
    – 4uk4
    Jun 15, 2022 at 9:09
  • ouh oket, i will give it a try. Thank you very much! Jun 15, 2022 at 9:37
  • Thank you very much, works like a charm! Jun 16, 2022 at 5:19

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