Okay
  Public Ticket #2194731
Styling the Editor Form
Closed

Comments

  • Caroline started the conversation

    I would like to style the form that is opened for editing and adding new entries in a table:

    • Remove some of the buttons ("priv", "next" and "apply and add new".
    • Change the font size for the labels and input fields.

    I know, this can be done by CSS but I'm not able to find a documentation on how the fields are called.

    Can you assist me here or point me to the documentation of these fields?

    Thank you very much,

    Caroline

  •  2,572
    Aleksandar replied

    Hello Caroline.

    Thank you for your purchase.

    Unfortunately, there is no documentation about this, since it is a custom solution, but I can tell you here how you can do that:

    To hide the "Apply and add new", "Prev" and "Next" buttons, you need to add the following CSS to your Custom CSS field in main settings of wpDataTables:

    .wdt-apply-edit-button {
    display: none !important;
    }
    .wdt-prev-edit-button {
    display: none !important;
    }
    .wdt-next-edit-button {
    display: none !important;
    }
    

    This will just hide the button from front-end, but anyone who knows a thing or two about CSS can inspect the page and enable it again.

    I don't know if you'll find it useful to hide it for all your tables, but if you do, here's how to remove it from the modal completely:

    Open ../wp-content/plugins/wpdatatables/templates/frontend/edit_dialog.inc.php and around line 158 find these lines of code:

    <button id="<?php echo $this->getId() ?>_prev_edit_dialog" class="btn bgm-gray btn-icon-text waves-effect wdt-prev-edit-button">
            <i class="zmdi <?php if(in_array($currentSkin, $skinsWithNewEditButtons )) { echo 'zmdi-chevron-left'; } else { echo 'zmdi-skip-previous'; }?>"></i>
            <?php _e('Prev', 'wpdatatables'); ?>
        </button>
        <button id="<?php echo $this->getId() ?>_next_edit_dialog" class="btn bgm-gray btn-icon-text waves-effect wdt-next-edit-button">
            <?php _e('Next', 'wpdatatables'); ?-->
            <i class="zmdi <?php if(in_array($currentSkin, $skinsWithNewEditButtons)) { echo 'zmdi-chevron-right'; } else { echo 'zmdi-skip-next'; }?>"></i>
        </button>
        <button id="<?php echo $this->getId() ?>_apply_edit_dialog" class="btn btn-success btn-icon-text waves-effect wdt-apply-edit-button">
            <i class="zmdi <?php if(in_array($currentSkin, $skinsWithNewEditButtons)) { echo 'zmdi-check-circle'; } else { echo 'zmdi-check';  }?>"></i>
            <!--?php _e('Apply and add new', 'wpdatatables'); ?-->
        </button>
    

    Just comment them, so they look like this:

    //    <button id="<?php echo $this->getId() ?>_prev_edit_dialog" class="btn bgm-gray btn-icon-text waves-effect wdt-prev-edit-button">
    //        <i class="zmdi <?php if(in_array($currentSkin, $skinsWithNewEditButtons )) { echo 'zmdi-chevron-left'; } else { echo 'zmdi-skip-previous'; }?>"></i>
    //        <?php _e('Prev', 'wpdatatables'); ?>
    //    </button>
    //    <button id="<?php echo $this->getId() ?>_next_edit_dialog" class="btn bgm-gray btn-icon-text waves-effect wdt-next-edit-button">
    //        <?php _e('Next', 'wpdatatables'); ?-->
    //        <i class="zmdi <?php if(in_array($currentSkin, $skinsWithNewEditButtons)) { echo 'zmdi-chevron-right'; } else { echo 'zmdi-skip-next'; }?>"></i>
    //    </button>
    //    <button id="<?php echo $this->getId() ?>_apply_edit_dialog" class="btn btn-success btn-icon-text waves-effect wdt-apply-edit-button">
    //        <i class="zmdi <?php if(in_array($currentSkin, $skinsWithNewEditButtons)) { echo 'zmdi-check-circle'; } else { echo 'zmdi-check';  }?>"></i>
    //        <!--?php _e('Apply and add new', 'wpdatatables'); ?-->
    //    </button>
    

    and that will remove them from the "New Entry" modal.

    To change the size of the labels inside the dialog, please use this CSS:

    .wpdt-c .wdt-edit-dialog-fields-block {
    font-size: 20px !important;
    }
    

    And to change the font size for the input fields, you can use this:

    .wpdt-c .input-sm {
    font-size: 20px !important;
    }
    

    I hope this helps.

    Kind Regards, 

    Aleksandar Vuković
    [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

  • Caroline replied

    Hello Aleksandar,

    Thank you for your reply, this worked like a charm.

    Thanks again,

    Caroline

  •  2,572
    Aleksandar replied

    You're welcome, Caroline

    If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.


    Kind Regards, 

    Aleksandar Vuković
    [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