Comments PASCAL BOEUF started the conversationApril 18, 2023 at 9:20amHi,How to customize the master-delail popup windows like background color, font ... using css ?Thank you.PAscal 1,819Miloš repliedApril 19, 2023 at 7:33pmHi, PAscal. Thanks for reaching out to us. - We are limited with our Support when it comes to customizations, but we can help you get started with some basics. Here are some selectors you can use to manipulate the styles of the Master Details Pop Up Modal. You can experiment and try various CSS properties/styles, place them in the custom CSS on the customize Tab of the Table settings, if you just wish to have specific style for one table; or if you need to apply the same style to all tables, add it in main plugin settings/Custom JS and CSS/Custom CSS: * responsive breakpoint width, if equal or more than 768 px */ @media (min-width: 768px) .wpdt-c .modal-dialog { width: 600px; margin: 30px auto; } @media (min-width: 768px) .wpdt-c .modal-content { -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%); box-shadow: 0 5px 15px rgb(0 0 0 / 50%); } .wpdt-c .modal-dialog { position: relative; width: auto; margin: 10px; text-align: left; display: inline-block; vertical-align: middle; } .wpdt-c .modal .modal-content { box-shadow: 0 5px 20px rgb(0 0 0 / 31%); border-radius: 3px; } .wpdt-c .modal-content { position: relative; background-color: #fff; border: 1px solid transparent; } .wpdt-c .modal-dialog { position: relative; width: auto; margin: 10px; text-align: left; display: inline-block; vertical-align: middle; } /* modal header */ .wpdt-c .modal .modal-header { background: none; padding: 23px 26px; border-bottom: 1px solid transparent; } /* image inside the modal*/ .wpdt-c img { vertical-align: middle; } .wpdt-c img { border: 0; } .wpdt-c .modal .modal-body { padding: 0 26px 10px; } .wpdt-c .modal-body { position: relative; padding: 15px; } This one is for images in the modal - .wpDataTableID-27 th.column-image { width: 200px !important; } - For example, i just tried some of the more detailed CSS for you in our Demo site for one Master Detail table. As you mentioned, i changed the background color to blue, set text to white, changed font-family to cursive : .wpdt-c .modal-content { background-color: blue !important; border: 1px solid transparent; border-radius: 2px; color: white !important; font-family: cursive !important; } Let me know if that helps and if you have any further questions. Kind Regards, Miloš Jovanović[email protected] Rate my support wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community You can try wpDataTables add-ons before purchasing on these sandbox sites: Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables 1 Like Sign in to reply ...
Hi,
How to customize the master-delail popup windows like background color, font ... using css ?
Thank you.
PAscal
Hi, PAscal.
Thanks for reaching out to us.
-
We are limited with our Support when it comes to customizations,
but we can help you get started with some basics.
Here are some selectors you can use to manipulate the styles of the Master Details Pop Up Modal.
You can experiment and try various CSS properties/styles,
place them in the custom CSS on the customize Tab of the Table settings,
if you just wish to have specific style for one table;
or if you need to apply the same style to all tables, add it in main plugin settings/Custom JS and CSS/Custom CSS:
This one is for images in the modal -
-
For example, i just tried some of the more detailed CSS for you in our Demo site for one Master Detail table.
As you mentioned, i changed the background color to blue, set text to white, changed font-family to cursive :
Let me know if that helps and if you have any further questions.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables