> For the complete documentation index, see [llms.txt](https://uccello.gitbook.io/doc/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uccello.gitbook.io/doc/customize-your-application/blade-sections.md).
# Blade sections
You can easily use Blade sections to customize your pages. There are two ways to use blade sections:
* When you [override a view](/doc/customize-your-application/overriding.md#override-a-view) and create a new blade file.
* Modifying Uccello layout located at `resources/views/layouts/uccello.blade.php`.
## Common sections
Here the list of blade sections common to all uccello pages:
### Page title
```php
// @yield('title', config('app.name', 'Uccello'))
@section('title', 'My custom page title')
```
### Page name
{% hint style="info" %}
This is principally used by JavaScript for doing lazy loading.
{% endhint %}
```php
//
@section('page', 'index')
```
### Page meta
{% hint style="info" %}
Useful to configure some parameters to use with JavaScript and jQuery!
{% endhint %}
```php
@section('extra-meta')
@append
```
### Favicon
```php
//
@section('favicon')
{{ asset('images/my-favicon.png') }}
@endsection
```
### Base href
```php
@section('base-href')@endsection
```
### Logo
```php
// The link and the image
@section('brand-logo')
@section('logo'){{ Html::image(ucasset('images/logo-uccello-white.png'), null, ['style' => 'max-width: 150px;']) }}@show
@endsection
// Only the image
@section('logo')
{{ Html::image(asset('images/my-logo.png'), null, ['style' => 'max-width: 150px;']) }}
@endsection
```
### CSS files
```php
// For all pages. Put it into resources/views/layouts/uccello.blade.php
@section('css')
{!! Html::style(mix('css/app.css')) !!}
@append
// For specific pages. Thanks to an overriding.
@section('extra-css')
{!! Html::style(mix('css/specific.css')) !!}
@append
```
### CSS classes
```php
//
@section('body-extra-class', 'class1 class2')
```
### Pre-content
{% hint style="info" %}
This is where page header, menu, sidenav, loader... are defined.
{% endhint %}
```php
@section('pre-content')
{{-- @include('uccello::layouts.partials.loader') --}}
@include('uccello::layouts.partials.header.main')
@include('uccello::layouts.partials.sidenav.main')
@endsection
```
### Content container
```php
@section('content-container')
// id="app" can be used by Vue JS
@section('content-class', 'class1 class2')
```
### Content
{% hint style="info" %}
Even if `extra-content` section is not necessary, it can be used to add for example some HTML code at the bottom of the page (e.g. modal content).
{% endhint %}
```php
@section('content')
My page content
@endsection
@section('extra-content')
Extra content
@endsection
```
### Post-content
{% hint style="info" %}
Add custom code after `...`.
{% endhint %}
```php
@section('post-content')
Some code
@endsection
```
### Translations
{% hint style="info" %}
This blade section is useful to add translations used by JavaScript. You could for example use the [thepinecode/i18n](https://github.com/thepinecode/i18n) library and add your translations to the page using this section.
{% endhint %}
```php
@section('translations')
@translations('my_translations')
@endsection
```
### JavaScript files
```php
// For all pages. Put it into resources/views/layouts/uccello.blade.php
@section('script')
{!! Html::script(mix('js/app.js')) !!}
@append
// For specific pages. Thanks to an overriding.
@section('extra-script')
{!! Html::script(mix('js/specific.js')) !!}
@append
```