Hey there, Awesome Customers!

Just a heads up: We'll be taking a breather to celebrate International Workers' Day (May 1st and 2nd - Wednesday and Thursday) and Orthodox Easter from Good Friday (May 3rd) through Easter Monday (May 6th). So, from May 1st to May 6th, our team will be off enjoying some well-deserved downtime.

During this time, our customer support will be running on a smaller crew, but don't worry! We'll still be around to help with any urgent matters, though it might take us a bit longer than usual to get back to you.

We'll be back in action at full throttle on May 7th (Tuesday), ready to tackle your questions and requests with gusto!

In the meantime, you can explore our documentation for Amelia and wpDataTables. You'll find loads of helpful resources, including articles and handy video tutorials on YouTube (Amelia's YouTube Channel and wpDataTables' YouTube Channel). These gems might just have the answers you're looking for while we're kicking back.

Thanks a bunch for your understanding and support!

Catch you on the flip side!

Warm regards,

TMS

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,498
    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,498
    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