Okay
  Public Ticket #1632027
wpDataTables - Table Settings
Open

Comments

  •  6
    Gary started the conversation

    Hello Team,

    For the WordPress Table created with wpDataTables WordPress table plugin on the https://wpdatatables.com/ home page:

    • What font is selected under wpDataTables > Settings for the Table?
    • Where is the Font & Size setting used for Export, Show Entries & Search?
    • How do you get a border around the Search & Genre & Studio filters?
    • Where is the arrow type setting for Rank?

    Regards,

    Gary

  •  443
    Bogdan replied

    Hi Gary,
    Thank you for your purchase.

    • What font is selected under wpDataTables > Settings for the Table?

    The font that is used here is for the main cells in the table

    • Where is the Font & Size setting used for Export, Show Entries & Search?

    As you can see from our documentation table tools ( export files)  functionalities are based on a 3rd party HTML5 library. There are some limitations in this library as you can see from our link above.

     

    • How do you get a border around the Search & Genre & Studio filters?

    Probably something like this can be achieved with some CSS styling of the table. If you have some link of the table please send me so I can give you an example.

    • Where is the arrow type setting for Rank?

    Sorry but I did not quite understand this request, can you please explain me more or send me some example/screenshot so I can take a look and give you my suggestion.

    Best regards.

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •  6
    Gary replied

    Hello Bogdan,

    Thank you for the response, although the questions related to what options were selected under wpDataTables > Settings to format the example on the https://wpdatatables.com/ home page.

    For example, it appears that the font used is Roboto, but i doesn't seem to appear under wpDataTables > Settings > Color and Font Settings > Fonts.

    Please find attached a screenshot of your example and numbers corresponding to my questions.

    Regards,

    Gary.

    Attached files:  Capture.PNG

  •  443
    Bogdan replied

    Hi Gary,

    You are right the font that is used is Roboto as you can see from the attachment.

    Unfortunately we do not have that font to choose in the wpdatatables settings page but I can give you some suggestion.

    Try to add this code in Custom wpDataTables CSS under the "Custom JS AND CSS" in main settings of wpdatatables.

    table.wpDataTable tbody tr, table.wpDataTable thead tr
    {font-family:Roboto !important}

    Our landing page is made out of the WordPress so there are some settings that are not available from the main plugin.

    Best regards.

    Attached files:  Screen Shot 2018-07-12 at 11.48.31 AM.png

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •  6
    Gary replied

    Hello Bogdan

    1. Thank you!

    2. What Font and Size or code is used for Export, Show Entries & Search sections?

    3. How do you get a border around the Search?

    4. Where is the arrow type setting for Rank?

    Regards,

    Gary.

  •  443
    Bogdan replied

    Hi Gary,

    2.

    This is settings for the table tools are from our Light skin that you can find in the wpdatatbles settings page. Also you can inspect the element in the browser by clicking the right mouse click and open a console where you can see all of the code that is applied for desired elements.

    3.

    Probably something like this can be achieved with some CSS styling of the table. If you have some link of the table please send me so I can give you an example.

    4.

    Sorry but I did not quite understand this request, can you please explain me more or send me some example/screenshot so I can take a look and give you my suggestion.

    Best regards.

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •   Gary replied privately
  •  443
    Bogdan replied

    Hi Gary,

    2 and 4

    This is how the table looks like in the backend ( attachment 1)

    This is the material skin from the settings page. 
    If you set this skin you will have arrow and the look of the table like from our landing page.

    3.

    As I can see this is your table ( attachment 2)

    If  you change the skin to Material the table will look like this ( attachment 3)

    You can change the skin in the wpdatatables settings page ( attachment 4) 

    I changed it for you so you can check it out.

    Best regards.

    Attached files:  Screen Shot 2018-07-18 at 12.55.22 PM.png
      Screen Shot 2018-07-18 at 12.53.27 PM.png
      Screen Shot 2018-07-18 at 12.57.49 PM.png
      Screen Shot 2018-07-18 at 12.58.17 PM.png

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •  6
    Gary replied

    Hello Bogdan,

    Thank you very much, the change from Light to Material skin was the answer!. With the Material skin there appears to be CSS code for the font size to be 13px, including the Table Title, where the Light and Graphite skins appear to use H2 from the theme. Is this expected behaviour and can we have the Material skin retain the H2 theme setting?

    3. The last question is the border around the Search box on your landing page, which i believe you indicated is "Probably something like this can be achieved with some CSS styling of the table. If you have some link of the table please send me so I can give you an example.". Do you have an example and i'll explore applying this to other elements like the Show entries and Filters.

    Regards,

    Gary.

  •  443
    Bogdan replied

    HI Gary,

    In order to chagne this you must change some of the plugin files.

    For example in .../wp-content/plugins/wpdatatables/assets/css/wdt-skins/material.css or any other desired skin.

    As for the search bar:

    You just need to inspect the element and get the selector for the search box.

    This is the selector and the CSS from the landing page

    #demotable .dataTables_filter input{
    margin-left: 5px;
    border: 1px solid;
    }

    I assume that it is not the same selector as yours so if you have any link of the table on your site please send me.

    Best regards.

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •   Gary replied privately
  •  443
    Bogdan replied

    HI Gary,

    That is not an empty value, the select box design is like that to have value which in this case is used for "deselect" the currently selected filter.

    About the borders can you just point me out on some screenshot what you want to achieve.

    Best regards.

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •   Gary replied privately
  •  443
    Bogdan replied

    HI Gary,

    The clear filters button will clear the filters and for select box will set the empty value ( which is the blank value) This can be removed but it will require some code customization.

    For the borders you can use this code

    div#table_1_0_filter{
    border: 1px solid;
    }

    In that case the select box will look like this ( attachment)

    Best regards.

    Attached files:  Screen Shot 2018-07-23 at 4.49.37 PM.png

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •  6
    Gary replied

    Hello Bogdan,

    What would be the cost for the code customisaton?

    Thank you for the code snippet, exactly what we were after. Where did you save it, so i can understand how it works and how to apply it to other tables?

    Regards,

    Gary.

  •   Bogdan replied privately
  •   Gary replied privately
  •  443
    Bogdan replied

    Hi Gary,

    Unfortunately for the server side tables this is not possible to achieve. The bootstrap (which we are using to show the select box ) is adding this option by the default so it is not possible to delete it.

    For the non server side tables it is possible just to comment some line of codes and the first option in the select box will not be shown.

    Best regards.

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •  6
    Gary replied

    Hello Bogdan,

    Thank you for the update.

    Alternatively the Checkbox doesn't include the empty value option by default, but when we select "show filters in a form above the table", is it possible to 'collapse' all the checkbox options under the filter, similar to the Selectbox or when the Checkbox is under the table?

    Regards

  •  443
    Bogdan replied

    Hi Gary,

    If you turned on Filter in form option then you can set the option to Render in modal filters ( attachment 1) 

    In that chase the filter will look like this ( attachment 2 and 3) 

    Best regards.

    Attached files:  Screen Shot 2018-07-25 at 2.55.18 PM.png
      Screen Shot 2018-07-25 at 2.55.58 PM.png
      Screen Shot 2018-07-25 at 2.56.18 PM.png

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •  6
    Gary replied

    Hello Bogdan,

    You are a superstar!

    Checkbox + Modal Render removes the empty vale option + border around the filter + a filter symbol.

    Thank you!

    Regards.

  •  443
    Bogdan replied

    HI Gary,

    The pleasure is all mine, you are welcome.

    If you like our plugin and support we'd greatly appreciate it if you could take a minute and leave a Review on CodeCanyon on this link. It means a lot to us. Thanks.

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •  6
    Gary replied

    Hello Bogdan,

    In your post on 19 July, you mention changing plug-in files, for example .../wp-content/plugins/wpdatatables/assets/css/wdt-skins/material.css.

    When the core plug-in is updated, are these files over-written or are changes retained?

    Regards.

  •  443
    Bogdan replied

    Hi Gary,

    Yes every change in the core plugin files will be overwritten by the update.

    Best regards.

    Check out our new Support Help Center!

    Check out our newest product - Amelia - Enterprise-Level WordPress Appointment Booking Plugin - promo price for launch period!

    Kind Regards,
    Bogdan Radusinovic
    bogdan@touchmesoft.net

  •  6
    Gary replied

    Hello Bogdan,

    After working through the Filter types with the client and since nearly all our tables are non-server side tables, can you please share "For the non server side tables [where] just to comment some line of codes and the first option in the select box will not be shown." that you mention in your rely on .

    FYI, the client UX behind this:

    • Checkbox doesn't have the empty value but doesn't display what has been selected, like Selectbox and Multiselectbox
    • Multiselectbox doesn't have the empty value but allows the user to select multiple values, which is confusing  / misleading
    • Selectbox empty value is currently being selected by users and displaying ALL filters, which is causing frustration

    Thanks as always!