How to make Forms Horizontal in PyroCMS

Dali PyroCMS PyroCMS Forms


If you want to turn your forms into this:


then follow me here.. 


1) Override view files globally

With the latest Streams update, it's possible to override view files globally. We will override 2 streams view file to make our forms horizontal.

Open up your config/streams.php file and add the following lines:

'overrides' => [
    'streams::form.form'             => 'overrides/form-form',
    'streams::form.partials.wrapper' => 'overrides/form-partials-wrapper'
]


Download the following files in your resources/views/overrides folder: 

form-form.twig
form-partials-wrapper.twig


2) Add css for horizontal form

In this step, I assume you already have made a copy of the current pyrocms admin theme. If you haven't, you can still continue, but in the next composer update, your changes may be overwritten.

I already prepared a sass file for you. Create a folder name custom in your theme's resources/scss directory and download the following file into it:
_form-horizontal.scss

Next, open up the file  resources/scss/theme.scss in your pyrocms admin theme folder, and add the following lines to the bottom:

// Custom Styles
@import "custom/form-horizontal";


3) Clean up and give it a try

Type the following in your projects root folder:

php artisan assets:clear

php artisan twig:clean

Refresh your page, and now you should be seeing your forms in horizontal mode.

If you see no difference, your streams platform version may be out of date, which does not include the feature to override view files globally.

Check vendor/anomaly/streams-platform/src/View/ViewComposer.php 
You should be seeing a line containing: ...config('streams.overrides').....

If not, then run composer update and try again