Are you a Magento developer with a need for a custom admin theme and are looking for an easy way to do it? Are you tired of the same old stock Magento admin theme and colors? There is a new freely-available theme that will provide a good starting place for your own theme.
Extra scrolling wastes valuable admin time. And you may want to provide a customized admin area with corporate branding. This theme will help you get there more quickly than starting from scratch.
The Tight Admin Theme provides these features:
• Color reference – An html page with the Magento admin theme displays shows the color variable names and their hex values.
• Tighter spacing – The stock Magento admin theme is very airy with a lot of wasted screen space that forces the user to do unnecessary scrolling. The Tight theme tightens up some of that spacing to make it easier for the admin to navigate. Less scrolling means greater productivity.
• Color changes – Alternate colors have been used and can be changed through a variables file.
• Link colors – Links in the body of the HTML pages and grids have been changed to make them more consistent.
• Admin nav – The spacing on the admin nav columns has been tightened up. If a subnav has many columns it will be more easier to see them without scrolling sideways.
• Minimal footer – Links for bug reporting, privacy policy, and account activity have been removed from the footer and the spacing has been reduced
• Code in git – The Tight admin theme is a provided in a git repository that is easily installed
• Compatibility – The theme has been developed on Magento Community Edition 2.3.4-p1 and released on 1 Oct 2021.
• This a code-based solution. An admin panel that allows some limited modifications is slated for future development.
Customizing the Tight Theme
First, install the Tight Admin Theme using the instructions in the git repository:
https://github.com/elandmannEI/ecomprotight
After the theme is installed, you should see a different admin login screen and a different left-nav admin panel color. Spacing around the header, footer, and admin grids has been tightened up for better navigation. The footer has been modified to display only the Magento copyright and the version.
Switch out the Logos
Logos are located in this folder:
app/design/adminhtml/Ecompro/Tight/web/images
You can either replace the existing file with your logo if you named your logo the same, or you can use your name and change the XML file that calls the logo. That is located here:
Logo on Adminpanel login page:
app/code/Ecompro/Tight/view/adminhtml/layout/admin_login.xml
Adminpanel logo:
app/code/Ecompro/Tight/view/adminhtml/layout/default.xml
Color Variables
There is a provided file that displays the defined color variables. It is located here:
docs/tight_color_names.html
Color variables are defined in a set of LESS files located here:
app/design/adminhtml/Ecompro/Tight/web/css/source/_variables.less
That file calls other LESS files located in the variables folder.
We hope you enjoy the Tight Admin Theme. If you have any feature request, please add them as an Issue to the git repository.
Magento admin theme development links
Here are some helpful links if you are interested in modifying or extending this theme.
Magento Dev Docs: Create an Admin theme
Magento Dev Docs: Apply an Admin theme
Customization
If you are interested in Magento 2 development, please contact us, we offer a free half-hour consulting session.