0

The theme our site was built with makes the tables look huge and that's fine for almost all of the site but we have one page with an 25-row table that needs to be super compact and simple so it fits in less than one page. Is there a way to tell Wordpress to ignore all themes and table styles for just one section of the site?

Also, this may only be relevant to some answers but the table is built and populated by a JS script which is imported into the page by a plugin (Scripts n Styles).

2 Answers 2

0

Not sure how comfortable you are with programming and such, but in general I would assume that your theme doesn't let you pick and choose where the table styles get loaded, so the only way to do it would be to disable it from loading the stylesheet that styles the table in question OR insert a new stylesheet that has basic table styles that is designed to only affect that one table.

Option 1 - Disable stylesheet:

Is there a way to tell Wordpress to ignore all themes and table styles for just one section of the site?

You can disable certain CSS stylesheets from loading on specific pages, so if by "sections" you mean "pages" then yes. If you have other tables on that same page that need to keep the existing styles, then it gets more complicated.

IF you want to stop a stylesheet from loading on a specific page, you could do something like this:

add_action( 'wp_enqueue_scripts', 'stkxchg301761_remove_css' );
function stkxchg301761_remove_css() {
    if (is_single('SomePageHere')) {
        wp_dequeue_style('StyleHandleHere');
    }
}

This would go in your theme's functions.php file.

Replace 'SomePageHere' with the slug of the page you're trying to remove the CSS sheet from. Replace 'StyleHandleHere' with the handle of the script you're trying to prevent from loading.

If you don't know the handle to the script, you can find it by using

var_dump($GLOABLS['wp_styles']); die;

You can put that^ in the same spot as the first code I provided, replacing the "wp_dequeue_style" line. This will make your site spit out all of the styles that are being loaded on that page. Look for the offending stylesheet and it's handle should be shown right next to it.

Option 2 - Add a new stylesheet

The simpler option would probably be to just load a new stylesheet on top of what's already there and have it only affect that one table. That would require you to make a new simple stylesheet, then load it only on that specific page. The stylesheet would contain styles that target that specific table. You can use the same code I provided at the top, except replace the "wp_dequeue_style" line with

wp_enqueue_style('my-custom-stylesheet', 'PathToStylesheet');

Replace 'PathToStylesheet' with the URL to the new stylesheet on your server.

The stylesheet should then have rules that target your table.

0

The other possibility is that you need to add CSS '@media' rules to 'adjust' the CSS for smaller screens. Theme's that are 'responsive' do this.

But setting up a unique class name for your table, then adding CSS for that class name is a quick way to go. (As @GoTeamScotch said in Option 2 of their answer.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.