it-swarm.com.de

Wie ignoriere ich die CSS-Codes aus dem WordPress-Plugin-Stylesheet?

Ich arbeite an einer WordPress-Website, die auf einem benutzerdefinierten Thema basiert und in der ich einige spezifische CSS-Codes aus WordPress-Plugin-Stylesheet ignorieren möchte.

Hier ist der Link für das WordPress Plugin Style Sheet.

Die CSS-Codes aus dem obigen Wordpress-Plugin-Stylesheet, die ich ignorieren möchte, sind:

@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%;
}


Problemstellung:

Ich möchte die obigen CSS-Codes in der mobilen Version der folgenden Website URL ignorieren, die aus dem WordPress-Plugin-Stylesheet stammt. Ich frage mich, wo ich auf meiner WordPress-Website hingehen muss, um das zu erreichen.

Wenn ich die obige URL in der mobilen Ansicht verwende, können wir die über der Problembeschreibung genannten CSS-Codes sehen.

6
john

Sie können dies auf zwei Arten erreichen.

Lösung 1: Alle guten Plugins definieren das CSS-Handle für jedes ihrer CSS und in Ihrem Fall für ihren gravityview_style_default_table. Fügen Sie einfach die unten angegebene Funktion in die Datei 'functions.php' Ihres Themas ein, um das jeweilige CSS zu entfernen. Beachten Sie, dass dadurch das gesamte CSS entfernt wird und nicht nur die Medienabfragen. Anschließend können Sie die erforderlichen CSS-Klassen zum Stylesheet Ihres Themas hinzufügen.

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

Lösung 2: Sie können die bestimmte CSS-Datei in Ihrem Design überschreiben, indem Sie sie in [theme]/gravityview/css/table-view.css kopieren und die erforderlichen Änderungen vornehmen (d. H. Medienabfragen entfernen).

1

Ich würde sagen, Sie sollten das Handle des Stylesheets des Plugins überprüfen. Sehen Sie sich den Teil wp_enqueue_style an und finden Sie diesen Punkt heraus. Fügen Sie dann NACH diesem Punkt Ihren eigenen Stilsatz hinzu, indem Sie diesen Punkt als Abhängigkeit verwenden. Fügen Sie dies beispielsweise in die function.php Ihres Themas ein:

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

Damit können Sie das gesamte Plug-in-CSS entweder ganz oder teilweise überschreiben.

2
André R. Kohl

Sie können ein Stylesheet, das mit einem Plugin geliefert wird, das Sie verwenden möchten, nicht genau ignorieren. Sie können versuchen, das Stylesheet des Plugins mit Ihren eigenen Styles zu überschreiben. Wenn Sie jedoch vorhaben, dieses Plugin zu aktualisieren, kann dies zu Problemen führen.

Viele Leute haben angegeben, wichtig zu verwenden, und das würde ich nicht tun. Sie sollten die CSS-Kaskadierungsfähigkeit nutzen und Ihr eigenes CSS-Reset für diese Klassen schreiben:

Ein CSS-Reset ist ein kurzer, häufig komprimierter (reduzierter) Satz von CSS-Regeln, mit dem das Styling aller HTML-Elemente auf eine konsistente Grundlinie zurückgesetzt wird.

Sie müssen lediglich den Stil ändern, den Sie ändern möchten, und die Stile, die Sie nicht ändern möchten, zurücksetzen, aber Sie müssen diese Änderungen nach dem Auftreten des ursprünglichen Stils implementieren, um die CSS-Kaskadierungsfähigkeit zu nutzen . Zum Beispiel:

Methode zurücksetzen

//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;
}

Stellen Sie sicher, dass das Stylesheet, das Sie zum Zurücksetzen der Plug-in-Stile verwenden,/LOADS nach dem Plug-in-Stylesheet steht.

Es ist nur wichtig, wenn Sie einen Stil durch CSS-Kaskadierung nicht zurücksetzen oder überschreiben können. Mehr dazu hier.

