Okay
  Public Ticket #3159886
Class Id to style mulitple tables from 1 stylesheet.
Closed

Comments

  • Andrew started the conversation

    Hello,

    Where can I assign a class or id to a .csv table? 

    Recently purchased the WPdatatables plugin and saw that there is an inline css option to style the tables individually, but no apparent way to apply css to a batch of 50+ tables, seperate from another 50+.

    Is there a way to style mulitple tables identically with a class/id from the main style sheet, without affecting other tables.

    If there is another method of doing this in the documentation, please point me to the right section.

    Thank for your assistance.

  •  1,288
    Miloš replied

    Hi, Andrew 

    Sorry for the delay

    -

    In order to add HTML class to cells of our tables,

    there are a couple of different ways.

    1. If you use a String column, you can write custom HTML directly in the the cells of the source CSV. 

    So if you create a HTML div in one or more cells in the source CSV,   and add a class,

    for example, wrap the cell content in HTML div and add a class to it :

    <div class=customClass1>Cell Content</div>

    Then our table would just render the cell content in the cell,

    and you can later call/select this class to add any CSS styles you need in our plugin.

    2. Another way is to add CSS class to columns, in the Display tab of column settings.

    If i have this table, and i want to color the text for cells in column Date;


    3420215863.png

    Then i add the CSS class to the column, in Display tab:

    7751380365.png

    Later, i add this Custom CSS in the table's Custom CSS:

    6083636938.png

    And then we will have the red text in that column ( And in any other column, where we add this class "redfont"

    3412446232.png

    3.  The third way is to use Conditional Formatting.

    You can make a condition,  and if that condition is met,  you can set it to add a class to cell,column, or row;

    Check more details about this here.

    -

    CSS can be added either to individual tables, in the table settings/Customize/Custom CSS,

    or if you want to add the same CSS to all tables,

     you can add it in main plugin settings/Custom JS and CSS,  and this CSS will apply to all tables that have this class.

    3257196458.png

    -

    But you first have to add the HTML class,  in order to add custom CSS to it.

    We currently don't have any built-in way to add custom classes to multiple tables at the same time.

    The only elements that can be styled out of the box, are our "existing default classes" that already exist in tables.

    -

    If you need to add HTML class to multiple cells of multiple CSV files,

    i am not sure if something like that is possible,

    and that is not something that is done by our plugin,

    you would have to search on places such as Stack Overflow, to see if anyone has a workaround to somehow add HTML classes as custom HTML in cells of multiple CSV files.

    Let me know if you have any questions. Thank you

    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

    You can try wpDataTables add-ons before purchase on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •   Andrew replied privately
  •  1,288
    Miloš replied

    Hi, Andrew 

    Thank you for this update in more details about the use-case.

    -

    I think i see what you mean.

    I will ask our level 2 Team if they have any ideas for a workaround that might achieve somehow adding classes in a batch like that, and i will pass their input on the matter as soon as they advise;

    I don't think that we currently have something like that available, but we will check;

    -

    In the meantime, i can try to devise some idea, at least.

    For example, let's say if you want to select all the cells of some specific tables, and change text color in all cells.

    If i just want to select my tables 1, 2 and 3;

    i can then go to main plugin settings/Custom JS and CSS/Custom CSS,  and add this CSS, just for first 3 tables :

    table.wpDataTable.wpDataTableID-1 td{
        color : blue !important;
    } table.wpDataTable.wpDataTableID-2 td{
        color : blue !important;
    } table.wpDataTable.wpDataTableID-3 td{
        color : blue !important;
    }

    6350971370.png

    And that is going to color the text for only the first 3 tables.


    5187747087.png

    So, that might be one way to do it, by selecting the table ID's  through the CSS in the main plugin settings.

    -

    2. 

    To answer the last question - yes,  the Simple Table type has different CSS selectors,

    compared to all other table types.

    The other table types all have same default CSS selectors.


    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

    You can try wpDataTables add-ons before purchase on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •  1,288
    Miloš replied

    Hey, Andrew

    I have an update - we were advised by our senior Team.

    In regards to a CSS selector that would distinguish between a simple table and .csv table :


    The Simple tables have, for example :

    #wpdtSimpleTable-177

    And all other table types have this selector :

    #wpDataTableID-123


    -

    And, the only way to select specific tables that you would apply CSS for,  

    is to make your custom CSS,  and to add tables that you need this CSS applied to,

    by the ID's of the tables.

    Let us know if anything is not clear, and if you have any questions. Thank you

    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

    You can try wpDataTables add-ons before purchase on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •   Andrew replied privately
  •   Miloš replied privately
  • Andrew replied

    Hi Milos, 

    Yes to specify, this code was my attempt at getting the row hover to work because it was not visible.  If you take this specific command out the row hover will still not render on top.  

    .wdt-skin-light table tr:hover
    {
    background-color: #777777 !important; 
    /*--- table highlight ---*/
    }


  •  1,288
    Miloš replied


    Hi, Andrew 

    Sorry for the waiting time.

    Could you please send us a link to a page with any table as an example,

    and we will do our best to work out a working CSS for you? 

    It might be best if we can also see the back-end as well.

    Please provide me a temporary WP-admin (administrator) user for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. 

    We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course, we do not provide login data to third parties. 

    You can write credentials here just check PRIVATE Reply so nobody can see them except us.


    Thank you

    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

    You can try wpDataTables add-ons before purchase on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  •   Andrew replied privately
  •   Miloš replied privately