Okay
  Public Ticket #3351045
customize master-detail popup
Closed

Comments

  • PASCAL BOEUF started the conversation

    Hi,

    How to customize the master-delail popup windows like background color, font ... using css ?


    Thank you.


    PAscal

  •  1,819
    Miloš replied

    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:

    * 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;
    }
    4260941685.png


    Let me know if that helps and if you have any further questions.smile.png

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia 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