Customize the look of the border of the EDIT modal

Custom Coding
,
1

Insert this code in the custom code header of the page where the EDIT modal would appear (this is the updated version of June 2023)

<style>
#blockID .MuiPaper-root {
  background-color: #FFEEEE;
  border-radius: 6px;
  border: 3px solid #A6C2EA;
}
</style>

This is also a feature request @artur (for the whole modal, including the font size, weight and color of the edit form inputs and labels)

1 Like
2

NICE ! Where to you find all this css id @matthieu_chateau ? With the Chrome inspector ? :slight_smile:

3

Yes, with the chrome/browser inspector,

Here: to find an element with a class attribute (in the inspector => class=“…”), .modal__container being a class selector that select all elements with the class ‘modal__container’ (in this case, there is just one modal__container)

Though sometimes it’s not sufficient and something must be added to be more precise for the code to work (a block ID for example). I never have the right answer at first! Just multiple iterations each time.

This post is outdated, the original post, above, was updated in June 2023

4

Did not work for me. Tried various combinations of class selectors - none working. For ref.: “Add a note” button on the Webpage

Update: This gave me the idea that the modal container was to be caught hold of. Thanks! btw, the updated class selector is .MuiDialog-container , I eventually modified the buttons on the given webpage.

5

Hi!
Yes, this was for the old edit modal, before action buttons existed. The right selector is not .MuiDialog-container (this is the selector for the exterior background of the modal) but .MuiPaper-root. I will update the code accordingly.

Though using .MuiDialog-container (no .cssxxxx and with #blockId before) is indeed interesting to customize the text of the labels of the modals

For the button customization of the action modals => Customise "Save" Button Color inside a Modal - #6 by matthieu_chateau

1 Like