According to the data in front of us, a Magento2 team ,thought a lot about finding solutions to reduce the coherent between the various parts of the system , and think about how segment the configuration files, first to not fall into the same first version problems, sometimes you find in front of you a huge file nested and difficult to reading and editing, and secondly to focus all his art in his specialty .
In Backend now we have for example the menu.xml for creating your custom menu in left side of Magento 2 admin .
We consider already you started your custom module ! Ok inside etc/adminhtml create the file menu.xml and put :
Ok almost now you are finished but what is that? , simple the first line :
Is the root parent of your custom menu because is not related to any parent, this first tag is your root , try to find a propriety parent ? , the title equal what you want show as title for root tag , id need be unique , the resource you needed inside acl.xml (when you want manage permission for your module ) , magento show in the left for navigation like sales , products ...
second :
Is a child of the to id Ibnab_MageUnslider::mageunslider, if you see parent="Ibnab_MageUnslider::mageunslider" ; you can consider as container for your links
Third :
Wow finaly your click-able link , it's the child of container Ibnab_MageUnslider::mageunslider_mageunslider , with propriety action="mageunslider/sliders" ,
the mageunslider is the fontName of admin you can find in etc/adminhtml/routes.xml , sliders is a folder inside Controller/Adminhtml , magento give you the default action Index.php (the file contain the execute() function) , but you can add the name explicitly like action="mageunslider/sliders/edit"
you can create your controller and layout and other part for showing the result in content container for admin.
But the big question is How I can change the default font Icon in menu admin :
1 – Graphic work
Magento 2 adding by default custom icon when you add your custom menu but many company and developers prefer add custom menu for bundled all him extensions inside this menu, for cool visibility .
We stared now by creating custom icon example .svg with inkscape (open source soft for creating vector try man !) , Now go IcoMoon.io and download custom icon .svg open in inkscape resize you icon to this and save your icon with .svg , return IcoMoon.io upload your icon and export font .
Now you have a zip file with all font and demo for how use copy (icomoon.eot, icomoon.svg ,icomoon.ttf , icomoon.woff) go to lib/web/fonts create your folder in our example Ibnab and paste all docs , woooooooooow , we finish the part graphic design .
2 – injected him inside Magento 2 without touching the core files:
we want add this icon in admin side ok your module is Ibnab_Unislider , go to app/design/adminhtml/Magento/backend and create folder with name Ibnab_Unislider and inside him create folder with name web and inside web create css and inside css create source and inside source create file _module.less you have now Ibnab_Unislider /web/css/source/_module.less
Why we create this file ? Simple because we won't touching the core file , for that we use the default technique of Magento 2 , if you go to styles.less inside app/design/adminhtml/Magento/backend\web\css you will find inside him //@magento_import "source/_module.less"; // import theme styles
that equal go to all less inside folder like Magento_Catalog or our folder Ibnab_Unislider and import all files inside web/css/source with name _module.less and include to styles.less the base file of all adming part (that cool the directive is related to Magento 2 any relation with default less technique) .
Now inside your file _module.less add this lines :
what's this ?! We import our fonts whit .less you can declare variable and use function ,
@ibnab-icons-admin__font-name-path: '@{baseDir}fonts/Ibnab/icomoon';
@ibnab-icons-admin__font-name : 'Ibnab';
our path and our font name now we use the function :
.lib-font-face(
@family-name:@ibnab-icons-admin__font-name,
@font-path: @ibnab-icons-admin__font-name-path,
@font-weight: normal,
@font-style: normal
);
and we finish with :
.admin__menu .item-mageunslider.parent.level-0 > a:before {
font-family: @ibnab-icons-admin__font-name;
content: "\e800";
}
for our custom class . the other question how Magento 2 create this class simple :
are your if you go to menu.xml and see the root tag add
see the id Magento take the last word after ':: ' here is mageunslider and add the name to <li> html parent of <a > tag the class result is class='item-mageunslider parent level-0'
now refresh the page admin yes any change , you need processed LESS how this ?
The architecture of Magento 2 take all less and preprocessed inside var/view_preprocessed after that publish all public files in our example inside pub/static/adminhtml/Magento/backend/en_US
for that take this 3 commands(from root magento2):
rm -rf var/view_preprocessed/
rm -rf pub/static/adminhtml
php bin/magento setup:static-content:deploy
the last is for deploy (that is from server side in mode dev) ..
now refresh the page admin yeeeeeees you have you custom icon , if you go to pub/static/adminhtml/Magento/backend/en_US you will all css fonts and js results ..
Comments