Change colors of tables

Resolved Laz
(@lazcabanas)

12 years, 9 months ago

First off I am sorry for this extreme “newbie” questions — but I have zero experience with programming — that being said — what I want to do requires some CSS style codes.

I think it is best if I should you in pictures —

I want your table —
link
http://www.soulcruisin.com/song-list/

To look like the song player module on my fan page on Facebook
link
http://www.facebook.com/pages/Soul-Cruisin/118720608217776

I want the colors on the song list table to match the colors of the Fan Page song list table.

Both tables have similar functionality when you mouse over them — I would love for both to look the same.

The Header of the song table can probably have the same color as the selected first song in player (Cruisin) which is a lighter grey — the song list table body (with alternate colors) can follow the same pattern as the the song list audio player.

I have spent hours going over forums, your site and trying different combinations — but I gave up. Any help will be greatly appreciated and followed up with a support donation.

Thanks

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

Thread Starter Laz
(@lazcabanas)

12 years, 9 months ago

Partially resolved using this

.wp-table-reloaded,
.wp-table-reloaded tr,
.wp-table-reloaded tr:hover,
.wp-table-reloaded td,
.wp-table-reloaded th {
background: transparent!important;
}

need to add alternative colors to match FB fan page
Plugin Author TobiasBg
(@tobiasbg)

12 years, 9 months ago
Hi,

finding the correct code for your table is a little bit troublesome, because the theme also has CSS code for tables in it.
Also, the Facebook page table is not actually a table, and it uses some advanced CSS techniques to modify the colors (opacity and stuff like that), so I can’t really find out the color values 🙁
But the following code should at least make your table similar to the Facebook page table. You might need to play around with the color values.

Start by removing the code that you posted above, as that is not necessary. Then add this:
```
.wp-table-reloaded-id-1, .wp-table-reloaded-id-1 td, .wp-table-reloaded-id-1 th {
  border: none!important;
  border-collapse: collapse!important;
  border-spacing: 0px!important;
}

.wp-table-reloaded-1 th {
  background-color: #AAAAAA!important;
}

.wp-table-reloaded-1 tr.even td {
  background-color: #555555!important;
}

.wp-table-reloaded-1 tr.odd td {
  background-color: #AAAAAA!important;
}

.wp-table-reloaded-1 .row-hover tr:hover td {
  background-color: #222222!important;
}
```
Best wishes,
Tobias
Thread Starter Laz
(@lazcabanas)

12 years, 9 months ago

I pasted your code and and adjusted the values and it still looked like default color settings —

Here are the color values for the table

Background color (to match web Page) is Black #000000

Even row (2.4.6 etc) color is #232323

Odd row (1.3.5 etc) color is #2E2E2E

when you hover over row – color should be black #000000

Table contents Font color: white : #FFFFFF

Table Header font: white: #FFFFFF

Table Header Background: Black

Thanks for your help
Plugin Author TobiasBg
(@tobiasbg)

12 years, 9 months ago
Hi,

you did not remove the other code (with the background: transparent!important) and you did not add the first parts of the code:
```
.wp-table-reloaded-id-1, .wp-table-reloaded-id-1 td, .wp-table-reloaded-id-1 th {
  border: none!important;
  border-collapse: collapse!important;
  border-spacing: 0px!important;
}

.wp-table-reloaded-1 th {
  background-color: #000000!important;
}
```
Regards,
Tobias
Thread Starter Laz
(@lazcabanas)

12 years, 9 months ago

I am almost there — just need to figure out how to change header font color to white

http://www.soulcruisin.com/song-list/

Code used so far

.wp-table-reloaded-id-1, .wp-table-reloaded-id-1 td, .wp-table-reloaded-id-1 th {
border: none!important;
border-collapse: collapse!important;
border-spacing: 0px!important;
}

.wp-table-reloaded,
.wp-table-reloaded tr,
.wp-table-reloaded tr:hover,
.wp-table-reloaded td,
.wp-table-reloaded th {
background: transparent!important;
}

.wp-table-reloaded-id-1 .row-hover tr:hover td {
background-color: #000000!important;
}

.wp-table-reloaded-id-1 td {
color: #FFFFFF;
}

.wp-table-reloaded-id-1 .odd td {
background-color: #2E2E2E!important;
}

.wp-table-reloaded-id-1 .even td {
background-color: #232323!important;
}
Plugin Author TobiasBg
(@tobiasbg)

12 years, 9 months ago
Hi,

