Style & Visual Theme
Custom colors
The primary color is customisable, and is applied to the header and buttons. Although every hue works well, too light colors aren't supported (e.g. works well with tailwind colors >= 600).
// config/sharp.php
return [
// [...]
'theme' => [
'primary_color' => '#004D40',
],
];// config/sharp.php
return [
// [...]
'theme' => [
'primary_color' => '#004D40',
],
];Login and menu logos
By default, the config('sharp.name') is displayed on the login page and on top of the menu. You can if you wish display images instead: Sharp will look for PNGs named login-icon.png and menu-icon.png, in a /public/sharp-assets/ directory. Note that :
login-icon.pngis limited to 200 pixels in width and 100 pixels in height,- and
menu-icon.pngmust fit in 150 pixels in width and 50 pixels in height.
If you need to configure the image files URLs, you can do it with this config:
// config/sharp.php
return [
// [...]
'theme' => [
'primary_color' => ...,
'logo_urls' => [
'menu' => '/sharp/subdir/my-custom-menu-icon.png',
'login' => '/sharp/subdir/my-custom-login-icon.png',
],
],
];// config/sharp.php
return [
// [...]
'theme' => [
'primary_color' => ...,
'logo_urls' => [
'menu' => '/sharp/subdir/my-custom-menu-icon.png',
'login' => '/sharp/subdir/my-custom-login-icon.png',
],
],
];Display a custom message on login page
You can display a custom content under the form on login page; you'll need to create a new template file:
<!-- resources/views/sharp/_login-page-message.blade.php -->
<div class="alert alert-info">
Display a custom message to your users
</div><!-- resources/views/sharp/_login-page-message.blade.php -->
<div class="alert alert-info">
Display a custom message to your users
</div>And then define the path to this custom blade in the config/sharp.php config file:
// config/sharp.php
return [
// [...]
'login_page_message_blade_path' => 'sharp/_login-page-message',
];// config/sharp.php
return [
// [...]
'login_page_message_blade_path' => 'sharp/_login-page-message',
];Favicon
You can define an URL for a favicon that Sharp will use in the config:
// config/sharp.php
return [
// [...]
'theme' => [
'favicon_url' => '/sharp-img/favicon.png',
],
]// config/sharp.php
return [
// [...]
'theme' => [
'favicon_url' => '/sharp-img/favicon.png',
],
]Injecting Assets
You may globally inject custom CSS files after the Sharp assets by defining their paths in the config/sharp.php config file.
// config/sharp.php
return [
// [...]
'extensions' => [
'assets' => [
'strategy' => 'raw',
'head' => [
'/css/inject.css', // Outputs <link rel="stylesheet" href="/css/inject.css"> after sharp assets
],
],
],
];// config/sharp.php
return [
// [...]
'extensions' => [
'assets' => [
'strategy' => 'raw',
'head' => [
'/css/inject.css', // Outputs <link rel="stylesheet" href="/css/inject.css"> after sharp assets
],
],
],
];The comment next to the item within the head position show how the output would appear in the HTML.
Strategy
The strategy defines how the asset path will be rendered
rawto output the path in the form it appears in your arrayassetto pass the path to the laravelasset()functionmixto pass the path to the laravelmix()functionviteto pass to path to the laravelVite::asset()function