Custom CSS doesn’t work

  • Resolved unihead

    (@unihead)


    9 years, 5 months ago

    Hi

    I’ve just installed TablePress, but unfortunately the custom cs doesn’t seem to work at all.

    Here’s the page: http://www.queenslandstem.edu.au/links/

    Here’s the custom css I’ve put in so far, with no success. I’ve tried using !important tags.

    [Moderator note: code fixed. Please wrap code in the backtick character or use the code button.]

    .tablepress-id-1 tbody td {
	font-size: 9px;
	color: #92c162;
}

.tablepress-id-1 .column-1 {
	width: 160px;
}

.tablepress-id-1 .column-1 {
	padding: 0;
}

.tablepress-id-1 .column-2,
.tablepress-id-1 .column-3,
.tablepress-id-1 .column-4,
.tablepress-id-1 .column-5,
.tablepress-id-1 .column-6,
.tablepress-id-1 .column-7,
.tablepress-id-1 .column-8 {
	width: 40px;
}

.tablepress-id-1,
.tablepress-id-1 tr,
.tablepress-id-1 tbody td,
.tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
	border: none;
}

    Many thanks!

    • This topic was modified 9 years, 5 months ago by unihead.
    • This topic was modified 9 years, 5 months ago by bdbrown.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 5 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    The setting for font size and font color are not visible because there is no text in the table body.

    For the column widths: The problem basically is that the text in the table head row is wider than the desired 40 pixels. Therefore the column will not shrink.

    For the border, adding !important should work.

    Regards,
    Tobias

    Thread Starter unihead

    (@unihead)

    9 years, 5 months ago

    Thanks much for the fast reply. I assumed it would change the text in the first row (all the other table cells will have small images in them). How do I modify the text in that row?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 5 months ago

    Hi,

    no, that code only affects the body rows, not the header row. For that, you’d need to use

    .tablepress-id-1 thead th {
	font-size: 9px;
	color: #92c162;
}

    Regards,
    Tobias

    Thread Starter unihead

    (@unihead)

    9 years, 5 months ago

    Fantastic, thankyou! While I’ve got you, how do I centre the content (in this case images) in a table cell? I’ve tried “text-align: center” with no luck.

    Much appreciated.

    • This reply was modified 9 years, 5 months ago by unihead.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 5 months ago

    Hi,

    good to hear that this helped!

    To center the images, please add this “Custom CSS”:

    .tablepress-id-1 tbody td {
  vertical-align: middle;
}
.tablepress-id-1 img {
  margin: 0 auto;
}

    Regards,
    Tobias

    Thread Starter unihead

    (@unihead)

    9 years, 5 months ago

    Thanks Tobias. One last thing for this table, I promise:

    http://www.queenslandstem.edu.au/links/

    It’s fantastic the way you can sort the columns, but once you do so, the first column (Links) doesn’t sort the links back in the original way when you click it. Is that possible?

    • This reply was modified 9 years, 5 months ago by unihead.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 5 months ago

    Hi,

    sorry, that’s not directly possible as that column only contains a link and an image, i.e. no text that the sorting algorithm can use.
    You could maybe create a workaround using the approach from https://ww.wp.xz.cn/support/topic/sorting-table-by-image/

    Regards,
    Tobias

    Thread Starter unihead

    (@unihead)

    9 years, 5 months ago

    Fair enough. Many thanks for your help Tobias and thanks for your plugin. Donation coming!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    9 years, 5 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!
    And thanks for the donation, I really appreciate it!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Custom CSS doesn’t work’ is closed to new replies.