Can't create a custom theme - what am I doing wrong? (V6)

[emogeekface]

Hi,

I've followed the documentation for creating a custom theme here: https://backpackforlaravel.com/docs/6.x/add-ons-tutorial-how-to-create-a-theme however, no matter what I do, it doesn't seem to be picking up my custom code and I'm wondering if I'm doing something wrong or if I need to run any commands to pick up the new code?

I have created a folder called theme-sos in my resources/views folder, and have set my config/backpack/ui.php file to have

'view_namespace' => 'theme-sos::',
'view_namespace_fallback' => 'backpack.theme-coreuiv2::',

I have then copied various files from the coreuiv2 files into my theme-sos folder and changed different bits but nothing is being taken through to my site.

Things I have tried:

• Changing view_namespace to theme-sos
• Changing view_namespace to theme-sos::
• Moving the theme-sos folder into resources/views/vendor/backpack and changing view_namespace to backpack.theme-sos::
• Moving the theme-sos folder into resources/views/vendor/backpack/ui and changing view_namespace to backpack.theme-sos::
• Moving the theme-sos folder into resources/views/vendor/backpack/themes and changing view_namespace to backpack.theme-sos::
• Running npm run dev after each change
• Running artisan config:cache after each change

Nothing seems to work - what am I doing wrong?!

[jcastroa87]

Hello @emogeekface

I followed step by step the tutorial and is working perfectly.

Make sure in config/backpack/ui.php you set "view_namespace" (end dot is very important):

'view_namespace' => 'theme-sos.',

you create a folder with the name of your theme in "resources/views/theme-sos", inside this folder you add the files like this:

Finally, you set resources/views/theme-sos/inc/theme_styles.blade.php:

{{-- You can load files directly from CDNs, they will get cached and loaded from local --}}
@basset('https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css')

{{-- You can also load files from any place in your application directories --}}
@basset(base_path('theme-sos/assets/css/extra.css'))

{{-- You can also write inline CSS blocks --}}
@bassetBlock('theme-sos/custom-styling')
<style>
.something {
    border: 1px solid red;
}
</style>
@endBassetBlock

And resources/views/theme-sos/inc/theme_scripts.blade.php:

{{-- You can load files directly from CDNs, they will get cached and loaded from local --}}
@basset('https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js')

{{-- You can also load files from any place in your application directories --}}
@basset(base_path('theme-sos/assets/css/extra.js'))

{{-- You can also write inline JS blocks --}}
@bassetBlock('theme-sos/custom-scripting')
<script>
 alert('got here');
</script>
@endBassetBlock

Thats all, from here you can customize anything you need to your theme.

Cheers.

[emogeekface]

Thank you, I had done the other steps but I think I was missing the . after the theme name. I'll try this!

[jcastroa87]

Hello @emogeekface

Due to no activity I will close this issue, but if you need to continue you can reopen it or if it is a new issue, you can create a new issue.

Cheers.