WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] WP Table Reload - Change Font on First Row (6 posts)

  1. Phillip_Montgomery
    Member
    Posted 2 years ago #

    Forgive me for a beginner's question. I looked through the F&Q and Forum but didn't see the answer.

    I'm trying to change the font color on my first row of the table. I can change the background color and the color when I'm sorting.

    .wp-table-reloaded-id-2 th, .wp-table-reloaded-id-2 .sorting {background-color: #FFFFCC!important;}
    .wp-table-reloaded-id-2 .sorting_asc, .wp-table-reloaded-id-2 .sorting_desc {background-color: #FFFF53!important;}
    .wp-table-reloaded-id-2 .row-1 {font-color: #0000ff;}
    .wp-table-reloaded-id-2 {width: auto !important;}
    .wp-table-reloaded-id-2 .column-1 {width: 100px;}
    .wp-table-reloaded-id-2 .column-2 {width: 100px;}
    .wp-table-reloaded-id-2 .column-3 {width: 20px;}
    .wp-table-reloaded-id-2 .column-4 {width: 20px;}
    .wp-table-reloaded-id-2 .column-5 {width: 20px;}
    .wp-table-reloaded-id-2 .column-6 {width: 20px;}
    .wp-table-reloaded-id-2 .column-7 {width: 20px;}
    .wp-table-reloaded-id-2 .column-8 {width: 20px;}

    Is there a way I can tell WP Table Reload to apply the same CSS code to multiple columns or rows instead of repeating the lines above?

    http://azsportsleague.com/wordpress/saturday-mens-league/

    Thank you,
    phil

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi Phil,

    changing the font color in the first row can be done with this:

    .wp-table-reloaded-id-2 .row-1 td {
      color: #0000ff;
    }

    To apply the same CSS commands to several columns/rows, just combine the CSS selectors with a comma. So, for the columns that you want 20px wide, the code would be:

    .wp-table-reloaded-id-2 .column-3,
    .wp-table-reloaded-id-2 .column-4,
    .wp-table-reloaded-id-2 .column-5,
    .wp-table-reloaded-id-2 .column-6,
    .wp-table-reloaded-id-2 .column-7,
    .wp-table-reloaded-id-2 .column-8 {
      width: 20px;
    }

    Regards,
    Tobias

  3. Phillip_Montgomery
    Member
    Posted 2 years ago #

    I appreciate the assistance. I still cannot change the font color for the first row in my table.

    I created a new table with ID 9. It's a simple three column three row table. I removed all my other Custom CSS code thinking there might be some conflict. Below is the code I used.

    .wp-table-reloaded-id-9 .row-1 td {
    color: #0000ff;
    }

    I copied and pasted from the email into the Custom CSS box as well as doing it from this page just in case there's some hidden characters that might have been applied.

  4. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    ah, my bad. As the first row is the table header, we need to use th instead of td in the code.

    Please try again with

    .wp-table-reloaded-id-9 .row-1 th {
      color: #0000ff;
    }

    Regards,
    Tobias

  5. Phillip_Montgomery
    Member
    Posted 2 years ago #

    I had to deselect the default CSS setting to get it to work. I guess that has priority over the custom CSS. Then reading through the other Q&A and forum posts I remember seeing the "!important" option to set precedence. In the end I was able to get it and I do appreciate your help. I incorporated some things you showed me and what I read on this forum, without it I wouldn't have been able to format the table. (Yes the table looks hideous, just playing around right now)

    .wp-table-reloaded-id-9 .row-1 th {color: #0000ff!important;}
    .wp-table-reloaded-id-9 .row-3 {color: #0000ff;}
    .wp-table-reloaded-id-9 .row-1 th,
    .wp-table-reloaded-id-9 .row-2,
    .wp-table-reloaded-id-9 .row-3
    {font-size:20px!important;}
    .wp-table-reloaded-id-9 .column-1 {text-decoration:underline!important;}
    .wp-table-reloaded-id-9 .column-3 {color: #0000ff;}
    .wp-table-reloaded-id-9 .column-3 {font-size:20px;}

  6. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    ah, yes, forgot about that as well...

    Usually, the "Custom CSS" overrides the default CSS, but not in all cases, but that is more a result of how CSS works.
    For those cases, the !important keyword can be used, so great that you found it :-) With that, it should be possible to turn the "Default CSS" on again.

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic