Same custom CSS on more then one table

  • Resolved Granit

    (@granit)


    10 years, 9 months ago

    Hi,

    I have come custom css for several tables, but how do i write if i want to use the same custom css on more then one table? Now in the css is all written by id like this.

    #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;
}

    How do i apply that on more then table with id3? Or do i need to write a new css for each id?

    https://ww.wp.xz.cn/plugins/tablepress/

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

    (@tobiasbg)

    10 years, 9 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    To have this apply to all TablePress tables, you could simply change the line

    #tablepress-3.tablepress {

    to

    .tablepress {

    If you only want this for a few tables, I suggest to use ID-based selectors, written as a list:

    .tablepress-id-3,
.tablepress-id-5,
.tablepress-id-9,
.tablepress-id-12 {

    Regards,
    Tobias

    Thread Starter Granit

    (@granit)

    10 years, 9 months ago

    Hi,

    Thank you for the answer.
    I have tried what you say but i am not sure i have written it right since it does now work.

    Here is how it look now and that does not work.

    /* Table 3 (large) */
#tablepress-id-3,
#tablepress-id-4 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;
}
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 9 months ago

    Hi,

    please try it in exactly the same way as I posted. It’s imported to use the CSS class selectors and not mix them with the ID-based selectors.

    Regards,
    Tobias

    Thread Starter Granit

    (@granit)

    10 years, 9 months ago

    Hi,

    I have tried that and it does not work.

    Here is the whole code and i have written it just like you showed and i do not know what the error is.

    /* Table 3 (large) */
.tablepress-id-3,
.tablepress-id-4 {
	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-id-3,
.tablepress-id-4 tbody td {
	background: #DAEDF6;
	padding: 0;
}

.tablepress-id-3,
.tablepress-id-4 img {
	margin: 0;
	border-radius: 6px;
	margin-bottom: -5px;
}

.tablepress-id-3,
.tablepress-id-4 tbody td.column-1 {
	width: 160px;
}

.tablepress-id-3,
.tablepress-id-4 tbody td.column-2 {
	color: green;
	font-style: italic;
	font-weight: bold;
	text-align: center;
	font-size: 20px;
	padding-top: 38px;
}

.tablepress-id-3,
.tablepress-id-4 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-id-3,
.tablepress-id-4 tbody td.column-3 a:hover {
	background: #ffab23 linear-gradient(to bottom,#ffab23 5%,#ffec64 100%) repeat scroll 0 0;
	color: #000;
}

.tablepress-id-3,
.tablepress-id-4 tbody td.column-3 {
	width: 140px;
	text-align: center;
	padding-top: 30px;
}
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 9 months ago

    Hi,

    from what I can see, you are not duplicating the selectors enough. For example,

    .tablepress-id-3,
.tablepress-id-4 tbody td {

    has to be

    .tablepress-id-3 tbody td,
.tablepress-id-4 tbody td {

    and so on.

    Regards,
    Tobias

    Thread Starter Granit

    (@granit)

    10 years, 9 months ago

    Thank you.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    10 years, 9 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

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

The topic ‘Same custom CSS on more then one table’ is closed to new replies.