In this lesson, we will explore how to change the look of the page's main elements: the logo, colors, layout, and navigation.
Changing the App Name
Your application's default name at the top left, beside the logo, is "Laravel Starter Kit". You can change it in the logo component file.
resources/views/components/app-logo.blade.php:
BEFORE:
<span class="mb-0.5 truncate leading-none font-semibold">Laravel Starter Kit</span>AFTER:
<span class="mb-0.5 truncate leading-none font-semibold">Livewire Tasks</span>Changing the Name COLOR
With the same example, let's change the color with Tailwind, adding a text-blue-800 class.
resources/views/components/app-logo.blade.php
BEFORE:
<span class="mb-0.5 truncate leading-none font-semibold">Livewire Tasks</span>AFTER:
<span class="mb-0.5 truncate leading-none font-semibold text-blue-800">Livewire Tasks</span>Here's the visual result:
Notice: we're running npm run dev in the background to re-compile CSS styles automatically after every change.
Changing the Logo Icon
The logo icon is SVG, so we can change it with...