Changing background color on certain rows

Resolved fwb
(@fwb)

11 years, 2 months ago

Hi.

First of all, great plugin!

I don’t understand how i can change certain rows and coulums with a new background color.
I have tried this:
.tablepress-id-N .row-X .column-Y {
background-color: #ff0000;
}

And when that didn’t do anything, i tried placing “!important” after the color. But still nothing changed. All other functions like “hover”, “font” changes, but not bakground color on certain rows.

Here is my Custom CSS in tablepress:
.tablepress-id-1 th,
.tablepress-id-1 .sorting {
background-color: #2f96f3 !important;
}

.tablepress-id-1 .sorting_asc,
.tablepress-id-1 .sorting_desc {
background-color: #f26522 !important;
}

.tablepress-id-1 td {
font-family: Lora;
font-size: 16px;
color: #333333;
}

.tablepress-id-1 .row-hover tr:hover td {
background-color: #c0ddf7 !important;
}

Please help me! 🙂

http://wordpress.org/extend/plugins/tablepress/

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

Plugin Author TobiasBg
(@tobiasbg)

11 years, 2 months ago

Hi,

thanks for your question.

As mentioned in the FAQ, where you found this code, you’ll have to change “N”, “X”, and “Y” to the table ID, row number, and column number respectively.

Adding !important should not be necessary then.

Regards,
Tobias

Thread Starter fwb
(@fwb)

11 years, 2 months ago

I did know i had to chagne the code 🙂 tablepress-id-1 .row-2 .column-8 {
background-color: #ff0000;
}

But it’s not working. And therefore i tried !important, but still no changes.

Plugin Author TobiasBg
(@tobiasbg)

11 years, 2 months ago

Hi,

ok. Can you then please post a link to the table, so that I can have a direct look?

Thanks!
Tobias

Thread Starter fwb
(@fwb)

11 years, 2 months ago

Sure, here it is: http://www.finanssans.no/beste-kredittkort/

Thanks for all help Tobias!
Plugin Author TobiasBg
(@tobiasbg)

11 years, 2 months ago
Hi,

thanks for the link.

However, there’s no CSS code to change the background color for an individual cell in that “Custom CSS” of that site…
You will need to add something like
```
.tablepress-id-1 .row-2 .column-8 {
  background-color: #ff0000;
}
```
which will change the background-color of that cell just fine.

Regards,
Tobias
Thread Starter fwb
(@fwb)

11 years, 2 months ago

Suddenly it worked! Great support, Tobias!
Sorry for taking your time.
I will rate this plugin.

Thanks!

Plugin Author TobiasBg
(@tobiasbg)

11 years, 2 months ago

Hi,

great to hear that! And you are very welcome!

Best wishes,
Tobias

P.S.: Thanks for rating the plugin, I really appreciate it!

ms2web
(@ms2web)

10 years, 7 months ago

Please take a look at this

http://www.wwss.com.my/

I am trying to change colors of columns 5 and 6 Only
For all rows . Pls help

Plugin Author TobiasBg
(@tobiasbg)

10 years, 7 months ago

Hi,

thanks for your post!

From what I can see, the color change is working nicely on those columns. So, I assume that you already found the necessary code?

Regards,
Tobias

ms2web
(@ms2web)

10 years, 7 months ago

Yes but I repeated the code many times.. is there any simpler waya so that i can use in the future ? thanks
Plugin Author TobiasBg
(@tobiasbg)

10 years, 7 months ago
Hi,

ah, ok 🙂 I hadn’t seen that. Sorry for not checking the code…

Yes, you can shorten that to
```
.tablepress-id-3 tbody .column-5 {
	background-color: #397C14 !important;
}
.tablepress-id-3 tbody .column-6 {
	background-color: #A20614 !important;
}
```
Regards,
Tobias

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

The topic ‘Changing background color on certain rows’ is closed to new replies.

Tags