I want to customize CSS in Laravel Backpack.

[avinashtelsa]

Hello,
I have used tags to add & update time. I want to color the selected tags differently. I tried adding custom CSS in config >> backpack >> ui.php like this:

'styles' => [
'public/css/backpack-custom.css',
],

backpack-custom.css
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
background-color: #337ab74f;
color: #262626;
}

.select2-container--bootstrap .select2-results__option {
padding: 6px 12px;
margin-bottom: 1px;
}

But even after writing custom CSS in backpack-custom.css, it didn't work. Can you please tell me how I can customize CSS?

[jcastroa87]

Hello @avinashtelsa

If you are using a theme you should add your custom styles along with the theme ones.
Example in config/backpack/theme-tabler.php

'styles' => [
        base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
        base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
        'css/backpack-custom.css',
    ],

Btw if your file is in public/css/backpack-custom.css, you should write the path without the "public"

Have a look a the docs https://backpackforlaravel.com/docs/6.x/base-themes#theme-configs-1

Cheers.

[avinashtelsa]

Hello,

Thank you for replying.

However, this didn't work either. I have attached a picture. I want to change the color of the selected tags as shown in the image.

[jcastroa87]

Can you share the theme you are using and the CSS code you are trying to customize?

Cheers.

[avinashtelsa]

Hello, thank you for the reply.

I am using the Tabler theme and I am writing this CSS to change the color of selected tags.

.select2-container--bootstrap .select2-results__option[aria-selected=true]{
background-color: #337ab74f;
color: #262626;
}

.select2-container--bootstrap .select2-results__option {
padding: 6px 12px;
margin-bottom: 1px;
}

[jcastroa87]

I was able to do it, here the steps:

1. Create file public/css/backpack-custom.css
2. Add you CSS code:

.select2-container--bootstrap .select2-results__option[aria-selected=true]{
    background-color: red!important;
    color: #262626!important;
}

.select2-container--bootstrap .select2-results__option {
    padding: 6px 12px;
    margin-bottom: 1px;
}

3. In config/backpack/theme-tabler.php add the custom css file to styles:

'styles' => [
        base_path('vendor/backpack/theme-tabler/resources/assets/css/color-adjustments.css'),
        base_path('vendor/backpack/theme-tabler/resources/assets/css/colors.css'),
        'css/backpack-custom.css',
    ],

Here the result

Cheers.

[avinashtelsa]

Hello,

The color change worked with your code, but maybe I did the same thing on that day and the color wasn't changing. Anyway, thank you so much for your help :)

[pxpm]

I think the major difference is the usage of !important.

It's highly possible we use !important somewhere up the css chain, and only by providing !important in your custom rules, it does the proper override.

Just wanted to let you know that it may happen again in other similar scenarios. 🙏

[jcastroa87]

Glad you solve the problem. I will close the issue, but please feel free to re-open or create a new one if needed.

Cheers.