Change colors of tables

  • Resolved Laz

    (@lazcabanas)


    13 years, 7 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
    https://www.soulcruisin.com/song-list/

    To look like the song player module on my fan page on Facebook
    link
    https://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)

    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 Tobias B?thge

    (@tobiasbg)

    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)

    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 Tobias B?thge

    (@tobiasbg)

    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)

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

    https://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 Tobias B?thge

    (@tobiasbg)

    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)

    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)

    No good

    https://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)

    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 Tobias B?thge

    (@tobiasbg)

    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)

    OK — not going to worry about plugin images for now

    i think it looks good with red in header

    https://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 Tobias B?thge

    (@tobiasbg)

    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.