Changing background colour for a number of cells in a row, keeping the borders

  • Resolved vitalseeds

    (@vitalseeds)


    5 years, 5 months ago

    Hello

    I love this plug-in – thanks!

    I have a seed company and am using the table to make calenders for sowing, transplanting and harvesting of crops. I need to cells to be coloured differently for each crop to show when to do certain things etc.

    Is there an efficient way to do this? I will have over 40 calenders to make to the custom css sheet will be very long and difficult to navigate. At the moment i am doing something like this for each calender:

    /* Tomato */
    .tablepress-id-1 .row-2 .column-2 {
    background-color: #ffe202;
    color: #ff0000;
    }

    .tablepress-id-1 .row-2 .column-3 {
    background-color: #ffe202;
    color: #ff0000;
    }

    .tablepress-id-1 .row-2 .column-4 {
    background-color: #ffe202;
    color: #ff0000;
    }

    .tablepress-id-1 .row-2 .column-5 {
    background-color: #ffe202;
    color: #ff0000;
    }

    .tablepress-id-1 .row-3 .column-5 {
    background-color: #668e32;
    color: #ff0000;
    }

    .tablepress-id-1 .row-3 .column-6 {
    background-color: #668e32;
    color: #ff0000;
    }

    .tablepress-id-1 .row-3 .column-7 {
    background-color: #668e32;
    color: #ff0000;
    }

    .tablepress-id-1 .row-3 .column-8 {
    background-color: #668e32;
    color: #ff0000;
    }

    .tablepress-id-1 .row-4 .column-7 {
    background-color: #d86b01;
    color: #ff0000;
    }

    .tablepress-id-1 .row-4 .column-8 {
    background-color: #d86b01;
    color: #ff0000;
    }

    .tablepress-id-1 .row-4 .column-9 {
    background-color: #d86b01;
    color: #ff0000;
    }

    .tablepress-id-1 .row-4 .column-10 {
    background-color: #d86b01;
    color: #ff0000;
    }

    .tablepress-id-1 .row-4 .column-11 {
    background-color: #d86b01;
    color: #ff0000;
    }

    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)

    Hi,

    thanks for your post, and sorry for the trouble.

    Unfortunately, the only real suggestion that I can make here is to combine CSS code where the part between the { and } is the same, like

    /* Tomato */
.tablepress-id-1 .row-2 .column-2,
.tablepress-id-1 .row-2 .column-3,
.tablepress-id-1 .row-2 .column-4,
.tablepress-id-1 .row-2 .column-5 {
  background-color: #ffe202;
  color: #ff0000;
}

.tablepress-id-1 .row-3 .column-5,
.tablepress-id-1 .row-3 .column-6,
.tablepress-id-1 .row-3 .column-7,
.tablepress-id-1 .row-3 .column-8 {
  background-color: #668e32;
  color: #ff0000;
}

.tablepress-id-1 .row-4 .column-7,
.tablepress-id-1 .row-4 .column-8,
.tablepress-id-1 .row-4 .column-9,
.tablepress-id-1 .row-4 .column-10,
.tablepress-id-1 .row-4 .column-11 {
  background-color: #d86b01;
  color: #ff0000;
}

    This way, each block of connected (same colored) table cells is easier recognizable.

    Regards,
    Tobias

    Thread Starter vitalseeds

    (@vitalseeds)

    Ah thank you Tobias, that will still save me a lot time! I did not realize you could lump things together like that in CSS. I am a novice!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!

    Best wishes,
    Tobias

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing background colour for a number of cells in a row, keeping the borders’ is closed to new replies.

Tags