it-swarm.com.ru

Как игнорировать конкретные CSS-коды, поступающие из таблицы стилей плагина WordPress?

Я работаю над сайтом WordPress, созданным на основе пользовательской темы, в которой я хочу игнорировать некоторые конкретные CSS-коды из таблицы стилей плагина wordpress

Вот ссылка для этой таблицы стилей плагина WordPress. 

Коды CSS из приведенной выше таблицы стилей плагинов Wordpress, которые я хочу игнорировать:

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


Постановка задачи:

Я хочу игнорировать приведенные выше CSS-коды в мобильной версии следующего веб-сайта url , которая исходит из таблицы стилей плагинов Wordpress. Мне интересно, где мне нужно зайти на мой сайт WordPress, чтобы добиться этого? 

Если я возьму приведенный выше URL в мобильном представлении, мы увидим CSS-коды, упомянутые выше в заявлении о проблеме. 

6
john

Вы можете достичь этого двумя способами.

Решение 1: Все хорошие плагины будут определять дескриптор CSS для каждого из своих CSS и его gravityview_style_default_table в вашем случае. Просто добавьте указанную ниже функцию в файл functions.php вашей темы, чтобы удалить конкретный CSS. Обратите внимание, что это удалит весь CSS, а не только «медиа-запросы». Затем вы можете добавить необходимые классы CSS в таблицу стилей вашей темы.

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

Решение 2: Вы можете переопределить конкретный файл CSS в своей теме, скопировав его в [theme]/gravityview/css/table-view.css и внести необходимые изменения (т.е. удалить «медиазапросы»).

1
Outsource WordPress

Я бы сказал, что вы должны проверить дескриптор таблицы стилей плагина. Посмотрите на часть wp_enqueue_style и найдите этот дескриптор, а затем добавьте свой собственный стилевой ПОСЛЕ этого дескриптора, используя этот дескриптор в качестве зависимости. Например, поместите это в function.php вашей темы:

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

После этого вы можете перезаписать все плагины CSS полностью или по частям.

2
André R. Kohl

Вы не можете точно игнорировать таблицу стилей, которая поставляется с плагином, который вы хотите использовать. Вы можете попробовать переписать таблицу стилей плагинов своими собственными стилями, но если вы планируете обновить этот плагин, это может вызвать проблемы. 

Многие люди утверждают, что используют важные, и я бы не стал этого делать. Вы должны использовать возможность каскадирования CSS и написать свой собственный сброс CSS для этих классов:

CSS Reset - это короткий, часто сжатый (минимизированный) набор правил CSS, который сбрасывает стилизацию всех элементов HTML до согласованной базовой линии.

Что вам нужно сделать, это изменить стиль, который вы хотите изменить, и сбросить стили, которые вы не делаете, но вы должны реализовать эти изменения после того, как возникнет оригинальный стиль, чтобы использовать CSS-возможности каскадирования. Например:

Сброс метода

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

Убедитесь, что таблица стилей, которую вы используете для сброса стилей плагинов, идет/загружает после таблицы стилей плагинов.

Важно только когда вы не можете сбросить или переопределить стиль с помощью CSS каскадного характера. Подробнее об этом здесь.

В вашем <head> убедитесь, что ваша папка style.css идет после таблицы стилей плагина Gravity Views

Ваш текущий руководитель

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

Как это должно выглядеть

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

Вы можете дать приоритет вашим таблицам стилей в вашем файле functions.php. Для получения дополнительной информации, пожалуйста, проверьте здесь.

1
user3325126

Решение 1:

Сначала я бы нашел wp_enqueue_style() в самом плагине, чтобы определить дескриптор таблицы стилей. Допустим, очередь в плагине выглядит следующим образом:

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

В вашей теме, чем вам нужно wp_deregister_style(), ссылаясь на тот же дескриптор, и создайте новую таблицу стилей «gravityview-style.css» в вашей теме с помощью css, который вы хотите из этой таблицы стилей плагина, следующим образом:

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

Сказав, что каждый раз, когда вы обновляете плагин, вы должны проверять CSS плагина и обновлять таблицу стилей с любыми изменениями, внесенными в плагин. Но так как вы имеете дело с плагином, вы должны проверить свой CSS, даже если вы решите свою проблему с другими решениями.

Решение 2:

Как другие предлагали в других ответах, вы также можете просто добавить стили в таблицу стилей темы с ненужными медиазапросами. Я бы не стал использовать !important, так как это может создать проблемы в будущем стиле, вместо этого вы можете быть более точными, когда будете ссылаться на элементы в вашем css следующим образом:

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

Я вижу, что у вас есть некоторые стили, ссылающиеся на .gv-container-2777. Я не знаю, было ли это сделано самим плагином или вы добавили этот стиль. Когда вы ссылаетесь на элементы в вашем css с помощью идентификаторов, это означает, что каждый раз, когда вы создаете новую таблицу с другим идентификатором, вы должны просматривать таблицу стилей и дублировать свой css для применения к .gv-container-2778. Если вы используете константные классы, вы избежите дублирования кода и дополнительной работы, поскольку все будет стилизовано автоматически.

1
Omar Tanti

Переопределите правило в пользовательской таблице стилей и задайте для свойств значение! Важный тег . Или переопределите правило в нижней части файла таблицы стилей . Потому что это каскадный стиль и последние свойства, которые остаются в силе. 

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

Это можно сделать также с помощью javascript, но вы можете переопределить тему WP, также используя соответствующие медиа-запросы для мобильной версии, которая добавляет эти классы.

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>

Вы можете проверить это в jsFiddle

0
Peter Darmis

Ваш дополнительный CSS все еще имеет приоритет, но классы плагинов (/plugins/gravityview/templates/css/table-view.css я полагаю) классы более специфичны и поэтому выигрывают, например:

.gv-table-view tr td из плагина побеждает ваш .gv-container-2777 td, вы можете просто скопировать их css или изменить свой, чтобы быть более конкретным, например, .gv-container- 2777 т.р.

0
RustyBadRobot

Для перезаписи плагина CSS вы можете использовать! Important; для определенного класса 

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

Если у них есть id, то вы можете использовать id вместо! Important; и это будет работать, если разработчик плагина не использовал!

0
Shakil Hossain