Plugin: wp-table-reloaded – Unable to change individual row colors/font style

  • Resolved killerkellerjr

    (@killerkellerjr)


    15 years, 4 months ago

    I have been attempting to change individual row colors and font styles with the css but something is overriding it. I will attach the css and maybe someone can help figure this mystery out:

    /*
    Theme Name: Fiserv Orange
    Theme URI: https://www.google.com/
    Description: A Fiserv theme. Visit Fiserv
    Version: 1.1
    Author: Chris Keller
    */

    body {
    padding: 0;
    margin: 0;
    font: .78em Times New Roman, serif;
    line-height: 1.5em;
    background: #fff url(images/wp_banner2.png)center top;
    /*background: #fff url(images/top.jpg) repeat-x top;*/
    background-repeat:no-repeat;
    color: #454545;
    }

    a { color: #333333; }
    a:hover { color: #FF6600; text-decoration: underline}
    p { margin: 5px 0; }
    h1 { font: bold 1.8em Arial, Sans-Serif; padding: 8px 0 0px 0; margin: 0; letter-spacing: -1px; }
    h2 { font: bold 1.6em Arial, Sans-Serif; padding-left: 8px; letter-spacing: -1px; }
    h3 { padding: 4px 0; margin: 0px; }
    ul { margin-bottom: 0; padding: 0; list-style: none; }
    img { border: 0; }
    hr { height: 1px; border-style: none; color: #d0d0d0; background-color: #000; margin: 20px 0; }

    #top h1 {color:#999;font-size:38px;margin:0;padding:0;}
    #top h2 {color:#999;margin:0;padding:0;}
    #top h1 a {color:#FF6600;text-decoration:none;}

    .content { margin: 0px auto; width: 855px; }

    /* Top part */
    #top {
    padding-top: 50px;
    /*background-image:url(images/logo.png);
    background-repeat:no-repeat;*/
    height: 101px;
    }

    #ad { padding-left: 95px; min-height: 80px; margin-bottom: 15px;}
    #ad a, #left_side h3 span a, #left_side .date a { text-decoration: none; color:#fff }

    /* main area */
    #main { }
    #right_side { float: right; width: 160px; background: #F6F6F6; padding: 0px 15px 5px 10px; margin-bottom: 10px }
    #right_side ul { padding: 3px 0 8px 0 }
    #right_side li { line-height: 18px; background: #F6F6F6 url(images/cat-li.gif) no-repeat left; list-style: none; padding-left: 20px; }
    #right_side a { text-decoration: none }
    #right_side h3 { padding:11px; color: #fff; font: bold 1.0em verdana, Sans-Serif; background-image:url(images/navbg.gif); }

    #left_side { background: #F6F6F6; margin-bottom: 10px; width: 660px; }
    #left_side h3 { background: url(images/hbg.jpg) repeat-x; height:37px; padding: 6px 0 0 5px; margin: 0; background-repeat:no-repeat; font: bold 13px verdana, Sans-Serif; color:#fff; }
    #left_side h3 span { padding: 1px 10px 0 23px; line-height: 22px; margin: 0}
    #left_side p { color: #454545; padding: 0 5px 0 5px; text-align: justify }
    #left_side img { float: left; padding: 0 10px 5px 0 }
    #left_side blockquote { padding-left: 10px; border-left: 2px solid #DA4040; margin: 10px 0 10px 25px; }
    .when { float:left; color:#999; padding:14px; font-size:11px; }
    .date { border-bottom: 1px dotted #ccc; padding: 9px 20px 12px 0; margin: 10px 0 10px 0; text-align: right; background-image:url(images/datebg.gif); color:#999; font-size:11px; }
    #left_side .rs { float: right; margin: 0 10px; border: 1px solid #ddd; padding: 5px; background: #f5f5f5; }
    #left_side ul { list-style-position: inside; margin-left: 2px }
    #left_side ul li { list-style-type: square; margin-left: 15px; }
    #left_side ul ul li { list-style: none; margin-left: 10px; list-style-type: lower-alpha; list-style-position: inside }

    /* The footer */
    #footer { clear: both; border-top: 1px dotted #999; margin: 0 0 3em 0; color: #777; background: #fff; padding-top:6px; }
    #footer .right { float: right; text-align: right; background: #FFF; }
    #footer a { text-decoration: none; background: #FFF }

    .commentlist {
    padding: 0;
    text-align: justify;
    }

    .commentlist li {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    /* border-bottom: 1px solid #700000; */
    list-style: none;
    }

    .alt {
    margin: 0;
    padding: 10px;
    background-color: #F7F7F7;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    }

    #commentform {
    margin: 1em 0;
    background: #fff;
    width: 280px;
    }

    #commentform textarea {
    background: #f8f7f6;
    border: 1px solid #d6d3d3;
    width: 280px;
    }
    #commentform textarea:hover {
    background: #FFFFFF;
    border: 1px solid #d6d3d3;
    }
    #commentform textarea:focus {
    background: #ffffff;
    border: 1px solid #939793;
    }

    #commentform #email, #commentform #author, #commentform #url {
    font-size: 1.1em;
    background: #f8f7f6;
    border: 1px solid #d6d3d3;
    width: 280px;
    }
    #commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
    font-size: 1.1em;
    background: #ffffff;
    border: 1px solid #d6d3d3;
    width: 280px;
    }
    #commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
    font-size: 1.1em;
    background: #ffffff;
    border: 1px solid #939793;
    width: 280px;
    }
    #commentform input{
    margin-bottom: 3px;
    }

    a img
    {
    border:none;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left
    }

    /************************************************
    * *
    * This CSS file contains EXAMPLE styles for the *
    * plugin WP-Table Reloaded by Tobias B?thge! *
    * *
    * To use them, just copy them in to the box in *
    * the “Plugin Options” screen or add them to *
    * your theme’s “style.css”. *
    * *
    * Thank you! *
    * *
    ************************************************/

    /* Global CSS definitions for WP-Table Reloaded
    inspired by “blue” theme of TableSorter 2.0 Plugin */

    /* on how to change column widths, see below */

    /* general table styles */
    table.wp-table-reloaded {
    font-family:arial;
    background-color: #A5A5A5;
    margin:10px 0pt 15px;
    font-size: 8pt;
    width: 100%;
    text-align: left;
    }

    /* Styles for the tablehead (<th>) (if enabled) */
    table.wp-table-reloaded thead tr th, table.wp-table-reloaded tfoot tr th {
    background-color: #A5A5A5;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
    }

    table.wp-table-reloaded thead tr .header {
    background-image: url(/wp-content/plugins/wp-table-reloaded/img/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
    }

    table.wp-table-reloaded tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
    }

    /* =============================================================
    Here is my attempt to change table ID 1 Row-2 to have a different background color
    ================================================================*/
    table.wp-table-reloaded-id-1 .row-2 {
    background-color: #616161!important;
    }

    /* Styles for alternating row colors (if enabled) */
    table.wp-table-reloaded tbody tr.even td {
    background-color:#FFFFFF;
    }
    table.wp-table-reloaded tbody tr.odd td {
    background-color:#F3F3F3;
    }

    table.wp-table-reloaded-id-1 .row-2
    {
    background-color:#D6FB91!important;
    }

    /**************************************/
    /* how to change column widths :
    you can access a column with its CSS-class
    (that is “.column-” plus the number of the column)
    use table.wp-table-reloaded to do your change for every table, or use
    table.wp-table-reloaded-id-<id> for just a single table (with ID <id>)

    example: this changes the width of the third column of table ID 5 to 25px:

    table.wp-table-reloaded-id-5 .column-3
    {
    width: 25px;
    }

    */

    /* Styles for the sorting (if Tablesorter is enabled) */
    table.wp-table-reloaded thead tr .headerSortUp {
    background-image: url(/wp-content/plugins/wp-table-reloaded/img/asc.gif);
    }

    table.wp-table-reloaded thead tr .headerSortDown {
    background-image: url(/wp-content/plugins/wp-table-reloaded/img/desc.gif);
    }

    table.wp-table-reloaded thead tr .headerSortDown, table.wp-table-reloaded thead tr .headerSortUp {
    background-color: #8dbdd8;
    }

    /* Style for the Table Name (in <h2>-Tag) (if printed above the table) */
    h2.wp-table-reloaded-table-name {
    font-size: 16px;
    }

    /* Style for the Table Description (if printed under the table) */
    span.wp-table-reloaded-table-description {
    font-size: 10px;
    }

    /* ================================================================

    WordPress CSS Drop-down Menu Starts

    This copyright notice must be untouched at all times.

    The original version of this stylesheet and the associated (x)html
    is available at https://www.cssplay.co.uk/menus/final_drop.html
    Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
    This stylesheet and the associated (x)html may be modified in any
    way to fit your requirements.
    =================================================================== */

    .menu {
    width:447px;
    height:35px;
    position:relative;
    top: 6.8em;
    left: 10em;
    z-index:100;
    border-right:1px solid #000;
    font-family:arial, sans-serif;
    }

    /* hack to correct IE5.5 faulty box model
    * html .menu {width:746px; w\idth:745px;}*/

    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {padding:0;margin:0;list-style-type:none;}
    .menu ul ul {width:149px;}
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    .menu li {float:left;width:149px;position:relative;}
    /* style the links for the top level */
    .menu a, .menu a:visited {
    display:block;
    font-size:14px;
    text-decoration:none;
    color:#7C7C7C;
    width:138px;
    height:35px;
    border:1px solid #CCCFD6;
    border-width:1px 1px 1px 1px;
    background:#1B1B1B;
    background-image:url(images/wp_button.png);
    padding-left:10px;
    line-height:29px;
    font-weight:bold;}

    /* a hack so that IE5.5 faulty box model is corrected
    * html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}*/

    /* style the second level background */
    .menu ul ul a.drop, .menu ul ul a.drop:visited {
    background:#B0B0B0 url(../grey-arrow.gif) no-repeat 130px center;
    background-image:url(images/wp_button.png)
    }

    /* style the second level hover */
    .menu ul ul a.drop:hover{
    background:#D9D9D9 url(../grey-arrow.gif/blue-arrow.gif) no-repeat 130px center;
    background-image:url(images/wp_button2.png);}

    .menu ul ul :hover > a.drop {
    background:#FE9A00 url(../grey-arrow.gif/blue-arrow.gif) no-repeat 130px center;}

    /* style the third level background */
    .menu ul ul ul a, .menu ul ul ul a:visited {
    background:#CCCFD6;
    background-image:url(images/wp_button.png);}

    /* style the third level hover */
    .menu ul ul ul a:hover {
    background:#D9D9D9;
    background-image:url(images/wp_button2.png);}

    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {visibility:hidden;position:absolute;height:0;top:35px;left:0; width:149px;border-top:1px solid #000;}
    /* another hack for IE5.5 */
    * html .menu ul ul {top:30px;t\op:31px;}

    /* position the third level flyout menu */
    .menu ul ul ul{left:149px; top:-1px; width:149px;}

    /* position the third level flyout menu for a left flyout */
    .menu ul ul ul.left {left:-149px;}

    /* style the table so that it takes no ppart in the layout – required for IE to work */
    .menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

    /* style the second level links */
    .menu ul ul a, .menu ul ul a:visited {
    background:#CCCFD6;
    color:#000;
    background-image:url(images/wp_button.png);
    height:auto;
    line-height:1em;
    padding:5px 10px;
    width:128px;
    border-width:0 1px 1px 1px;}

    /* yet another hack for IE5.5 */
    * html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}

    /* style the top level hover */
    .menu a:hover, .menu ul ul a:hover{
    color:#000;
    background:#D9D9D9;
    background-image:url(images/wp_button2.png);
    }
    .menu :hover > a, .menu ul ul :hover > a {
    color:#000;
    background:#D9D9D9;
    background-image:url(images/wp_button2.png)
    }

    /* make the second level visible when hover on first level list OR link */
    .menu ul li:hover ul,
    .menu ul a:hover ul{visibility:visible; }
    /* keep the third level hidden when you hover on first level list OR link */
    .menu ul :hover ul ul{visibility:hidden;}
    /* make the third level visible when you hover over second level list OR link */
    .menu ul :hover ul :hover ul{ visibility:visible;}

    /* ================================================================
    This CSS is further CSS I have created specifically for WordPress
    so that the current page is highlighted in two levels.
    If you want it in three levels let me know.

    Author: Isaac Rowntree
    Website: https://www.zackdesign.biz
    =================================================================== */

    .menu ul ul .current_page_item a {
    color: red;
    background: white;
    border-left: 1px solid black;
    }

    .menu .current_page_item a {
    color: red;
    font-weight: bold;
    background: white;
    }

    .menu ul .current_page_item ul a {
    color: white;
    font-weight: normal;
    background: black;
    }

    .menu ul .current_page_item ul a:hover {
    background: gray;
    }

    .menu .current_page_item a:hover {
    background: white;
    }

    /* ===================================================================
    Wordpress CSS Drop-down Menu Stops
    =================================================================== */

    /*li { margin-bottom: 5px; padding: 0; }*/

Viewing 15 replies - 1 through 15 (of 16 total)
  • Thread Starter killerkellerjr

    (@killerkellerjr)

    Plugin author was quick to respond to my email and this issue was resolved with an easy fix of the CSS.

    Tobias is great plug-in author to work with when you have any issues with his plug-ins.

    Keep up the good work!

    Well, what was the easy fix for CSS?

    I’m having the same problem and I’m sure others are also… it would have been nice for you to have posted the solution.

    Hi,

    sorry that I didn’t post the solution here. The issue happened on a non-public site and thus we communicated by email to solve the problem.

    In Chris’s case it was this:
    He was trying to change the background colors with

    .wp-table-reloaded-id-1 .row-2 {
 background-color: #616161!important;
}

    which would apply to the “tr” of the table. The default CSS works on “td”s only so that takes precedence.
    So Chris only had to append the “td” to his selector like this:

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

    I hope this also helps you ??

    Regards,
    Tobias

    Thanks for the swift reply.

    I tried the above code and it didn’t work for me.

    I’m simply trying to make row 4 in the table bold font.

    You can see my table here: honestcontractors.ca/mortgagetest/?page_id=3

    Any help would be appreciated!

    Hi,

    have you really tried this?:

    .wp-table-reloaded-id-1 .row-4 td {
font-weight: bold!important;
}

    (The “-id-1” can be adjusted to the correct table ID if needed.)

    You’ll have to add that to the “Custom CSS” textarea on the “Plugin Options” screen.

    Regards,
    Tobias

    Yes, I did try that code. It had no effect.

    Hi,

    weird. Can you leave that CSS code in the site (i.e. in the “Custom CSS” textarea) so that I can check if there’s maybe something else (like other commands) overwriting it?
    Then I can hopefully tell you the reason, why it’s not working for you.

    Best wishes,
    Tobias

    Fixed. I had put the code into my theme’s custom css, which didn’t work. Once I put the code into the plug-in’s custom css “text area” it worked. I didn’t notice the plug-in custom css text area until just now. (It’s weird because other changes I put into my theme’s custom css file worked fine except for this.)

    Thank you very much for the plugin and the support!

    Hi,

    ok, great then!

    The reason is probably there there is some other CSS that is loaded after your theme’s style.css that is overwriting it again.
    In CSS the order is important (at least a little bit, in those cases where different selectors refer to the same elements), and the last CSS definition will be executed.
    So putting it in the CSS textarea of the plugin seems to place it after that other command and therefore the bold font is no longer overwritten.
    Another reason might be that you maybe were working on the wrong file (happens to me all the time ?? ) or that you have some sort of caching enabled so that your changes in the style.css were not immidiately applied on the page?

    But not matter what, good that it works now ??

    Regards,
    Tobias

    I have a one specific problem I am trying to change the color of the particular row using the code 

    .wp-table-reloaded-id-N .row-X td {
   background-color: #ff0000;
}

    My table id is 5 and i Row is 8 i have changed the code after its looks like this

    .wp-table-reloaded-id-5 .row-8 td {
   background-color: #ff0000;

    I have embedded the code the CSS of the Plug-ins options of WP Reloaded plugin

    After reloading the page i couldn’t find any changes , i have tried many times even with different ID but it can’t seems works!

    Then i have tried to test the color of the Font color with the code 

    .wp-table-reloaded .hilite {
  color: #ff0000;
}

    in CSS and the code

    <span class="hilite">your important value</span>
    as per the plugin documentation suggested but it seems works.

    Why it can’t worked with the background color of my table.

    Any help!

    Hi,

    probably there is a conflict some CSS of the same priority to the browser.

    Try adding the “!important” keyword, i.e. try

    .wp-table-reloaded-id-5 .row-8 td {
   background-color: #ff0000!important;
}

    If that does not work either, please post the URL of the page with your table.

    Best wishes,
    Tobias

    probably there is a conflict some CSS of the same priority to the browser.

Try adding the "!important" keyword, i.e. try

    Yes Its Works! Thanks to TobiasBg

    Can you tell me how to change color of multiple rows in multiple table with just one declaration in CSS, i have tried it by myself but it didn’t workd out for me.
    Thanks

    Hi,

    that would be something like

    .wp-table-reloaded-id-1 .row-2 td,
.wp-table-reloaded-id-1 .row-3 td,
.wp-table-reloaded-id-1 .row-4 td,
.wp-table-reloaded-id-2 .row-2 td,
.wp-table-reloaded-id-2 .row-3 td,
.wp-table-reloaded-id-2 .row-4 td {
  color: #ff0000!important;
}

    Best wishes,
    Tobias

    thanks tobias,
    your missing the commas at the end of each line before parenthesis, but its quite obvious to place ’em.
    Thanks

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Plugin: wp-table-reloaded – Unable to change individual row colors/font style’ is closed to new replies.