DEV Community

loading...
Cover image for Customize the Laravel notifications template.

Customize the Laravel notifications template.

Ariel Mejia
Fullstack/Mobile developer, Laravel and Flutter enthusiast.
・1 min read

This is a little tip but very helpful to customize the notifications layout the Laravel docs explain this command:

php artisan vendor:publish --tag=laravel-notifications
Enter fullscreen mode Exit fullscreen mode

Now in "resources/views/vendor" you can edit the markdown template layout.

But what if I need to customize the colors and other CSS of the template, well Laravel provides a command to publish this assets:

php artisan vendor:publish --tag=laravel-mail
Enter fullscreen mode Exit fullscreen mode

Now in "resources/views/vendor/mail/html/themes/default.css"

Here we can customize the CSS to brand the notifications.

Little tips:

  • To customize the header link:
.header a {
    color: #3d4852;
    font-size: 19px;
    font-weight: bold;
    text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode
  • To customize the button "primary":
.button-primary {
    background-color: #2d3748;
    border-bottom: 8px solid #2d3748;
    border-left: 18px solid #2d3748;
    border-right: 18px solid #2d3748;
    border-top: 8px solid #2d3748;
}
Enter fullscreen mode Exit fullscreen mode

Of course you can customize the error action and success action, just below.

Thanks for reading!

Discussion (0)