How to Override the Node Edit Form by Content Type and Customize Field Output in the Solo Theme

Hello,

If you're using the Solo theme as your admin theme, you can adjust the layout to stack the form sections vertically—this moves the right-hand column below the main content area.

To achieve this, apply the following CSS:

.path-node .layout-node-form {
    flex-direction: column;
  }

  .path-node .layout-node-form > div {
    width: 100%;
  }

Note: Personally, I use the Gin theme, which replaces Claro. Gin includes a built-in option to expand the "stage" area to full width, providing a better editing experience without custom CSS.

Best wishes,
Alaa

In the Solo theme, the default node add/edit form is rendered using: solo/templates/admin/node-edit-form.html.twig

This template is applied for all content types when creating or editing nodes. If you'd like to customize the layout of the form globally (for all content types), you can:

1. Copy the template to your sub-theme: themes/custom/your_subtheme/templates/admin/node-edit-form.html.twig
2. Modify the HTML structure or classes as needed.

Creating a Per-Content-Type Node Edit Template

If you need a custom layout or field arrangement for specific content types, such as Article, follow these steps:

Step 1: Download the Latest Dev Version of Solo

Ensure you're working with the most recent version of Solo, which includes support for: node_edit_form theme overrides.

Step 2: Copy the Default Template

Copy: solo/templates/admin/node-edit-form.html.twig to your sub-theme and rename it using the correct naming convention: node-edit-form--article.html.twig This template will be used only when editing or creating Article nodes.

Step 3: Print Fields Individually

Inside your node-edit-form--article.html.twig, you can print specific fields manually.

Here’s a basic example:

{{ form.title }}
{{ form.body }}

{# Exclude the manually rendered fields from the remaining form output #}
{{ form|without('title', 'body', 'advanced', 'footer', 'actions') }}

{{ form.advanced }}
{{ form.footer }}
{{ form.actions }}

Important: Any field you render explicitly (like form.title or form.body) must be excluded from the form|without() list. This avoids rendering them twice.

Step 4: Discover Available Fields

To see all available fields in your form, use a development dump:<pre>{{ dump(form) }}</pre>

This will output the form structure in the HTML source and help you determine field names to render.

Example Template Structure

{{ attach_library('solo/solo-node-edit-form') }}

<div class="layout-node-form solo-clear">
  <div class="layout-region layout-region-node-main solo-padding">
    {{ form.title }}
    {{ form.body }}
    {{ form|without('title', 'body', 'advanced', 'footer', 'actions') }}
  </div>
  <div class="layout-region layout-region-node-secondary solo-padding">
    {{ form.advanced }}
  </div>
  <div class="layout-region layout-region-node-footer solo-padding">
    {{ form.footer }}
    {{ form.actions }}
  </div>
</div>

This gives you full control over the layout, grouping, and appearance of the node edit form per content type in your Solo-based sub-theme.

Best wishes,
Alaa

You are welcome!