WordPress.org

Ready to get started?Download WordPress

Forums

TablePress
[resolved] CSS code failing for some tables (8 posts)

  1. andrew.arnison
    Member
    Posted 11 months ago #

    Hi Tobias,
    Great Plugin! I'm finding it really useful.
    I'm having some trouble with some tables I've prepared.
    I have 5 posts that are replicating table structures and CSS styles in each post, but using different data contents.

    I'm finding that my CSS code will apply styles for some tables, but not for others.

    For example, this post http://tariffhound.co.uk/best-iphone-4s-deals/
    uses Tables ID's 5 and 6, and applies the style correctly.

    However this post http://tariffhound.co.uk/best-galaxy-s4-deals/
    uses Table ID's 6 and 7, but fails to apply the CSS code styles.

    When I review my Custom CSS for the tables, the instructions for tables 5,6,7 and 8 are identical, yet tables 6 and 7 aren't being styled.

    Any ideas what might be going wrong?

    My CSS code is below.

    Thanks
    Andrew

    [No need to post lengthy CSS - it's all visible on your site]

  2. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi Andrew,

    thanks for your post, and sorry for the trouble.

    The reason for this is a small typo. There's a closing bracket } missing before the line

    .tablepress-id-8 thead th {

    If you add that, everything should be fine.

    (Also not, that "sans-seref" should be spelled "sans-serif", but that's not related to this issue.)

    Regards,
    Tobias

  3. andrew.arnison
    Member
    Posted 11 months ago #

    Hi Tobias,
    Thanks very much for the response!
    I've added in the missing bracket, and have re-done by font spelling (I'd also mis-spelt Helvetica).

    I've re-loaded and saved the code, but the tables are still not styling correctly.
    http://tariffhound.co.uk/best-galaxy-s4-deals/

    As another piece of information, when I preview the problem tables within the TablePress menu options, the tables style correctly. However when I then view the full post with the tables live, the tables don't style.

    Any ideas why this might be? I've enclosed the new CSS below.

    Many thanks,

    Andrew

    /*---Table header font and colour---*/
    .tablepress-id-1 thead th {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #e8dbec;
    }

    .tablepress-id-2 thead th {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #e8dbec;
    }

    .tablepress-id-3 thead th {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #e8dbec;
    }

    .tablepress-id-4 thead th {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #e8dbec;
    }

    .tablepress-id-5 thead th {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #e8dbec;
    }

    .tablepress-id-6 thead th {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #e8dbec;
    }

    .tablepress-id-7 thead th {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #e8dbec;
    }

    .tablepress-id-8 thead th {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #e8dbec;
    }

    /*---Table body font and colour---*/
    .tablepress-id-1 tbody td {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #ffffff;
    padding: 1px;
    }

    .tablepress-id-2 tbody td {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #ffffff;
    padding: 1px;
    }

    .tablepress-id-3 tbody td {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #ffffff;
    padding: 1px;
    }

    .tablepress-id-4 tbody td {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #ffffff;
    padding: 1px;
    }

    .tablepress-id-5 tbody td {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #ffffff;
    padding: 1px;
    }

    .tablepress-id-6 tbody td {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #ffffff;
    padding: 1px;
    }

    .tablepress-id-7 tbody td {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #ffffff;
    padding: 1px;
    }

    .tablepress-id-8 tbody td {
    font-family: Helvetica Nue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #162334;
    text-align: center;
    background-color: #ffffff;
    padding: 1px;
    }

    /*---Row 2 remove padding---*/
    .tablepress-id-1 .row-2 {
    width: 1px;
    }

    .tablepress-id-2 .row-2 {
    width: 1px;
    }

    .tablepress-id-2 .row-3 {
    width: 1px;
    }

    /*---Column "Minimum cost" turn purple---*/
    .tablepress-id-1 .column-11 {
    padding: 1px;
    background-color: #e8dbec;
    }

    .tablepress-id-2 .column-11 {
    padding: 1px;
    background-color: #e8dbec;
    }

    .tablepress-id-3 .column-8 {
    padding: 1px;
    background-color: #e8dbec;
    }

    .tablepress-id-4 .column-8 {
    padding: 1px;
    background-color: #e8dbec;
    }

    .tablepress-id-5 .column-8 {
    padding: 1px;
    background-color: #e8dbec;
    }

    .tablepress-id-6 .column-8 {
    padding: 1px;
    background-color: #e8dbec;
    }

    .tablepress-id-7 .column-8 {
    padding: 1px;
    background-color: #e8dbec;
    }

    .tablepress-id-8 .column-8 {
    padding: 1px;
    background-color: #e8dbec;
    }

    /***Align columns left***/
    /*---Column 1 align left---*/
    .tablepress-id-1 .column-1 {
    text-align: left;
    }

    .tablepress-id-2 .column-1 {
    text-align: left;
    }

    .tablepress-id-3 .column-1 {
    text-align: left;
    }

    .tablepress-id-4 .column-1 {
    text-align: left;
    }

    .tablepress-id-5 .column-1 {
    text-align: left;
    }

    .tablepress-id-6 .column-1 {
    text-align: left;
    }

    .tablepress-id-7 .column-1 {
    text-align: left;
    }

    .tablepress-id-8 .column-1 {
    text-align: left;
    }

    /***Adjust column width***/
    .tablepress-id-1 .column-1 {
    width: 200px;
    }

    .tablepress-id-2 .column-1 {
    width: 200px;
    }

    .tablepress-id-1 .column-2 {
    width: 1px;
    }

    .tablepress-id-2 .column-2 {
    width: 1px;
    }

    .tablepress-id-1 .column-3 {
    width: 1px;
    }

    .tablepress-id-2 .column-3 {
    width: 1px;
    }

    .tablepress-id-1 .column-7 {
    width: 1px;
    }

    .tablepress-id-2 .column-7 {
    width: 1px;
    }

    .tablepress-id-1 .column-10 {
    width: 1px;
    }

    .tablepress-id-2 .column-10 {
    width: 1px;
    }

    /***Bold font columns***/
    /*---Column 11 bold font---*/
    .tablepress-id-1 .column-11 {
    font-weight: bold;
    }

    .tablepress-id-2 .column-11 {
    font-weight: bold;
    }

    .tablepress-id-3 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-4 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-5 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-6 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-7 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-8 .column-1 {
    font-weight: bold;
    }

    .tablepress-id-3 .column-8 {
    font-weight: bold;
    }

    .tablepress-id-4 .column-8 {
    font-weight: bold;
    }

    .tablepress-id-5 .column-8 {
    font-weight: bold;
    }

    .tablepress-id-6 .column-8 {
    font-weight: bold;
    }

    .tablepress-id-7 .column-8 {
    font-weight: bold;
    }

    .tablepress-id-8 .column-8 {
    font-weight: bold;
    }

    /***Colour columns white and remove padding***/
    /*---Colour cells white and remove padding---*/
    .tablepress-id-3 .row-1 .column-9 {
    width: 1px;
    background-color: #ffffff;
    }

    .tablepress-id-3 .row-1 .column-10 {
    width: 1px;
    background-color: #ffffff;
    }

    .tablepress-id-4 .row-1 .column-9 {
    width: 1px;
    background-color: #ffffff;
    }

    .tablepress-id-4 .row-1 .column-10 {
    width: 1px;
    background-color: #ffffff;
    }

    .tablepress-id-1 .row-2 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    .tablepress-id-2 .row-2 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /*---Row 3, column 11 colour white and remove padding---*/
    .tablepress-id-1 .row-3 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    .tablepress-id-2 .row-3 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /*---Row 6, column 11 colour white and remove padding---*/
    .tablepress-id-1 .row-6 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /*---Row 9, column 11 colour white and remove padding---*/
    .tablepress-id-1 .row-9 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /*---Row 12, column 11 colour white and remove padding---*/
    .tablepress-id-1 .row-12 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /*---Colour row 15, column 11 white and remove padding---*/
    .tablepress-id-1 .row-15 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /*---Row 18, column 11 colour white and remove padding---*/
    .tablepress-id-1 .row-18 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /*---Row 23, column 11 colour white and remove padding---*/
    .tablepress-id-1 .row-23 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /*---Row 23, column 11 colour white and remove padding---*/
    .tablepress-id-1 .row-23 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /*---Colour row 29, column 11 white and remove padding---*/
    .tablepress-id-1 .row-29 .column-11 {
    width: 1px;
    background-color: #ffffff;
    }

    /***Colour network name, bold and remove padding***/
    /*---Colour row 3, column 1 blue (network name) and remove padding---*/
    .tablepress-id-1 .row-3 .column-1 {
    padding: 1px;
    background-color: #dbe1ec;
    font-weight: bold;
    }

    .tablepress-id-2 .row-3 .column-1 {
    padding: 1px;
    background-color: #dbe1ec;
    font-weight: bold;
    }

    /*---Colour row 6, column 1 blue (network name) and remove padding---*/
    .tablepress-id-1 .row-6 .column-1 {
    padding: 1px;
    background-color: #dbe1ec;
    font-weight: bold;
    }

    /*---Colour row 9, column 1 blue (network name) and remove padding---*/
    .tablepress-id-1 .row-9 .column-1 {
    padding: 1px;
    background-color: #dbe1ec;
    font-weight: bold;
    }

    /*---Colour row 12, column 1 blue (network name) and remove padding---*/
    .tablepress-id-1 .row-12 .column-1 {
    padding: 1px;
    background-color: #dbe1ec;
    font-weight: bold;
    }

    /*---Colour row 15, column 1 blue (network name) and remove padding---*/
    .tablepress-id-1 .row-15 .column-1 {
    padding: 1px;
    background-color: #dbe1ec;
    font-weight: bold;
    }

    /*---Colour row 18, column 1 blue (network name) and remove padding---*/
    .tablepress-id-1 .row-18 .column-1 {
    padding: 1px;
    background-color: #dbe1ec;
    font-weight: bold;
    }

    /*---Colour row 23, column 1 blue (network name) and remove padding---*/
    .tablepress-id-1 .row-23 .column-1 {
    padding: 1px;
    background-color: #dbe1ec;
    font-weight: bold;
    }

    /*---Colour row 29, column 1 blue (network name) and remove padding---*/
    .tablepress-id-1 .row-29 .column-1 {
    padding: 1px;
    background-color: #dbe1ec;
    font-weight: bold;
    }

    /***Colour columns white***/
    /*---Column 3 colour white---*/
    /*.tablepress-id-1 .column-3 {/
    /* padding: 1px;
    background-color: #ffffff;
    }

    /*---Column 7 colour white---*/
    /*.tablepress-id-1 .column-7 {
    padding: 1px;
    background-color: #ffffff;
    }

    /*---Column 10 colour white---*/
    /*.tablepress-id-1 .column-10 {
    padding: 1px;
    background-color: #ffffff;
    }

    /*---Column 12 colour white---*/

  4. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    first of all: Please do not post your CSS here! :-) I can see that in the page :-)

    Now, did you really change that via the TablePress "Plugin Options" screen? For some reason, the minified version of the CSS file has not been updated, which is strange...
    Or did you edit the CSS file directly?

    Regards,
    Tobias

  5. andrew.arnison
    Member
    Posted 11 months ago #

    Hi Tobias,
    Apologies! I should have realized that that adding the long CSS code would blow out the post.

    To change the CSS code, I've been editing in a text editor then uploading to WordPress via FTP.

    However I've also tried copying and pasting the CSS text into the TablePress Plugin Options. After doing this and saving, the styles still aren't updated into the new tables.

    It's funny, because previewing the new tables in the TablePress options is showing the correct styling applied.

    Thanks

    Andrew

  6. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi,

    ok, I see. Please only save the TablePress "Custom CSS" via the "Plugin Options" screen, and not directly through FTP.

    Now, right now, you seem to have overwritten the "Custom CSS" with something entirely different. Please paste the entire code that you posted above again into the "Custom CSS" textarea and save.

    Regards,
    Tobias

  7. andrew.arnison
    Member
    Posted 11 months ago #

    Hi,
    Sorry - made another mistake! I had pasted in the wrong CSS code.
    I've re-done it with the right CSS code, and once it is posted in the TablePress options and saved, the code works!

    The lesson is not to upload the new code via FTP!

    Many thanks for your help,

    Andrew

  8. TobiasBg
    Member
    Plugin Author

    Posted 11 months ago #

    Hi Andrew,

    great! :-) Good to hear that this worked!

    And yes, please do not upload the new code via FTP - except, if you update both the tablepress-custom.css and the tablepress-custom.min.css files.

    Best wishes,
    Tobias

    P.S.: In case you haven't, please rate TablePress here in the plugin directory. Thanks!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.