Customise "Save" Button Color inside a Modal

Ask the community
1

Hi All,

I am using the new Action Buttons to edit a record in Airtable. When the modal opens, there’s a ‘cancel’ and ‘save’ button. It seems like these have default Softr style, and unless I’m mistaken there’s no way to change this natively?

Does anyone know what selectors we need to target to change the colour of the ‘save’ button, along with the after click button ‘save loading’ version of the button?

Thanks.

2

Hey @EnigmaXXIII, can you please share a screenshot oof those buttons so that I can help you?

3

@Marine.Hovhannisyan sure, please see the screenshots below…

Screenshot 2023-05-20 at 09.12.42
Screenshot 2023-05-20 at 09.12.42595×604 32.9 KB

Screenshot 2023-05-20 at 09.12.49
Screenshot 2023-05-20 at 09.12.49583×597 31.3 KB

I’m currently selecting the main button using .css-128nx5f, but it does not work for the version that appears after the button is clicked. I cannot seem to find the selector for that part. Am I missing something?

These are in the edit record action button modal by the way.

Thanks.

4

@Marine.Hovhannisyan any updates on this?

5

@Marine.Hovhannisyan do you have any updates on this please? Should I contact someone via the chatbox instead?

6

Hi,

<style>
#list-details1 .MuiDialogActions-root .MuiButtonBase-root {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}
</style>

:point_up_2: This is the code you need with the right selector.

It only deals with the text color but you know that to change the background color you just need to add background-color: #xxxxxx; below or above the color: line.

If you want to change the color of all the buttons of your block, then :point_down:

<style>
#list-details1 .MuiButtonBase-root {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}
</style>

If you only want to change the color of the save button (which is the second button inside the modal for action button) :point_down:

<style>
#list-details1 .MuiDialogActions-root .MuiButtonBase-root:nth-child(2) {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}
</style>

You only need to change list-details1 by the ID of your block where the modal comes from

If you only want to change the text color (and not the background of the button) just remove the line with background-color in it

To change the color of the cancel button, on the left of the save button this should be this code:

<style>
#list-details1 .MuiDialogActions-root .MuiButtonBase-root:nth-child(1) {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}
</style>
2 Likes
7

Thanks, @matthieu_chateau for the custom code and the detailed explanation.

@EnigmaXXIII Indeed, we do not have a feature to change that button background and text colors natively added to our app but the code Mattieu provided works as expected.

8

@matthieu_chateau I copied/pasted the code inside the header but it didn’t work (I added my brand color). Also, I checked it inside the footer but nothing happened.
Any idea?
Thanks!

10

Hi!

Okay I tested it and I updated the post above with better explanation and different css code (it should work with any dynamic block by the way)

11

Also,

If you want to add a border and a on-mouse-hover version =>

As always: change the colors (#xxxxxx) and list1 by the id of your block

The code below is only for the save/right button but the logic is exactly the same for the cancel/left button (:nth-child(1))

#list1 .MuiDialogActions-root .MuiButtonBase-root:nth-child(2) {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important; /* 2px is the size of the border. 1px for a thiner border */
}

#list1 .MuiDialogActions-root .MuiButtonBase-root:nth-child(2):hover {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}
1 Like
12

Thanks @matthieu_chateau . It’s working now :grinning: