Title: Custom CSS Partially Working Last modified: August 30, 2016 --- # Custom CSS Partially Working * Resolved [Jason Ansley](https://wordpress.org/support/users/jasonansleyrdgroupcom/) * (@jasonansleyrdgroupcom) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/) * Hello, * I have read the FAQ and documentation. Additionally I have searched this forum and tried several of the other recommended solutions. * As a side note, I am using the Divi Theme…not sure if that makes a difference or not. * Site folder is protected. You will need: * UN: websiteadmin PW: ErW^D?g,QQC * Page is: [http://npodev.com/darkstar-blackjack-aug-2015/single-deck-h17-das-ns/](http://npodev.com/darkstar-blackjack-aug-2015/single-deck-h17-das-ns/) * Here is example of code I was trying to use. I experimented with both the !important and the #content as I saw that worked for many others…however not me 🙂 * Also note my Alternating Row Colors and Row Hover Highlighting are disabled ( unchecked) as I saw this as a possible issue with another post. * ``` .tablepress .stand { background-color: #e7472e !important; } #content .tablepress-id-3 .row-3 .column-b { background-color: #88a550 !important; } ``` * row 3 column B should be a green-ish color. I have event tried #66666 and #00000 which are guaranteed web safe…but no go. * You will notice that my (per FAQ) for the css class .stand is working, however it only does the letter and not the entire cell. * Ultimately I want it to function as this page does, but with my colors. If possible I want the highlight cell (row # and Column Letter) when hovering over a cell… but this is less important then actually getting the colors to work. * This page is using tablepress on Divi theme as well. [http://www.blackjack-chart.com/dealer-stands-on-soft-17/](http://www.blackjack-chart.com/dealer-stands-on-soft-17/) * Please advise. Jason * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/) Viewing 10 replies - 1 through 10 (of 10 total) * Thread Starter [Jason Ansley](https://wordpress.org/support/users/jasonansleyrdgroupcom/) * (@jasonansleyrdgroupcom) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380076) * One other follow up. Does my Custom CSS have to be in the plugin css or can I put it in my main stylesheet custom css? * The above referenced is in the plugin custom css as an FYI. * Jason * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380168) * Hi, * thanks for your post, and sorry for the trouble. * Just a small thing here 🙂 In the CSS, you must use the column number, not the letter. You should then also not need the `!important` nor `#content`. Thus, please try again with * ``` .tablepress-id-3 .row-3 .column-2 { background-color: #88a550; } ``` * The approach with the `` will indeed only work on the content, it can not be used to change the entire cell. * To now only change the color when hovering, you could use * ``` .tablepress-id-3 .row-3 .column-2:hover { background-color: #88a550; } ``` * Regards, Tobias * Thread Starter [Jason Ansley](https://wordpress.org/support/users/jasonansleyrdgroupcom/) * (@jasonansleyrdgroupcom) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380214) * Great! Thank you for the response. Using the Number instead of letter worked! 🙂 * Two clarifying questions to help me speed this up as I have 14 tables with 286 cells (11×26) * Any other way I can NOT have to do EACH cell? * I liked the span idea, but it does not look good. So I need the full cell background colored. Since each table has the same cell content, simply in different cells from table to table, and within a table there are 6 types of content that could be in a cell (6 different letters) and I want all the cells with a particular letter to be the same color. Again like the example here: [http://www.blackjack-chart.com/dealer-stands-on-soft-17/](http://www.blackjack-chart.com/dealer-stands-on-soft-17/) * Anyway I can use classes or otherwise not do `.tablepress-id-3 .row-3 .column- 2 { background-color: #88a550; } * in 4004 cells individually across my 14 tables?!? * I am trying to speed this up 🙂 * Ok second question: does the CSS for tablepress have to be in the tablepress CSS in the Plugins Options tab or can I put it in my main custom CSS file in my child theme? * Thank you again, Jason * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380266) * Hi Jason, * ok, for this, you will indeed need an automatic approach. One idea would be to check out the TablePress Cell Highlight Extension that is described briefly at [https://wordpress.org/support/topic/tablepress-highlight-a-cell-based-on-value?replies=9#post-6554726](https://wordpress.org/support/topic/tablepress-highlight-a-cell-based-on-value?replies=9#post-6554726) * For your second question (sorry for missing that in my first reply): The CSS should work in the main custom CSS file of your child theme, but to be sure, I recommend to place it in the TablePress “Custom CSS”. That way, everything that “belongs” to TablePress is kept in one place, you will not run into CSS order priority issues, and you will benefit from the CSS minification and concatenation that TablePress does. * Regards, Tobias * Thread Starter [Jason Ansley](https://wordpress.org/support/users/jasonansleyrdgroupcom/) * (@jasonansleyrdgroupcom) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380335) * Great idea on the tablehighlight. However, because the terms have to be 100% unique, it won’t work for me. * Example, I have a terms “h” and “dh” and “Hard”… because the letter “ha” exists in all three terms, it is placing one color over all three terms. * I will just have to manually code unless you know a work around…please advise. * Also, on this example chart I got the ideas from [http://www.blackjack-chart.com/dealer-stands-on-soft-17/](http://www.blackjack-chart.com/dealer-stands-on-soft-17/) when you hover over a cell, the cell border turns white as does the column and row header/first cell. How do I achieve this affect? * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380338) * Hi, * yeah, I see what you mean… One possibility could be to use how CSS is interpreted, namely from “top to bottom. With that, if you write the CSS in an order so that the keywords get longer towards the bottom, those will get priority. * So, in your example, e.g. * ``` .tablepress-id-1 .highlight-h { background-color: #ff0000 !important; } .tablepress-id-1 .highlight-dh { background-color: #00ff00 !important; } .tablepress-id-1 .highlight-Hard { background-color: #0000ff !important; } ``` * For that hover effect, that site seems to be using some custom JavaScript code, that you can maybe use as an inspiration: [http://www.flopturnriver.com/design-team/suzara/7905_bjc/dev/hovereffect.js](http://www.flopturnriver.com/design-team/suzara/7905_bjc/dev/hovereffect.js) * Regards, Tobias * Thread Starter [Jason Ansley](https://wordpress.org/support/users/jasonansleyrdgroupcom/) * (@jasonansleyrdgroupcom) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380339) * I did initial order the CSS as you state…I will try it again and triple check it. * Let me also ask this. It is not clear to me when using multiple terms in the shortcode, what the correct syntax is. * Currently I have: `[table id=7 highlight="h" highlight="dh" /]` * Is that correct? * My css looks like: * ``` /* test of term highlighint */ .tablepress-id-7 .highlight-h { background-color: #aebd38 !important; } .tablepress-id-7 .highlight-dh { background-color: #ffa577 !important; } /* End test of term highlighint */ ``` * You can see on this page: [http://npodev.com/darkstar-blackjack-aug-2015/4-decks-h17-das-ns/](http://npodev.com/darkstar-blackjack-aug-2015/4-decks-h17-das-ns/) * Only the Dh has the colors. If I remove the Dh (dh) highlight code and only have“ h” then any cell with an “h” gets highlighted. So it is not following any “unique” structure. * (Site folder is protected. )You will need: * UN: websiteadmin PW: ErW^D?g,QQC * 1. Does my shortcode look correct or do I need to fix the syntax? * 2. Is my css test correct? * 3. Any other thoughts? * P.S. thank you a bunch…this highlighting plugins will save me about 10 hours of styling…so I want to get it to work! * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380341) * Hi, * the Shortcode needs to use the “OR” syntax, like * ``` [table id=7 highlight="h||dh||Hard" /] ``` * with `||` as the separator. * The CSS looks correct. * Regards, Tobias * Thread Starter [Jason Ansley](https://wordpress.org/support/users/jasonansleyrdgroupcom/) * (@jasonansleyrdgroupcom) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380344) * #1 **Thank you, Thank you, Thank you!!!** * #2 I got it to work with the tablehighlight. That cut my lines of css from over 600 per table to 112. Incredible! * #3 the java thing is a bit over my head and the time/money investment for me to figure it out/hire someone isn’t worth it at the moment…maybe in the future! * So…here is my “test table” fully completed. * You can see on this page: [http://npodev.com/darkstar-blackjack-aug-2015/4-decks-h17-das-ns/](http://npodev.com/darkstar-blackjack-aug-2015/4-decks-h17-das-ns/) * (Site folder is protected. )You will need: * UN: websiteadmin PW: ErW^D?g,QQC * Here is my finished CSS for this one table: * ``` /*-------------------------[4+ Decks (H17 DAS NS)]-----------------------------*/ /*-----------------[Table 7 Row 1 Header]-----------------*/ /*------------[Tablepress Default Light Blue]------------*/ .tablepress-id-7 .row-1 .column-1, .tablepress-id-7 .row-1 .column-2, .tablepress-id-7 .row-1 .column-3, .tablepress-id-7 .row-1 .column-4, .tablepress-id-7 .row-1 .column-5, .tablepress-id-7 .row-1 .column-6, .tablepress-id-7 .row-1 .column-7, .tablepress-id-7 .row-1 .column-8, .tablepress-id-7 .row-1 .column-9, .tablepress-id-7 .row-1 .column-10, .tablepress-id-7 .row-1 .column-11 { background-color: #d9edf7 !important; } /*-----------------End [Table 7 Row 1 Header]-----------------*/ /*------------End [Tablepress Default Light Blue]------------*/ /*-----------------[Table 7 Row 2 Hard Header and Column 1]-----------------*/ /*------------[Hard Color-Gray 1]------------*/ .tablepress-id-7 .row-2 .column-1, .tablepress-id-7 .row-2 .column-2, .tablepress-id-7 .row-2 .column-3, .tablepress-id-7 .row-2 .column-4, .tablepress-id-7 .row-2 .column-5, .tablepress-id-7 .row-2 .column-6, .tablepress-id-7 .row-2 .column-7, .tablepress-id-7 .row-2 .column-8, .tablepress-id-7 .row-2 .column-9, .tablepress-id-7 .row-2 .column-10, .tablepress-id-7 .row-2 .column-11, .tablepress-id-7 .row-3 .column-1, .tablepress-id-7 .row-4 .column-1, .tablepress-id-7 .row-5 .column-1, .tablepress-id-7 .row-6 .column-1, .tablepress-id-7 .row-7 .column-1, .tablepress-id-7 .row-8 .column-1, .tablepress-id-7 .row-9 .column-1, .tablepress-id-7 .row-10 .column-1, .tablepress-id-7 .row-11 .column-1, .tablepress-id-7 .row-12 .column-1 { background-color: #a3a599 !important; } /*------------End [Hard Color-Gray 1]------------*/ /*-----------------End [Table 7 Row 2 Hard Header and Column 1]-----------------*/ /*-----------------[Table Row 13 Soft Header and Column 1]-----------------*/ /*------------[Soft Color-White]------------*/ .tablepress-id-7 .row-13 .column-1 { background-color: #ffffff !important; } /*-----------End [Soft Color-White]------------*/ /*-----------------End [Table Row 13 Soft Header and Column 1]-----------------*/ /*-----------------[Table Row 22 Split Header and Column 1]-----------------*/ /*------------[Split Color-Gray 1]------------*/ .tablepress-id-7 .row-22 .column-1, .tablepress-id-7 .row-22 .column-2, .tablepress-id-7 .row-22 .column-3, .tablepress-id-7 .row-22 .column-4, .tablepress-id-7 .row-22 .column-5, .tablepress-id-7 .row-22 .column-6, .tablepress-id-7 .row-22 .column-7, .tablepress-id-7 .row-22 .column-8, .tablepress-id-7 .row-22 .column-9, .tablepress-id-7 .row-22 .column-10, .tablepress-id-7 .row-22 .column-11, .tablepress-id-7 .row-23 .column-1, .tablepress-id-7 .row-24 .column-1, .tablepress-id-7 .row-25 .column-1, .tablepress-id-7 .row-26 .column-1, .tablepress-id-7 .row-27 .column-1, .tablepress-id-7 .row-28 .column-1, .tablepress-id-7 .row-29 .column-1, .tablepress-id-7 .row-30 .column-1 { background-color: #a3a599 !important; } /*------------End [Split Color-Gray 1]------------*/ /*-----------------End [Table Row 22 Split Header and Column 1]-----------------*/ /*-----------------[Table Row 30 Aces Header and Column 1]-----------------*/ /*------------[Aces Color-White]------------*/ .tablepress-id-7 .row-30 .column-1 { background-color: #ffffff !important; } /*-----------End [Aces Color-White]------------*/ /*-----------------End [Table Row 30 Aces Header and Column 1]-----------------*/ /*-----------[Main Table Content]------------*/ .tablepress-id-7 .highlight-h { background-color: #aebd38 !important; } .tablepress-id-7 .highlight-dh { background-color: #ffa577 !important; } .tablepress-id-7 .highlight-s { background-color: #e05858 !important; } .tablepress-id-7 .highlight-ds { background-color: #90afc5 !important; } .tablepress-id-7 .highlight-p { background-color: #ffbb00 !important; } /*-----------END [Main Table Content]------------*/ /*-------------------------End [4+ Decks (H17 DAS NS)]-----------------------------*/ ``` * While it took me a little longer than I had hoped to get this test table working like it should (due to my errors), reducing my CSS my 500% is going to save me time as well as load time. I now feel like I can accomplish this by deadline. * Again, thank you Tobias! * Sincerely, Jason * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380349) * Hi, * no problem, you are very welcome! 🙂 Good to hear that this helped! * Best wishes, Tobias * P.S.: In case you haven’t, please [rate TablePress](https://wordpress.org/support/view/plugin-reviews/tablepress) here in the plugin directory. Thanks! Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘Custom CSS Partially Working’ is closed to new replies. * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944) * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/) * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq) * [Support Threads](https://wordpress.org/support/plugin/tablepress/) * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/) * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/) * 10 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [10 years, 10 months ago](https://wordpress.org/support/topic/custom-css-partially-working/#post-6380349) * Status: resolved