发表新帖
发表新帖

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

后端 未结
关注
8 1498
闹比i
闹比i 2021-01-12 18:13

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.

相关标签:
8条回答
  • 甜味超标
    2021-01-12 18:57

    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.

    0 讨论(0)
  • 小蘑菇
    2021-01-12 19:01

    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

    0 讨论(0)
 看不清?
提交回复
热议问题