Need little help on CSS

  • Resolved RA_NPL

    (@ra_npl)


    11 years, 3 months ago

    Hi everybody,

    I am struggeling with setting up the correct background color in the last row of a couple of tables. It is not formatted as table footer as this screws the remaining CSS in the footer row. What I am looking for is the same shade of grey as the surrounding box-background.

    You may want to have a quick look at http://www.ra-plutte.de/markenanmeldung. Password is npl2012.

    Here is the CSS i am using:

    .tablepress td {
	font-family: 'PT Sans', sans-serif;
	font-size: 1.0em;
}
.tablepress .column-2, .tablepress .column-3, .tablepress .column-4, .tablepress .column-5, .tablepress .column-6, .tablepress .column-7 {
	text-align: center;
}
.tablepress .row-1 td {
	font-family: 'Oswald', sans-serif;
	color:#4C4A4A;
	font-weight:400;
	text-rendering: optimizeLegibility;
	font-size: 1.7em;
}
.tablepress-id-2 .row-12 .column-1, .tablepress-id-3 .row-12 .column-1, .tablepress-id-4 .row-10 .column-1 {
	font-family: 'Oswald', sans-serif;
	color:#4C4A4A;
	font-weight:400;
	text-rendering: optimizeLegibility;
	font-size: 1.7em;
	vertical-align: middle;
}

    Any idea?

    Cheers Nick

    http://wordpress.org/extend/plugins/tablepress/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    11 years, 3 months ago

    Hi Nick,

    thanks for your question.

    That’s actually a little bit tricky, as the box background is (though just slighly visible) gradient background. So, instead of setting a color, we’ll just set the background of the last row (in table 2, that’s row 12) to “transparent”. We’ll also set the background to transparent for the mouse over case, as that would look weird otherwise. And finally, we should remove the (very thin) bottom border of of that row.

    To do that, please try this “Custom CSS” code:

    .tablepress-id-2 .row-12 td,
.tablepress-id-2 .row-hover .row-12:hover td {
  background-color: transparent;
}
.tablepress-id-2 .row-12 {
  border-bottom: none;
}

    Regards,
    Tobias

    Thread Starter RA_NPL

    (@ra_npl)

    11 years, 3 months ago

    Hi Tobias,

    thank you for your quick reply and the CSS snippet. It works perfectly, I can see the slight color difference between tablepress-id-2 and the other tables, where “background-color: transparent” is not used atm.

    Still one more issue i’d like to change: the background of row 12 remains “white” if not hovered by mouse. I would like it to stay permantly transparent, not only on hover. Do you see any chance for this?

    Greatly appreciate your support!

    Cheers Nick

    Plugin Author TobiasBg

    (@tobiasbg)

    11 years, 3 months ago

    Hi Nick,

    sure, no problem!

    Yes, of course this can be changed to transparent at all times. Actually, the code from above should do that, but it doesn’t because the CSS minification in W3 Total Cache switches the order of the files… But that’s no problem, we just need to be a little bit more “aggressive” in our code, and tell the browser, that this piece of CSS is more “!important” (which you can see in the third line below). Please try again with

    .tablepress-id-2 .row-12 td,
.tablepress-id-2 .row-hover .row-12:hover td {
  background-color: transparent !important;
}
.tablepress-id-2 .row-12 {
  border-bottom: none;
}

    Regards,
    Tobias

    Thread Starter RA_NPL

    (@ra_npl)

    11 years, 3 months ago

    Hi Tobias,

    you’re the man! It looks sweet now 🙂

    Cheers Nick

    Plugin Author TobiasBg

    (@tobiasbg)

    11 years, 3 months ago

    Hi Nick,

    great to hear that this worked! 🙂
    Thanks for the confirmation!

    Best wishes,
    Tobias

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Need little help on CSS’ is closed to new replies.

Tags