diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index 4b4c7ccc..5afd6edf 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -1,6 +1,8 @@ # Table of contents * [About Sylius Stack](README.md) +* [Cookbook](cookbook/index.md) + * [How to customize your admin panel](cookbook/admin_panel/index.md) ## Admin UI @@ -9,6 +11,7 @@ ## Bootstrap Admin UI * [Getting started](bootstrap-admin-ui/getting-started.md) +* [Customizing](bootstrap-admin-ui/customizing.md) ## 🍀 Twig Extra diff --git a/docs/cookbook/admin_panel/index.md b/docs/cookbook/admin_panel/index.md new file mode 100644 index 00000000..5540065f --- /dev/null +++ b/docs/cookbook/admin_panel/index.md @@ -0,0 +1,130 @@ +# How to customize your admin panel + +## How to customize the sidebar logo + +To customize the sidebar logo, you need to set new logo template at `sylius_admin.common.component.sidebar.logo` twig hook. +Choose the YAML or the PHP version. + +```yaml +# config/packages/sylius_bootstrap_admin_ui.yaml +# ... +sylius_twig_hooks: + hooks: + # ... + 'sylius_admin.common.component.sidebar.logo': + image: + # template: '@SyliusBootstrapAdminUi/shared/crud/common/sidebar/logo/image.html.twig' + template: 'shared/crud/common/sidebar/logo/image.html.twig' + +``` + +```php +// config/packages/sylius_bootstrap_admin_ui.php +use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator; + +return static function (ContainerConfigurator $containerConfigurator): void { + // ... + + // Add these following lines to define your own Twig template for the logo. + $containerConfigurator->extension('sylius_twig_hooks', [ + 'hooks' => [ + 'sylius_admin.common.component.sidebar.logo' => [ + 'image' => [ + // 'template' => '@SyliusBootstrapAdminUi/shared/crud/common/sidebar/logo/image.html.twig', + 'template' => 'shared/crud/common/sidebar/logo/image.html.twig', + ], + ], + ], + + ]); +}; + +``` + +```twig +{# templates/shared/crud/common/sidebar/logo/image.html.twig #} + +Your Brand name + +``` + +## How to customize the login page logo + +To customize the login page logo,you need to set new logo template at `sylius_admin.security.login.logo` twig hook. +Choose the YAML or the PHP version. + +```yaml +# config/packages/sylius_bootstrap_admin_ui.yaml +# ... +sylius_twig_hooks: + hooks: + # ... + 'sylius_admin.security.login.logo': + image: + # template: '@SyliusBootstrapAdminUi/security/common/logo/image.html.twig' + template: 'security/common/logo/image.html.twig' + +``` + +```php +// config/packages/sylius_bootstrap_admin_ui.php +use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator; + +return static function (ContainerConfigurator $containerConfigurator): void { + $containerConfigurator->import('@SyliusBootstrapAdminUiBundle/config/app.php'); + + // Add these following lines to define your own Twig template for the logo. + $containerConfigurator->extension('sylius_twig_hooks', [ + 'hooks' => [ + 'sylius_admin.security.login.logo' => [ + 'image' => [ + // 'template' => '@SyliusBootstrapAdminUi/security/common/logo/image.html.twig' + 'template' => 'security/common/logo/image.html.twig', + ], + ], + ], + ]); +}; +``` + +```twig +Your Brand name + +``` + +## How to customize the admin menu + +You should decorate the `sylius_admin_ui.knp.menu_builder` service to customize the admin menu. + +```php +factory->createItem('root'); + + $menu + ->addChild('dashboard', [ + 'route' => 'sylius_admin_ui_dashboard', + ]) + ->setLabel('sylius.ui.dashboard') + ->setLabelAttribute('icon', 'dashboard') + ; + } +} diff --git a/docs/cookbook/index.md b/docs/cookbook/index.md new file mode 100644 index 00000000..87b309e8 --- /dev/null +++ b/docs/cookbook/index.md @@ -0,0 +1,3 @@ +# Cookbook + +* [How to customize your admin panel](admin_panel/index.md)