Okay
  Public Ticket #2239461
Style & Theme of Data Entry Screen
Closed

Comments

  • Furqan started the conversation

    Dear support,

    I wanted to make some changes to the data entry screen from look and feel to make it consistent with my theme. Can you please guide about the right files and area that I need to look into.

    The idea of changes are illustrated in the attached file.


    One more thing: The data entry fields on my site in in just one column whereas on your sandbox website it shows two text boxes side by side. How can I make similar style?

    Regards,

    Furqan

  •  2,572
    Aleksandar replied

    Hello Furqan.

    What you're trying to do is customization of the plugin, and it is not included in the provided support. I'll give you some pointers, but please note that you may need to tweak this as the CSS applied may not work on your end.

    First, we use the Aqua skin on our websites, and if it contains more columns, the edit modal splits them in two. You can change the skin in main settings of wpDataTables.

    To change "Add new entry" to something else, you need to open ../wp-content/plugins/wpdatatables/source/class.wdttools.php and go to line 363. There you will see this:

    'add_new_entry' => __('Add new entry', 'wpdatatables'),
    

    Change the data in the brackets, but don't change the data before =>.

    To add a border around the modal, and the top strip you can try with this:

    .wpdt-c .modal-content {
    border: 2px solid orange !important;
    border-top: 40px solid orange !important;
    }
    

    And it would look like this:

    8152156086.png

    I'm using the "Dark" skin, so don't mind the color of the modal.

    Then, to style the buttons you need the selectors for each of them:

    .wpdt-c #table_1_apply_edit_dialog {
        font-family: cursive !important;
        font-size: 10px !important;
        color: green !important;
        background-color: wheat !important;
        border: 1px solid red !important;
    }
    button.btn.btn-danger.btn-icon-text.waves-effect.wdt-cancel-edit-button {
        font-family: cursive !important;
        font-size: 10px !important;
        color: green !important;
        background-color: wheat !important;
        border: 1px solid red !important;
    }
    .wpdt-c #table_1_ok_edit_dialog {
        font-family: cursive !important;
        font-size: 10px !important;
        color: green !important;
        background-color: wheat !important;
        border: 1px solid red !important;
    }
    

    So that looks like this in the end:

    4684276619.png

    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

  • Furqan replied

    Thanks you so much.

    Do you have any unlimited bundle offer for your addons.

     

    We actually don’t need it immediately buy I see a need of those later down the road.

    If you can offer a discount now then we can procced to that as well.

     

    Regards,

    Furqan

  •  2,572
    Aleksandar replied

    You're welcome, Furqan.

    Glad I could help.

    Unfortunately we don't yet have any bundle offers, nor do we have lifetime deals for add-ons. Currently, the pricing is as it is. We are planning on creating some bundle offers, but I can't say when they will become available.

    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

  • Furqan replied

    Hi Alex,


    This fix also work but with one exception. It works for the edit dialogue of the first page table only. The second table on the same page still have the same style. 


    .wpdt-c #table_1_apply_edit_dialog {    font-family: cursive !important;    font-size: 10px !important;    color: green !important;    background-color: wheat !important;    border: 1px solid red !important;
    }
    button.btn.btn-danger.btn-icon-text.waves-effect.wdt-cancel-edit-button {    font-family: cursive !important;    font-size: 10px !important;    color: green !important;    background-color: wheat !important;    border: 1px solid red !important;
    }
    .wpdt-c #table_1_ok_edit_dialog {    font-family: cursive !important;    font-size: 10px !important;    color: green !important;    background-color: wheat !important;    border: 1px solid red !important;
    }


  •  2,572
    Aleksandar replied

    Hi again Furqan.

    As mentioned in the previous ticket, just try changing the #table_1 to #table_3, and it should work fine.

    Please let me know if you're having issues with it after that.

    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