Duplicating Table Styling Via CSS

  • Resolved cwhitley0530

    (@cwhitley0530)


    7 years, 9 months ago

    Hello,

    As I am not savvy with CSS myself, I found the following styler that can help you generate CSS code. https://divtable.com/table-styler/

    I was hoping to use the styling for the blue table option on my tablepress table. However, upon updating the template CSS with my tablepress ID in the custom CSS section, the updates did not translate.

    Please let me know at your earliest convenience if there is a way to use the table styling form the link above, and if so, is updating it with my tablepress ID not enough?

    Thank You

    • This topic was modified 7 years, 9 months ago by cwhitley0530.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 9 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    Using this CSS should work, in general. A quick way to apply most of it would be to add blueTable to the “Extra CSS classes` field on the table’s “Edit” screen.

    Regards,
    Tobias

    Thread Starter cwhitley0530

    (@cwhitley0530)

    7 years, 9 months ago

    I added blueTable to the “Extra CSS Classes” within the targeted table. As for the template source code, would I leave it as:

    table.blueTable {
    border: 1px solid #1C6EA4;
    background-color: #EEEEEE;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    }

    Or, would I have to change it to:

    table.tablpress-id-2 {
    border: 1px solid #1C6EA4;
    background-color: #EEEEEE;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    }

    I believe my confusion is with the first line in designating the table. Do I keep the source language, merge the two, or update it to table.tablepress?

    Thanks for the prompt reply!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    7 years, 9 months ago

    Hi,

    if you add blueTable to the “Extra CSS classes”, you will actually not have to modify the CSS.

    Instead of adding blueTable to the “Extra CSS classes”, your other suggested approach would however also work (just make sure to not add typos like “tablpress”).

    In both cases however, the CSS might need adjustments for elements that use different HTML/selectors, like the pagination or row/column classes. For that, I recommend to check the documentation at https://tablepress.org/faq/documentation-css-selectors-styling/ which explains what CSS classes TablePress adds to tables.

    Regards,
    Tobias

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Duplicating Table Styling Via CSS’ is closed to new replies.