• Resolved Granit

    (@granit)


    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/

    /* 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://ww.wp.xz.cn/plugins/tablepress/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    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

    (@granit)

    Hi,

    It used to look like this,

    http://i.dedalx.com/xudwc.png

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    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 <strong> 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

    (@granit)

    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

    (@tobiasbg)

    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

    (@granit)

    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

    (@tobiasbg)

    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.