Customizing CSS | laravel-medialibrary-pro | Spatie SPATIE laravel-medialibrary-pro ======================== spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-medialibrary-pro](https://spatie.be/docs/laravel-medialibrary-pro/v6) Advanced Customizing CSS Version v6 Other versions for crawler [v6](https://spatie.be/docs/laravel-medialibrary-pro/v6) - [ Introduction ](https://spatie.be/docs/laravel-medialibrary-pro/v6/introduction) - [ Requirements ](https://spatie.be/docs/laravel-medialibrary-pro/v6/requirements) - [ License ](https://spatie.be/docs/laravel-medialibrary-pro/v6/license) - [ Getting help ](https://spatie.be/docs/laravel-medialibrary-pro/v6/getting-help) - [ Upgrading ](https://spatie.be/docs/laravel-medialibrary-pro/v6/upgrading) - [ About us ](https://spatie.be/docs/laravel-medialibrary-pro/v6/about-us) - [ ](https://spatie.be/docs/laravel-medialibrary-pro/v6/demo-application) Blade ----- - [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/blade/installation) - [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/blade/usage) Livewire -------- - [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/installation) - [ Attachments ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/attachments) - [ Collection ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/collection) - [ Uploading to S3 ](https://spatie.be/docs/laravel-medialibrary-pro/v6/livewire/uploading-to-s3) React ----- - [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/installation) - [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/usage) - [ Available props ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/available-props) - [ Inertia ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/inertia) - [ Next.js ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/nextjs) - [ Translations ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/translations) - [ Vapor support ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/vapor) - [ Creating custom components ](https://spatie.be/docs/laravel-medialibrary-pro/v6/react/creating-custom-components) Vue.js ------ - [ Installation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/installation) - [ Usage ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/usage) - [ Available props ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/available-props) - [ Inertia ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/inertia) - [ Translations ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/translations) - [ Vapor support ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/vapor) - [ Creating custom components ](https://spatie.be/docs/laravel-medialibrary-pro/v6/vue/creating-custom-components) Security -------- - [ Authorisation ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/authorisation) - [ Configure allowed mime types ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/allowed-mime-types) - [ Rate limiting ](https://spatie.be/docs/laravel-medialibrary-pro/v6/security/rate-limiting) Advanced -------- - [ Customizing CSS ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/customizing) - [ Customize the preview images ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/custom-preview-images) - [ Customize the upload URL ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/customiz-upload-url) - [ Usage in a frontend repository ](https://spatie.be/docs/laravel-medialibrary-pro/v6/advanced/usage-in-a-frontend-repository) Legacy ------ - [ Livewire 2 ](https://spatie.be/docs/laravel-medialibrary-pro/v6/legacy/livewire-2) - [ Laravel Mix ](https://spatie.be/docs/laravel-medialibrary-pro/v6/legacy/laravel-mix) Customizing CSS =============== ### On this page 1. [ Are you a visual learner? ](#content-are-you-a-visual-learner) 2. [ PurgeCSS ](#content-purgecss) 3. [ Changing the order of the sections ](#content-changing-the-order-of-the-sections) If you want to change the look of the Media Library Pro components to match the style of your own app, you have multiple options. Are you a visual learner? --------------------------------------------------------------------------------------------------------------------------------- In this video, you'll see the various option on how to customize the look and feel of the components. Want to see more videos like this? Check out our [free video course on how to use Laravel Media Library](https://spatie.be/courses/discovering-laravel-media-library). ### Option 1: Use your own Tailwind CSS configuration Instead of importing/linking the pre-built `dist/styles.css` from the package, you can import the `src/styles.css` and run every `@apply` rule through your own `tailwind.config.js`. ``` /* app.css */ @import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities"; @import "../../vendor/spatie/laravel-medialibrary-pro/resources/js/media-library-pro-styles/src/styles.css"; … ``` This is exactly what happens in the header of the homepage at [medialibrary.pro](https://medialibrary.pro): the shown component has a slightly blue-ish look, using the color palette of this site. ### Option 2: Override only portions in your CSS If you only want to tinker with certain aspects of the component but like to keep the CSS in sync with future package updates, nothing stops you from overriding only certain CSS rules with your own tweaks. Every DOM-element of the component has a class with prefix `media-library`. Let's say your thumbs aren't square and you want to show them in their original aspect ratio. Inspect the component in your browser to find out that the thumbnail is rendered in the DOM element with class `media-library-thumb-img`. Next, write some extra CSS for this class: ``` /* app.css */ @import "src/styles.css"; .media-library-thumb-img { @apply object-contain; } ``` ### Option 3: Copy the CSS to your own project If you want to go full-option, you can always copy `src/styles.css` to your own project and go wild. In this example we renamed the file to `custom/media-library.css`. Beware: you will have to manually keep this CSS in sync with changes in future package updates. ``` /* app.css */ @import "custom/media-library.css"; ``` One of the many changes we like to do, is detaching the error list at the top and give it rounded corners: ``` /* custom/media-library.css */ .media-library-listerrors { … @apply mb-6; @apply rounded-lg; … } ``` This is what we've done on the Customized Collection demo on [medialibrary.pro/demo-customized-collection](http://medialibrary.pro/demo-customized-collection). Pick a file that is too big to see the error list in effect. PurgeCSS -------------------------------------------------------------------------------- If you're using PurgeCSS, you might have to add a rule to your whitelist patterns. ``` mix.purgeCss({ whitelistPatterns: [/^media-library/] }); ``` Changing the order of the sections -------------------------------------------------------------------------------------------------------------------------------------------------------------- The components have three major sections that are rendered in this order: the validation errors, the items and the uploader. ![Screenshot of component](/docs/laravel-medialibrary-pro/v6/images/sections.png) You can change the order of these sections to be more consistent with your app, without having to create a custom component from scratch. Add the following lines to your CSS, and switch the order of the sections around to your liking. ``` .media-library { grid-template-areas: "uploader" "items" "errors"; } ``` ![Screenshot of component with sections in different order](/docs/laravel-medialibrary-pro/v6/images/sections-order-switched.png)