'How to modify CSS in a specific page of the WP admin dashboard (backend)

I'm trying to remove both padding and the title of the dashboard page of the admin panel of WordPress. The dashboard was redesigned with the "Welcome Dashboard for elementor" + Elementor.

I tried this script:

var domainURL = window.location.origin;
var path = window.location.pathname;
if ((path == "/wp-admin/" || path == "/wp-admin" || path == "/wp-login.php") && domainURL+path)
{
    document.getElementsByClassName("h1").style.display = "none";
}

It is not working. Would you have fixes or ideas to achieve this, please?

phpcsswordpresswoocommerceelementor


Solution 1:[1]

You have to inject the css into the wordpress header to actually modify the wordpress css admin console. In your function.php file add the following:

<?php function theme_admin_css() {
echo '
<style>
/* ... Your custom css goes here ... */
</style>
'; }
add_action( 'admin_head', 'theme_admin_css' ); ?>

Now to easily find your the element you want to target and style you can do the following:

In your browser: Right click on the element > Inspect. Find your element in the source code: Right Click > Copy > Copy selector

Now you can paste your selector in-between the style tag and customize it.

One more thing, you should use the !important statement (eg: background-color:red!important)

Solution 2:[2]

In general, the <body> classes contain a unique class specific to that one page (e.g. page name), you could add this as the first selector to your CSS code.

// Backend
function filter_admin_body_class( $classes ) {  
    // Current url
    $current_url = '//' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
    
    // Get last part from url. Expl: index.php
    $last_part = basename( parse_url( $current_url, PHP_URL_PATH ) );
    
    if ( $last_part == 'index.php' ) {
        // String
        $classes .= 'my-custom-backend-class';
    }
    
    return $classes;
}
add_filter( 'admin_body_class', 'filter_admin_body_class', 10, 1 );

Additional: For frontend pages you could use body_class

  • Note: The Conditional Tags of WooCommerce and WordPress can be used in your template files to change what content is displayed based on what conditions the page matches.
// Frontend
function filter_body_class( $classes ) {
    // Returns true on the cart page.
    if ( is_cart() ) {
        // Array
        $classes[] = 'my-custom-frontend-class';
    }
    
    return $classes;
}
add_filter( 'body_class', 'filter_body_class', 10, 1 );

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions