網站優化 2022-09-20

如何忽略來自WordPress插件樣式表的特定CSS代碼？

文章目錄

0.1 問題描述：

1 圖片轉代碼服務由CSDN問答提供感謝您的意見，我們儘快改進~ 功能建議

問題描述：

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:

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.

圖片轉代碼服務由CSDN問答提供

感謝您的意見，我們儘快改進~
功能建議

我正在開發一個基於自定義主題的WordPress網站，我想忽略一些特定的CSS代碼來自 wordpress插件樣式表。

這是鏈接。

上面我想忽略的WordPress插件樣式表中的CSS代碼是：

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

###

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

###

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

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

###

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.

You may check this in jsFiddle

###

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

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

What it needs to look like

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

###

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

###

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:

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:

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 the elements in your css as follows:

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.

###

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:

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

Wordpress插件

由於網站搬家，部分鏈接失效，如無法下載，請聯繫站長！謝謝支持！
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » 如何忽略來自WordPress插件樣式表的特定CSS代碼？

分享到：