Tablepress: Custom CSS not working with Weaver II theme

  • Resolved studiodebgmail

    (@studiodebgmail)


    10 years, 4 months ago

    Hi Tobias,

    I had a bunch of custom CSS that WAS working on my tables when I was using a different theme. But I’ve since switched to Weaver II b/c it has way more flexibility on mobile, but since doing that none of my custom CSS is in effect anymore. It was mostly just colors and font styles and stuff (I’ll paste it below) and I’m actually not so concerned about retaining all that.

    But what I DO want to do is specify the width of my table as a percentage, or even more specific formatting dependent upon small screen sizes. I see that this can be done through Custom CSS, but not if my theme is preventing the custom CSS from working.

    Do you have thoughts on why the custom CSS isn’t working? And if we can figure that out, then I’d like to be able to specify my table as 100% width of available screen size.

    here’s my dev site: https://69.195.124.167/~eastbbc2/meeting-directory-2

    PS – I know you have a responsive extension, but I’ve reviewed it and my “clients” think the switch from horizontal to vertical will be too confusing for their users.

    current custom CSS not working:

    .tablepress-id-1 thead th,
.tablepress-id-1 tfoot th {
	background-color: #46361e;
	color: #ffffff;
}

.tablepress-id-1 tbody td {
	font-family: Verdana;
	font-size: 12px;
	color: #000000;
}

.tablepress-id-1 .odd td {
	background-color: #fef7e4;
}

.tablepress-id-1 .even td {
	background-color: #ffffff;
}

.tablepress-id-2 thead th,
.tablepress-id-2 tfoot th {
	background-color: #ffffff;
}

.tablepress-id-2 tbody td {
	font-family: Verdana;
	font-size: 14px;
	color: #19489e;
}

.tablepress-id-3 thead th,
.tablepress-id-3 tfoot th {
	background-color: #46361e;
	color: #ffffff;
}

.tablepress-id-4 thead th,
.tablepress-id-4 tfoot th {
	background-color: #46361e;
	color: #ffffff;
}

.tablepress-id-4 tbody td {
	font-family: Verdana;
	font-size: 12px;
	color: #000000;
}

.tablepress-id-4 .odd td {
	background-color: #fef7e4;
}

.tablepress-id-4 .even td {
	background-color: #ffffff;
}

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter studiodebgmail

    (@studiodebgmail)

    Hi Tobias,
    Any thoughts here? You’re usually so prompt with your support replies I’m concerned you haven’t responded to this one yet. Do you need more information? Or are there other threads where I should be looking to resolve this?
    Thanks!

    Hi,

    thanks for your question, and sorry for the trouble.
    Sorry for the late reply as well. I only saw your post just now, as it somehow wasn’t tagged properly and didn’t show up in the list of posts here in the forums.

    Your theme is indeed adding CSS to the page that influences tables, and it does so in a rather aggressive way.
    The best shot might therefore be to remove that CSS from the theme, so that nothing interferes with the TablePress Default CSS and your Custom CSS.
    The relevant CSS is

    #content table {border: 1px solid #e7e7e7;margin: 0 -1px 24px 0;text-align: left;width: 100%;}
#content tr th, #content thead th {color: #888;font-size: 12px;font-weight: bold;line-height: 18px;padding: 9px 24px;}
#content tr td {border-style:none; border-top: 1px solid #e7e7e7; padding: 6px 24px;}
#content tr.odd td {background: #f2f7fc;}

    and I can see it directly in the page, i.e. it’s not in a .css file of the theme. Can you maybe try to locate that CSS in one of the theme’s PHP files or in some CSS section in its admin screens?

    Regards,
    Tobias

    Thread Starter studiodebgmail

    (@studiodebgmail)

    Hi Tobias,

    So after a bit of working back and forth with the Weaver support folks, we got the Tablepress custom CSS working again and I thought I’d update you on the specifics in case you come up against this again.

    First off, I had to specify “default table styling” in the Weaver admin panel, which supposedly means that the theme styling will take control. However this alone did not do the trick.

    The additional step was to add #content in front of each of my custom CSS commands. Their support person wrote the following: “Weaver uses #content on each selector and your CSS has less specific selectors (classes). Make your selectors more specific (at least as specific as the rule you are trying to override.)”

    So now that I’ve got my custom CSS working, can you recommend the best way for me to designate that the table width display as 100% of the available screen width? Thanks.

    Hi,

    good to hear that they were able to help here!
    Honestly, I don’t really like how they do all of this (especially that ugly #content ID selector), but it’s good that they at least help!

    The table is now stretching to 100% of the available content width (which is the width of the container that it is in. Making the table wider would require that the theme has a wider content area. Some themes have a “Full-width” page template for such purposes, otherwise you’d have to add CSS to the theme again so make its content area wider in general.

    Regards,
    Tobias

    Thread Starter studiodebgmail

    (@studiodebgmail)

    Thanks Tobias.

    Hi,

    no problem, you are very welcome! ?? Always happy when I can help!

    Best wishes,
    Tobias

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Tablepress: Custom CSS not working with Weaver II theme’ is closed to new replies.