good! You still didn’t remove that other part of the CSS though (with the background: transparent!important). Is there a reason for that? That code should no longer be necessary and might actually make things more difficult…

This will change the header text color:
```
.wp-table-reloaded-id-1 th {
  color: #FFFFFF;
}
```
Regards,
Tobias
Thread Starter Laz
(@lazcabanas)

12 years, 9 months ago

will try — also want to change the table tools to this (I changed the colors with firebug and it looks better

.TableTools {
background-color:#000000;
border-bottom-color:#232323;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:#232323;
border-left-style:solid;
border-left-width:1px;
border-right-color:#232323;
border-right-style:solid;
border-right-width:1px;
border-top-color:#232323;

Thread Starter Laz
(@lazcabanas)

12 years, 9 months ago

No good

http://www.soulcruisin.com/song-list/

I want header background to be black and the text and little sort arrows to be white

Here is the code I used

.wp-table-reloaded-id-1, .wp-table-reloaded-id-1 td, .wp-table-reloaded-id-1 th {
border: none!important;
border-collapse: collapse!important;
border-spacing: 0px!important;
}

.wp-table-reloaded-id-1 .row-hover tr:hover td {
background-color: #000000!important;
}

.wp-table-reloaded-id-1 td {
color: #FFFFFF;
}

.wp-table-reloaded-id-1 .odd td {
background-color: #2E2E2E!important;
}

.wp-table-reloaded-id-1 .even td {
background-color: #232323!important;
}

.wp-table-reloaded-id-1 th {
color: #FFFFFF;
}

Thread Starter Laz
(@lazcabanas)

12 years, 9 months ago

If I add !important — it changes the color in the header (without it — nothing happens) — however, the little sort arrows are still in black – need to be white or red.

Revised code

.wp-table-reloaded-id-1, .wp-table-reloaded-id-1 td, .wp-table-reloaded-id-1 th {
border: none!important;
border-collapse: collapse!important;
border-spacing: 0px!important;
}

.wp-table-reloaded-id-1 .row-hover tr:hover td {
background-color: #000000!important;
}

.wp-table-reloaded-id-1 td {
color: #FFFFFF;
}

.wp-table-reloaded-id-1 .odd td {
background-color: #2E2E2E!important;
}

.wp-table-reloaded-id-1 .even td {
background-color: #232323!important;
}
.wp-table-reloaded-id-1 th {
background-color: #000000!important;
}
.wp-table-reloaded-id-1 th {
color: #FFFFFF!important;
}

Plugin Author TobiasBg
(@tobiasbg)

12 years, 9 months ago

Hi,

yes, adding that “!important” might be necessary…

For the sort arrows: Those are images and the plugin only has the dark grey version in it. If you want white ones, you will need to modify the images.

For the TableTools CSS:
You can simply add that to the “Custom CSS” textarea as well. As you are using Firebug, it should be no problem to find the correct CSS selectors.

Regards,
Tobias

P.S.: There’s no need to post your CSS code, I can see it in the page 🙂

Thread Starter Laz
(@lazcabanas)

12 years, 9 months ago

OK — not going to worry about plugin images for now

i think it looks good with red in header

http://www.soulcruisin.com/song-list/

what would be great would be a little plugin to manipulate all of these visual attributes on the fly in the Dashboard.

It certainly would make life easier for knuckleheads like me 🙂

here is the last version of code

.wp-table-reloaded-id-1, .wp-table-reloaded-id-1 td, .wp-table-reloaded-id-1 th {
border: none!important;
border-collapse: collapse!important;
border-spacing: 0px!important;
}

.wp-table-reloaded-id-1 .row-hover tr:hover td {
background-color: #000000!important;
}

.wp-table-reloaded-id-1 td {
color: #FFFFFF;
}

.wp-table-reloaded-id-1 .odd td {
background-color: #2E2E2E!important;
}

.wp-table-reloaded-id-1 .even td {
background-color: #232323!important;
}
.wp-table-reloaded-id-1 th {
background-color: #BA292F!important;
}
.wp-table-reloaded-id-1 th {
color: #FFFFFF!important;
}

.TableTools {
background-color:#000000;
border-bottom-color:#232323;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:#232323;
border-left-style:solid;
border-left-width:1px;
border-right-color:#232323;
border-right-style:solid;
border-right-width:1px;
border-top-color:#232323;
}

Plugin Author TobiasBg
(@tobiasbg)

12 years, 9 months ago

Hi,

yes, the red looks very good, too, I like it!

Best wishes,
Tobias

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

The topic ‘Change colors of tables’ is closed to new replies.