Title: Custom CSS stopped working Last modified: August 31, 2016 --- # Custom CSS stopped working * Resolved [Granit](https://wordpress.org/support/users/granit/) * (@granit) * [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-stopped-working-1/) * Hi, * In sep 2015 i hired a guy to create custom css for this plugin on my site for a project i was working on. Now i am about to start a new project and was going to again use these custom css for the tablepress plugin. * So i entered the css in the box under option, created the table with the exact content as back in 2015 and now it does not work anymore. I find this strange and wondered if there is some update in the plugin since sep 2015 that have made my custom css out of date or something. * Here is the css, it is for the 3 different tables but i have only tried to create the first table and then gave up when it did not work. * And here is the table, [http://www.dailyprofit.se/exempelsida/](http://www.dailyprofit.se/exempelsida/) * ``` /* Table 1 (Regular table) */ #tablepress-1.tablepress tfoot th, #tablepress-1.tablepress thead th { background-color: #000000; color: #ffffff; } #tablepress-1.tablepress .odd td { background: transparent; } #tablepress-1.tablepress .row-hover tr:hover td { background: transparent; } #tablepress-1.tablepress tbody td { font-size: 12px; } #tablepress-1.tablepress tbody td b, #tablepress-1.tablepress tbody td strong { font-size: 28px; display: inline-block; margin-top: 6px; font-weight: normal; } #tablepress-1.tablepress tbody td.column-5 img { margin-top: 20px; } #tablepress-1.tablepress tbody td.column-3 { padding-top: 28px; } #tablepress-1.tablepress tbody td.column-5 img:hover { opacity: .8; } /* Table 2 (right sidebar) */ #tablepress-2.tablepress .odd th, #tablepress-2.tablepress .odd td, #tablepress-2.tablepress .even td, #tablepress-2.tablepress .even th { background: transparent; } #tablepress-2.tablepress .row-hover tr:hover th, #tablepress-2.tablepress .row-hover tr:hover td { background: transparent; } #tablepress-2.tablepress tbody td.column-2, #tablepress-2.tablepress thead th.column-2 { color: green; font-style: italic; font-weight: bold; text-align: center; font-size: 13px; } #tablepress-2.tablepress tbody td.column-2 a, #tablepress-2.tablepress thead th.column-2 a { background: #ffec64 linear-gradient(to bottom,#ffec64 5%,#ffab23 100%) repeat scroll 0 0; border: 1px solid #ffaa22; border-radius: 6px; box-shadow: 0 1px 0 0 #fff6af; color: #333333; display: inline-block; font-family: arial; font-size: 15px; font-weight: bold; line-height: 1; padding: 10px 20px; text-align: center; text-decoration: none; text-shadow: 0 1px 0 #ffee66; white-space: nowrap; font-style: normal; font-weight: regular; margin-top: 10px; } #tablepress-2.tablepress tbody td.column-2 a:hover, #tablepress-2.tablepress thead th.column-2 a:hover { background: #ffab23 linear-gradient(to bottom,#ffab23 5%,#ffec64 100%) repeat scroll 0 0; color: #000; } /* Table 3 (large) */ #tablepress-3.tablepress { background: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); margin-bottom: 10px; padding: 5px; border: 6px solid #ffffff; } #tablepress-3.tablepress tbody td { background: #DAEDF6; padding: 0; } #tablepress-3.tablepress img { margin: 0; border-radius: 6px; margin-bottom: -5px; } #tablepress-3.tablepress tbody td.column-1 { width: 160px; } #tablepress-3.tablepress tbody td.column-2 { color: green; font-style: italic; font-weight: bold; text-align: center; font-size: 20px; padding-top: 38px; } #tablepress-3.tablepress tbody td.column-3 a { background: #ffec64 linear-gradient(to bottom,#ffec64 5%,#ffab23 100%) repeat scroll 0 0; border: 1px solid #ffaa22; border-radius: 6px; box-shadow: 0 1px 0 0 #fff6af; color: #333333; display: inline-block; font-family: arial; font-size: 15px; font-weight: bold; line-height: 1; padding: 10px 20px; text-align: center; text-decoration: none; text-shadow: 0 1px 0 #ffee66; white-space: nowrap; } #tablepress-3.tablepress tbody td.column-3 a:hover { background: #ffab23 linear-gradient(to bottom,#ffab23 5%,#ffec64 100%) repeat scroll 0 0; color: #000; } #tablepress-3.tablepress tbody td.column-3 { width: 140px; text-align: center; padding-top: 30px; } ``` * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/) Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-stopped-working-1/#post-6979186) * Hi, * thanks for your post, and sorry for the trouble. * Can you please be more precise here? What exactly is not working? From what I can see, on first glance, things like the background color are applied just fine. * Regards, Tobias * Thread Starter [Granit](https://wordpress.org/support/users/granit/) * (@granit) * [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-stopped-working-1/#post-6979190) * Hi, * It used to look like this, * [http://i.dedalx.com/xudwc.png](http://i.dedalx.com/xudwc.png) * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-stopped-working-1/#post-6979197) * Hi, * it mostly does for me. The differences that I see is the missing boldness of the “4000 kr” and the styling of the “HÄMTA BONUS” button. The first happens because there’s no `` HTML tags around it, and the second because that button is now in column 5, but there is no CSS for column 5 in table 1 in your CSS. * Regards, Tobias * Thread Starter [Granit](https://wordpress.org/support/users/granit/) * (@granit) * [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-stopped-working-1/#post-6979334) * Thank you for your support, manage to sort it out now. * I have one more question, if i want to use a set of css to more then one tablepress id, how do i write the code then? * For an example this one, i want to use for several table id:s. * ``` /* Table 3 (large) */ #tablepress-3.tablepress { background: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,0.2); margin-bottom: 10px; padding: 5px; border: 6px solid #ffffff; } #tablepress-3.tablepress tbody td { background: #DAEDF6; padding: 0; } #tablepress-3.tablepress img { margin: 0; border-radius: 6px; margin-bottom: -5px; } #tablepress-3.tablepress tbody td.column-1 { width: 160px; } #tablepress-3.tablepress tbody td.column-2 { color: green; font-style: italic; font-weight: bold; text-align: center; font-size: 20px; padding-top: 38px; } #tablepress-3.tablepress tbody td.column-3 a { background: #ffec64 linear-gradient(to bottom,#ffec64 5%,#ffab23 100%) repeat scroll 0 0; border: 1px solid #ffaa22; border-radius: 6px; box-shadow: 0 1px 0 0 #fff6af; color: #333333; display: inline-block; font-family: arial; font-size: 15px; font-weight: bold; line-height: 1; padding: 10px 20px; text-align: center; text-decoration: none; text-shadow: 0 1px 0 #ffee66; white-space: nowrap; } #tablepress-3.tablepress tbody td.column-3 a:hover { background: #ffab23 linear-gradient(to bottom,#ffab23 5%,#ffec64 100%) repeat scroll 0 0; color: #000; } #tablepress-3.tablepress tbody td.column-3 { width: 140px; text-align: center; padding-top: 30px; } ``` * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-stopped-working-1/#post-6979389) * Hi, * great! Good to hear that it’s working now! * To apply that code to multiple tables, you’ll have to copy the “selector” parts of each individual block. For example, the block * ``` #tablepress-3.tablepress tbody td { background: #DAEDF6; padding: 0; } ``` * would have to be extended to * ``` #tablepress-3.tablepress tbody td, #tablepress-4.tablepress tbody td, #tablepress-8.tablepress tbody td { background: #DAEDF6; padding: 0; } ``` * to apply this to tables 3, 4, and 8. * Basically, you’ll have a comma-separated list of selectors before the `{`. * Regards, Tobias * Thread Starter [Granit](https://wordpress.org/support/users/granit/) * (@granit) * [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-stopped-working-1/#post-6979482) * Hi, * Sorry for late replay. * I have tested this but it does not work when i have the same table-id men different columns? * I have a table-id 1 and want to apply the css to column 4 and 5, the only way i can create this is to have duplicate the css for every column and that becomes a lot of css to handle when creating a lot of tables. * I hope you understand what i mean. * Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * (@tobiasbg) * [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-stopped-working-1/#post-6979487) * Hi, * you would either have to replicate the CSS or extend the CSS selectors as in my example. That way, the “body” of the CSS would only be there once. * I’m afraid that this is the only real way, due to how CSS works in browsers. * Regards, Tobias Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Custom CSS stopped 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/) * 7 replies * 2 participants * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/) * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/custom-css-stopped-working-1/#post-6979487) * Status: resolved