Customize the look of the border of the EDIT modal

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)

#blockID .MuiPaper-root {
  background-color: #FFEEEE;
  border-radius: 6px;
  border: 3px solid #A6C2EA;

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

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

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

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.

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