How to ignore the specific CSS codes coming from the WordPress plugin stylesheet?

Question

I am working on a WordPress website built on custom theme in which I want to ignore some specific CSS codes coming from wordpress plugin style sheet.

Answer 1

You can achieve this in 2 ways.

Solution 1: All good plugins will define CSS handle for each of their CSS and its gravityview_style_default_table in your case. Just add the function given below in your theme's 'functions.php' to remove the particular CSS. Please note that this will remove the entire CSS and not the 'media queries' alone. You can then add the required CSS classes to your theme's stylesheet.

function remove_gravityview_table_style() {
    //check if mobile device
    $useragent=$_SERVER['HTTP_USER_AGENT'];
    if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) {
        //remove css
        wp_dequeue_style('gravityview_style_default_table');
        wp_deregister_style('gravityview_style_default_table');
    }
}
add_action('wp_print_styles', 'remove_gravityview_table_style');

Solution 2: You can override the particular CSS file in your theme by copying it to [theme]/gravityview/css/table-view.css and make necessary changes (i.e. remove 'media queries').

Answer 2

Override the rule in your Custom stylesheet and set properties to !important tag. Or override the rule on bottom of stylesheet file. Because is a cascading style and last properties executed that stay

.example{
   Width:300px !important!
}

Answer 3

This could be done with the help of javascript also, but you could override the WP theme also using the appropriate media queries for the mobile version that adds those classes.

function isMobile() {    if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) {
        return true;
    } else {
        return false;
    }
 }
 
 if(isMobile()) {
 let matches = document.querySelectorAll(".mobile");
 matches.forEach(function(item) {
 if(item.classList.contains('mobile')) {
 item.classList.remove('mobile')
 }
 });
 }
 

.mobile {
font-style:italic;
text-transform: uppercase;
color: red;
}
p {
font-style:normal;
text-transform: capitalize;
color: blue;
}

<p class="mobile">Lorem ipsum dolor sit amet...</p>

You may check this in jsFiddle

Answer 4

To overwriting the plugin CSS you can use !important; for particular class

@media screen and (max-width: 575.98px) .gv-table-view tr:first-of-type {
border-top: 10px solid #000000!important;
}

If their available id it that div you can use id rather than !important; and it will work if The developer of the plugin was not using !important throughout the plugin CSS

Answer 5

Solution 1:

I would first locate the wp_enqueue_style() in the plugin itself to identify the stylesheet handle. Let's say the enqueue in the plugin is as follows:

wp_enqueue_style('gravityview_style_default_table', 'path-to-file.css', [], '2.1.0.3');

In your theme than you would need to wp_deregister_style() refering to the same handle, and create a new stylesheet 'gravityview-style.css' in your theme with the css you want from that plugin stylesheet as follows:

function manage_theme_styles() {
  wp_deregister_style( 'gravityview_style_default_table',); 
  wp_enqueue_style( 'my-gravityview-style', get_template_directory_uri() . '/gravityview-style.css', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'manage_theme_styles', 99 );

Having said that every time you update the plugin you have to check the plugin's css and update your stylesheet with any changes made to the plugin. But since you are dealing with a plugin you have to check your css even if you choose to tackle your problem with other solutions.

Solution 2:

As others have suggested in other answers, you could also just add the styles in your theme stylesheet with the media queries you do not want. I would avoid using the !important since this might create issues in future styling, instead you can be more specific when referring the elements in your css as follows:

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr:first-of-type 
{
  border-top: none;
}

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr {
  padding: 0;
}

.gv-table-container.gv-container .gv-table-view th, .gv-table-container.gv-container .gv-table-view td {
  display: block;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0;
} 

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr td {
  display: block;
}

@media screen and (max-width: 575.98px) .gv-table-container.gv-container .gv-table-view tr td:before {
  content: 'Year Submitted';
  text-align: left;
}

I see that you have some styling referring to .gv-container-2777. I don't know if this has been done by the plugin itself or you added that styling. When you refer to elements in your css with ids, it means that every time you create a new table with a different id you have to go through your stylesheet and duplicate your css to be applied to .gv-container-2778. If you use constant classes you would avoid duplicate code and extra work since everything will be styled automatically.

Answer 6

I'd say you should check the handle of the plugin's stylesheet. Look into the wp_enqueue_style part and find out that handle, and then add your own styleshet AFTER that handle by using that handle as a dependency. For example, put this in your theme's function.php:

wp_enqueue_style( 'your_own_handle', 'path/to/your/overwrite_stylesheet.css', array('handle_of_plugin1','handle_of_plugin2'))

With that done, you could overwrite all the plugin css either in whole or in parts.