Drupal GIN Administration Theme
Drupal Gin is a popular theme in the Drupal community. With its clean and modern design, it has gained popularity among developers and website owners. The latest version of Drupal Gin brings several new features that enhance the theme’s functionality and usability.
It should be noted that the Gin Admin theme maintainer, @saschaeggi, is also a contributor to the Claro theme.
The Gin theme offers a wide range of features that I will elaborate one by one.
Appearance
One can change the appearance of the admin interface. There are three modes available:
- Light
- Dark
- Auto
With ‘Light’ mode, light colors will be used for the background and dark colors for the foreground,
With ‘Dark’ mode, dark colors will be used for the background and light colors for the foreground, which may be more comfortable for some people as dark backgrounds are more visible and reduce eye strain.
With ‘Auto’ mode, colors are applied automatically in accordance with an operating system preference mode
Accent color
Accent colors can be used in either Light or Dark mode.
We have the option to choose from a selection of predefined accent colors which will affect the color of HTML elements such as form buttons, input items, labels, select lists, etc.
When a predefined color does not meet your needs, you can create a custom color by selecting the ‘transparent’ option at the end of the list and entering the HEX color reference.
Focus color
This section allows users to change the focus color, there are several options to choose from that are self-explanatory. When you have already selected an accent color, you can use the same color for focusing by choosing the option ‘Same as Accent color’. It will also match the accent color if it is customized.
When a predefined color does not meet your needs, you can create a custom color by selecting the ‘Custom’ option at the end of the list and entering the HEX color reference.
Increase contrast (EXPERIMENTAL)
There is an experimental feature that allows you to toggle between high contrast and low contrast modes. As soon as this feature is enabled, it adds borders to sections of the admin area in order to improve their visibility. In addition to field sets, vertical toolbar menus, forms, tables, and some divisions, borders are applied to certain areas. Both light and dark modes are supported by this feature.
Navigation (Drupal Toolbar)
Four options are available for changing the position of the admin navigation toolbar.
- Sidebar, Vertical Toolbar — This is set by default after enabling the theme. In the ‘Sidebar, vertical Toolbar’ mode, the toolbar is positioned at the left of the screen. At the bottom of the page, there is a left arrow icon that expands the menu and reveals the names of the navigation items. By clicking again, the menu will be collapsed so that only the icons are visible.
- Horizontal, Modern Toolbar: In the ‘Horizontal, Modern Toolbar’ mode, the toolbar is positioned at the top of the screen, which is always visible no matter how the page is scrolled.
- Legacy, Classic Drupal Toolbar: The ‘Legacy, Classic Drupal Toolbar’ displays the old-school style toolbar that is part of the Core component.
- New Drupal Navigation, Test integration — This is new navigation toolbar introduced with the collapsible/expand feature. Technically this option is in experimental mode and require media entity(core). The ‘New Drupal Navigation’ mode positions the toolbar to the left of the screen, along with a collapsible and expandable menu. At the bottom of the page, there is a collapse sidebar that collapse the menu and show only the icons. By clicking again, the menu will expand so that the names of the navigation items are visible.
Show Secondary Toolbar in Frontend
When ‘Show Secondary Toolbar in Frontend’ is enabled, an additional horizontal toolbar will be displayed on the front end of your site. This toolbar will be positioned at the top of your website. To use this option, you must enable the Gin toolbar module. Furthermore, this gin_toolbar module places the same GIN administration menu on the homepage.
Layout Density
Layout density mode will change the height of table rows in the admin area.
There are three modes:
- Default
- Compact
- Narrow
The size changes are so precise but effective; selecting Default will set the row height to 61px, selecting Compact will set the row size to 53px, and Narrow will set the row height to 49px.
You can see this in effect by going to content/user listing section.
Enable form description toggle
When enabled, this feature allows an administrator to toggle the help text which can be defined in a description field for a specific content type. If you wish to toggle the help text, simply edit a piece of content and click the question mark icon.
Users can override Gin settings
There is a premium feature provided by Gin theme that allows administrators and moderators to customize the theme according to their preferences rather than the one set by the developer.
That’s it.
This is an overview of the features and functionality of GIN theme, which will make it easier for developers and marketers to communicate with customers about the benefits of utilising GIN theme as an administration theme.
