How can we customize the logo and some text on the welcome screen?

1 Views

I have found discussions and solutions on hiding or removing the lately introduced Welcome screen.

Read More

But we DO find the screen, as a whole, very useful and an excellent addition. So, what we are looking for is quite different.

We just want to change parts of it on a multisite/subfolders network.

To be exact. The wp logo image (wp-badge.png) on the left, as well as the header next to it (.welcome-panel-content .about-description, .welcome-panel h3) and the text under it included in (.about-text, .about-description, .about-wrap li.wp-person a.web).

Proposed Welcome Panel

I am aware that most of it is hardcoded. Still…. There must be a way. 🙂

PS: 1) We already use a plugin that can add css on the admin screens. But I don’t think it would solve anything.
2) If there is a way, please be as specific/descriptive as possible. My coding skills suck. 🙁

Update

After following brasofilo’s instructions I have compiled the code to a mu-plugin. I placed it in our mu-plugins folder, have tested it on our test-multisite and works like a charm. 🙂

I have it uploaded to my dropbox so anyone can benefit. Feel free to Right Click Here, download it and customize it to your needs. I hope it helps others as well.

PS: @brasofilo Please let me know whether I have credited it correctly.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Whenever we find ourselves in the situation “there must be a way to overcome this hard-code“, jQuery comes to rescue…

    The Result

    enter image description here

    The Code

    The following code must be pasted at the end of the active Theme functions.php file.
    Or it can be used in a custom plugin, which will make the code “theme-independent”.

    add_action('admin_head-index.php', 'wpse_57350_script_enqueuer');

function wpse_57350_script_enqueuer()
{
    // Check if Welcome Panel is being displayed
    $option = get_user_meta( get_current_user_id(), 'show_welcome_panel', true );
    if( !$option )
        return;
    ?>
    <style type="text/css">
        /*
         * Hide the Welcome Panel and the "dismiss" message at the bottom
         */ 
        #welcome-panel {opacity:0.01;} 
        p.welcome-panel-dismiss {display:none}
    </style>
    <script type="text/javascript">
    jQuery(document).ready( function($) 
    {
        /*
         * Left side image and text
         * - changing CSS properties and raw Html content of the Div
         */
        $('div.wp-badge').css('background-image','url(http://lifelabsnewyork.com/sitebuilder/images/brain-filled-173x192.jpg)');
        $('div.wp-badge').css('color','#000000');
        $('div.wp-badge').html('Custom Welcome');

        // Right side H3 (change raw Html content)
        $('div.welcome-panel-content h3').html('By StackExchange WordPress Answers');

        // Right side paragraph (idem)
        $('p.about-description').html('To be exact. The wp logo image (wp-badge.png) on the left, as well as the header next to it (.welcome-panel-content .about-description, .welcome-panel h3) and the text under it included in (.about-text, .about-description, .about-wrap li.wp-person a.web).');

        /*
         * Everything modified, fade in the whole Div
         * The fade in effect can be removed deleting this and the CSS opacity property
         */
        $('#welcome-panel').delay(300).fadeTo('slow',1);
    });     
    </script>
    <?php
}

    Note that I’m being lazy and printing the Styles and Scripts directly in the admin header.
    Please refer to the following Q&A on how to do it in a proper/formal fashion.
    How do I enqueue styles/scripts on certain /wp-admin pages?
    Where is the right place to register/enqueue scripts & styles