wordpress creating a full-width dashboard widget

Question

How can I create a full-width dashboard widget in WordPress?

I want to create a widget like the new one "welcome" in WordPress 3.3.

That plugin is in dashboard.php in wp_welcome_panel() but I don't know how they show it full-width.

They create a div "welcome-panel" outside the main div where all the widgets go, "dashboard-widgets-wrap":

<div id="welcome-panel" class="welcome-panel"></div>
<div id="dashboard-widgets-wrap">
   <div id="dashboard-widgets" class="metabox-holder">
      <div id="postbox-container-1" class="postbox-container" style="width:50%;">
      <div id="postbox-container-2" class="postbox-container" style="width:50%;">
      <div id="postbox-container-3" class="postbox-container" style="display:none;width:50%;">
      <div id="postbox-container-4" class="postbox-container" style="display:none;width:50%;">
   </div>

How can I achieve that?

Edit

I've found in wp-admin/index.php in line 90 this:

<div class="wrap">
<?php screen_icon(); ?>
<h2><?php echo esc_html( $title ); ?></h2>

<?php wp_welcome_panel(); ?>

<div id="dashboard-widgets-wrap">

<?php wp_dashboard(); ?>

<div class="clear"></div>
</div><!-- dashboard-widgets-wrap -->

</div><!-- wrap -->

So they do it inserting directly the code.

The only solution I see is maybe using jQuery?

Any other option?

A full-width widget can be very useful for adding content at the top of your own themes with updates or corroborative info or anything.

Answer 1

Starting with WordPress 3.5.0, you can directly modify the welcome panel:

First remove the existing content, then add your own function to render the content:

remove_action( 'welcome_panel', 'wp_welcome_panel' );
add_action( 'welcome_panel', 'my_custom_content' );

function my_custom_content()
{
    ?>
    <h1>Hello!</h1>
    <?php
}

Answer 2

I was able to achieve this goal by modifying the admin css as below:

add_action('admin_head', 'panfor_admin_custom_styles');
function panfor_admin_custom_styles() {
    $output_css = '<style type="text/css">
        @media only screen and (min-width: 800px) and (max-width: 1499px) {
        #dashboard-widgets #postbox-container-1 { width: 100% !important; }
        #dashboard-widgets #postbox-container-2 { width: 50% !important; }
        #dashboard-widgets #postbox-container-3 { width: 50% !important; }
    }
    @media only screen and (min-width: 1500px) and (max-width: 1800px) {
        #dashboard-widgets #postbox-container-1 { width: 100% !important; }
        #dashboard-widgets #postbox-container-2 { width: 50% !important; }
        #dashboard-widgets #postbox-container-3 { width: 50% !important; }
    }
    </style>';
    echo $output_css;
}

The above code enforces full width for all widgets in the first column of Dashboard for certain screen widths. The second and third columns are displayed below first colum.

This is what it looks like in my Dashboard

So it is not the widget as such that determines its width, but the css styles.

There is still a small problem in my CSS that I cannot solve. Namely, the second and third columns switch places, depending on the width of the window.