5

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.

Here is the link for that wordpress plugin style sheet.

The CSS codes from the above Wordpress plugin style sheet which I want to ignore is:

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

@media screen and (max-width: 575.98px) .gv-table-view tr {
    display: block;
    position: relative;
    padding: 1.2em 0;
    overflow-x: auto;
}

 .gv-table-view th, .gv-table-view td {
        padding: .3em;
    } 

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

@media screen and (max-width: 575.98px) .gv-table-view tr td:before {
    content: attr(data-label);
    font-weight: bold;
    display: table-cell;
    padding: 0.2em 0.6em 0.2em 0;
    text-align: right;
    width: 40%;
}


Problem Statement:

I want to ignore the above CSS codes in the mobile version of the following website url which is coming from wordpress plugin style-sheet. I am wondering where I need to go in my wordpress website in order to achieve that ?

If I take the above url in the mobile view, we can see the CSS codes mentioned above the problem statement.

7
  • may i ask if you need class .gv-table-view in desktop version? You don't want it in mobile version, simply remove it with a bit of javascript. In case jQuery i used in your theme this is quite easy. I will post a small demo. Alternatively you could add CSS to your theme overriding those classes that are added in mobile version.
    – user2560539
    Oct 7, 2018 at 18:49
  • @PeterDarmis Yes I need .gv-table-view in desktop view. Yes, I think I don't want in mobile version.
    – john
    Oct 7, 2018 at 18:51
  • @PeterDarmis It was working fine before but I am not sure how the css codes which I have mentioned above showed up in the style sheet.
    – john
    Oct 7, 2018 at 18:52
  • @PeterDarmis I have created the fiddle for it as well. If you take in the mobile view, it was like this before. The css codes which is been used in the fiddle is present in the additional css section as well in the wordpress.
    – john
    Oct 7, 2018 at 18:55
  • i posted a small snippet of javascript, it would check the user agent and remove the class from mobile version. This is quick way (and dirty!). Best way is to override all classes that are annoying. It was working fine before but I am not sure how the css codes which I have mentioned above showed up in the style sheet. -> A version update or a theme update might have altered things that were "working" before. Basically i would advise to use a quick solution for now (if it is urgent) until you take your time and check all the involved CSS and make the appropriate changes/overrides.
    – user2560539
    Oct 7, 2018 at 19:11

8 Answers 8

2
+25

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.

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').

2
  • There is no need to do the preg_match conditions since he will be using the updated stylesheet without the media queries, the theme stylesheet will be fine for all devices.
    – Omar Tanti
    Oct 15, 2018 at 13:59
  • In the original question he asked to remove the particular stylesheet for mobile devices alone - so I added that check. Oct 15, 2018 at 15:00
1

You can't exactly ignore a stylesheet that comes with a plugin that you wish to use. You could try overwriting the plugins stylesheet with your own styles, but if you plan to update that plugin it could cause trouble.

A lot of people have been stating to use important and I wouldn't do that. You should leverage CSS cascading ability and write your own css reset for those classes:

A CSS Reset is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

What you would need to do is change the style you want to change and reset the styles you don't, but you must implement these changes after the original style occurs to leverage CSS cascading ability. For example:

Reset Method

//Original
@media screen and (max-width: 575.98px) .gv-table-view tr:first-of-type {
    border-top: 1px solid #ccc;
}
//Reset must come after the plugins original style
@media screen and (max-width: 575.98px) .gv-table-view tr:first-of-type {
    border-top: none;
}

Make sure the stylesheet you're using to reset the plugins styles comes/loads after the plugins stylesheet.

It is only when you can't reset, or override a style through CSS cascading nature you should use important. More on that here.

In your <head> make sure your style.css folder is coming after the gravity views plugin stylesheet

Your Current Head

<head>
    <link rel="stylesheet" id="twentysixteen-style-css" href="http://test.caubo.ca/wp-content/themes/caubo/style.css?ver=4.9.8" type="text/css" media="all">

    <link rel="stylesheet" id="gravityview_font-css" href="http://test.caubo.ca/wp-content/plugins/gravityview/assets/css/font.css?ver=2.1.0.3" type="text/css" media="all">
</head>

What it needs to look like

<head>
    <link rel="stylesheet" id="gravityview_font-css" href="http://test.caubo.ca/wp-content/plugins/gravityview/assets/css/font.css?ver=2.1.0.3" type="text/css" media="all">

    <link rel="stylesheet" id="twentysixteen-style-css" href="http://test.caubo.ca/wp-content/themes/caubo/style.css?ver=4.9.8" type="text/css" media="all">
</head>

You can give your stylesheets priority in your functions.php file. For more information please check here.

2
  • Make sure the stylesheet you're using to reset the plugins styles comes/loads after the plugins stylesheet -> How can I make sure that in wordpress ? Where do I need to go in wordpress in order to achieve that ? I am using WordPress custom theme.
    – john
    Oct 9, 2018 at 2:12
  • I'm not fully aware of how your site is structured, but here is a good start as to how to figure out what stylesheet is loading first. I'm also unsure if you're using a sass compiler to compile all of your stylesheets into one stylesheet. Oct 10, 2018 at 3:37
1

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.

0

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

4
  • Hi Shakil, I think you didn't get my question. I am working on the mobile version of the following url in which in which I have written some css codes in the additional css section in order to make the website responsive. It was working very well before. Now for some reasons, some extra css codes is being applied from the wordpress plugin css for the above url.
    – john
    Oct 7, 2018 at 4:48
  • I just want to know how I can ignore the css codes (as mentioned in the question above) coming from wordpress plugin css in this url.
    – john
    Oct 7, 2018 at 4:49
  • Check this one is working Add this code in footer <script > $('link[src="test.caubo.ca/wp-content/plugins/gravityview/templates/css/…> Oct 7, 2018 at 7:16
  • How can I find the footer in Wordpress ? I haven’t worked on Wordpress that much so I am wondering if you can give me some hint.
    – john
    Oct 7, 2018 at 16:12
0

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!
}
0

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

3
  • I don't see any changes in the fiddle if I take it in the mobile view.
    – john
    Oct 7, 2018 at 19:56
  • Are you around ?
    – john
    Oct 7, 2018 at 20:05
  • @john the fiddle works but you will have to test it using your browser's web tools. (F12 key) try to change device to a mobile or tablet device and refresh the page (if you don't refresh you won't see any change, it has to change the user-agent to the proper one). Otherwise use your mobile phone and visit the fiddle page.
    – user2560539
    Oct 8, 2018 at 8:16
0

Your additional CSS has still got priority but the plugin stylesheet (/plugins/gravityview/templates/css/table-view.css I guess) classes are more specific and therefore win, for example:

.gv-table-view tr td from the plugin wins over your .gv-container-2777 td you could just copy their css or change yours to be more specific e.g .gv-container-2777 tr td

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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