Добавление пользовательского CSS в Wordpress Dashboard

Question

У меня есть <li class="jobs-dashboard1"> Я хотел бы настроить таргетинг с помощью CSS.Проблема в том, что он не отвечает, поэтому я подумал, можно ли как-то указать с идентификатором родителя <ul>, например:

#adminmenu.jobs-dashboard1 {
    background-color: green;
} 

<div id="adminmenuback"></div>
<div id="adminmenuwrap">
    <ul id="adminmenu">
        <li class="wp-first-item wp-has-submenu wp-has-current-submenu wp- 
menu-open menu-top menu-top-first menu-icon-dashboard menu-top. 
first" id="menu-dashboard">
            <a href='index.php' class="wp-first-item 
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu- 
top-first menu-icon-dashboard menu-top-first">
                <div class="wp-menu- 
arrow">
                    <div></div>
                </div>
                <div class='wp-menu-image dashicons-before 
dashicons-dashboard'><br /></div>
                <div class='wp-menu- 
name'>Dashboard</div>
            </a>
            <ul class='wp-submenu wp-submenu-wrap'>
                <li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
                <li class="wp-first-item current">.
                    <a href='index.php' class="wp-first-item current" aria- current="page">Home</a></li>
                <li><a href='update-core.php'>Updates 
<span class='update-plugins count-37'><span class='update. 
count'>37</span></span></a></li>
                <li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs. 
dashboard1">Jobs</a></li>
                <li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A 
Job</a></li>
                <li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events. 
dashboard1">Events</a></li>
                <li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post 
An Event</a></li>
            </ul>
        </li>

Это не сработало, и я не знаю почему.

Если вы видитеJobs на скриншоте ... это один из них, к которому я стремлюсь.

Сайт - https://adsler.co.uk, если это помогает, но это бэкэнд-модификация.

Answer 1

Куда вы добавляете этот CSS?Вы не можете добавить его к типичным CSS-файлам, которые вы используете на своем веб-сайте, потому что все они загружены во внешний интерфейс, а не в панель управления Wordpress.

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

Добавьте это в конец вашего functions.php или пользовательского плагина

Вот оригинальное опубликованное решение:

add_action('admin_head', 'custom_admin_css');

function custom_admin_css() {
  echo '<style>
    .jobs-dashboard1 {background: green;}
  </style>';
} 

Вот еще одинТаким образом, это также должно работать.

add_action( 'admin_head', 'custom_admin_css' );
function custom_admin_css() { ?>
<style>
    .jobs-dashboard1 {background-color: green; }
</style>
<?php }

Answer 2

Это потому, что у вас есть больше слоев узлов над ".jobs-dashboard1". Таким образом, вы можете использовать это:

#adminmenu #menu-dashboard .wp-submenu .jobs-dashboard1{background-color: green;} 

или если вы хотите более чистый путь:

#adminmenu li ul .jobs-dashboard1{background-color: green;} 

Answer 3

Это работает, пожалуйста, проверьте приведенный ниже фрагмент. Также проверьте CSS Combinators

#adminmenu .jobs-dashboard1 {
  background-color: green;
}

<div id="adminmenuback"></div>
<div id="adminmenuwrap">
  <ul id="adminmenu">
    <li class="wp-first-item wp-has-submenu wp-has-current-submenu wp- 
menu-open menu-top menu-top-first menu-icon-dashboard menu-top. 
first" id="menu-dashboard">
      <a href='index.php' class="wp-first-item 
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu- 
top-first menu-icon-dashboard menu-top-first">
        <div class="wp-menu- 
arrow">
          <div></div>
        </div>
        <div class='wp-menu-image dashicons-before 
dashicons-dashboard'><br /></div>
        <div class='wp-menu- 
name'>Dashboard</div>
      </a>
      <ul class='wp-submenu wp-submenu-wrap'>
        <li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
        <li class="wp-first-item current">.
          <a href='index.php' class="wp-first-item current" aria- current="page">Home</a></li>
        <li><a href='update-core.php'>Updates 
<span class='update-plugins count-37'><span class='update. 
count'>37</span></span></a></li>
        <li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs. 
dashboard1">Jobs</a></li>
        <li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A 
Job</a></li>
        <li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events. 
dashboard1">Events</a></li>
        <li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post 
An Event</a></li>
      </ul>
    </li>

Answer 4

Ну, вы пропустили пробел в объявлении CSS.

так и должно быть,

#adminmenu .jobs-dashboard1 {background-color: green;} 

Надеюсь, это поможет!