Stellen Sie in Ihrem <head> sicher, dass Ihr style.css-Ordner hinter dem Stylesheet des Schwerkraftansichten-Plug-ins steht

Dein aktueller Kopf

<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>

Wie es aussehen muss

<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>

Sie können Ihren Stylesheets Priorität in Ihrer functions.php-Datei geben. Weitere Informationen finden Sie hier.

1
user3325126

Lösung 1:

Ich würde zuerst die wp_enqueue_style() im Plugin selbst finden, um das Stylesheet-Handle zu identifizieren. Angenommen, die Warteschlange im Plugin lautet wie folgt:

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

In Ihrem Design müssten Sie wp_deregister_style() unter Bezugnahme auf denselben Punkt und ein neues Stylesheet 'gravityview-style.css' in Ihrem Design mit der von diesem Plugin-Stylesheet gewünschten CSS wie folgt erstellen:

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 );

Allerdings müssen Sie jedes Mal, wenn Sie das Plugin aktualisieren, das CSS des Plugins überprüfen und Ihr Stylesheet mit allen am Plugin vorgenommenen Änderungen aktualisieren. Da es sich jedoch um ein Plugin handelt, müssen Sie Ihre CSS überprüfen, auch wenn Sie Ihr Problem mit anderen Lösungen angehen möchten.

Lösung 2:

Wie andere in anderen Antworten vorgeschlagen haben, können Sie auch einfach die Stile in Ihrem Design-Stylesheet mit den Medienabfragen hinzufügen, die Sie nicht möchten. Ich würde es vermeiden, den !important zu verwenden, da dies zu Problemen bei der zukünftigen Gestaltung führen könnte. Stattdessen können Sie präziser vorgehen, wenn Sie die Elemente in Ihrem CSS wie folgt referenzieren:

@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;
}

Ich sehe, dass Sie ein Styling haben, das sich auf .gv-container-2777 bezieht. Ich weiß nicht, ob dies vom Plugin selbst gemacht wurde oder ob Sie dieses Styling hinzugefügt haben. Wenn Sie auf Elemente in Ihrem CSS mit IDs verweisen, bedeutet dies, dass Sie jedes Mal, wenn Sie eine neue Tabelle mit einer anderen ID erstellen, Ihr Stylesheet durchgehen und Ihr CSS duplizieren müssen, um es auf .gv-container-2778 anzuwenden. Wenn Sie konstante Klassen verwenden, vermeiden Sie doppelten Code und zusätzliche Arbeit, da alles automatisch formatiert wird.

1
Omar Tanti

Überschreiben Sie die Regel in Ihrem benutzerdefinierten Stylesheet und setzen Sie die Eigenschaften auf! Important tag. Oder überschreiben Sie die Regel unten in der Stylesheet-Datei. Denn es wird ein Cascading-Style ausgeführt und die letzten Eigenschaften bleiben erhalten

.example{
   Width:300px !important!
}
0
Sebastian

Dies könnte auch mit Hilfe von Javascript geschehen, aber Sie könnten das Thema WP auch überschreiben, indem Sie die entsprechenden Medienabfragen für die Mobilversion verwenden, die diese Klassen hinzufügt.

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>

Sie können dies überprüfen in jsFiddle

0
Peter Darmis

Ihr zusätzliches CSS hat immer noch Priorität, aber die Plugin-Stylesheet-Klassen (/plugins/gravityview/templates/css/table-view.css, denke ich) sind spezifischer und gewinnen daher zum Beispiel:

.gv-table-view tr td vom Plugin siegt über dein .gv-container-2777 td du könntest einfach ihre CSS kopieren oder deine ändern, um genauer zu sein, zB .gv-container- 2777 tr td

0
RustyBadRobot

Zum Überschreiben des Plugin-CSS können Sie! Important; für bestimmte Klasse

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

Wenn ihre verfügbare ID div ist, können Sie ID anstelle von! Important verwenden. und es wird funktionieren, wenn der Entwickler des Plugins nicht! important im gesamten Plugin-CSS verwendet hat

0
Shakil Hossain