css - Style custom columns in admin panels (especially to adjust column cell widths)

admin管理员组

文章数量:1388835

I am using Wordpress as a CMS for a project which makes extensive use of custom post types. I need to display columns in admin panels for each custom post type in a different way.

I've already created the necessary columns and populated them. What I need to do is to adjust the CSS a bit. Most importantly I'm trying to tweak the width of certain columns. For example I don't need a column listing the post ID to be as wide as the post name.

I enqueued a stylesheet in the admin panels for my custom post types but I can't get it right to style the column widths.

I tried to adjust the max-width of th or td elements, but it's ineffective. From firebug I can see the css style is there, but it's doing nothing.

While I could find a lot of tutorials to add/edit custom columns, I didn't really gather much information about how to style such columns. Any hint?

Thank you!

I am using Wordpress as a CMS for a project which makes extensive use of custom post types. I need to display columns in admin panels for each custom post type in a different way.

I've already created the necessary columns and populated them. What I need to do is to adjust the CSS a bit. Most importantly I'm trying to tweak the width of certain columns. For example I don't need a column listing the post ID to be as wide as the post name.

I enqueued a stylesheet in the admin panels for my custom post types but I can't get it right to style the column widths.

I tried to adjust the max-width of th or td elements, but it's ineffective. From firebug I can see the css style is there, but it's doing nothing.

While I could find a lot of tutorials to add/edit custom columns, I didn't really gather much information about how to style such columns. Any hint?

Thank you!

• custom-post-types
• css
• cms
• columns
• wp-enqueue-style

Share Improve this question asked Nov 16, 2011 at 12:10 unfulviounfulvio 1,83477 gold badges3232 silver badges6363 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 33

I found a solution that works for me!

I dropped this code in functions.php :

add_action('admin_head', 'my_column_width');

function my_column_width() {
    echo '<style type="text/css">';
    echo '.column-mycolumn { text-align: center; width:60px !important; overflow:hidden }';
    echo '</style>';
}

Thanks Nicusor: Works great. I was able to change the width of selected columns on the Posts panel (e.g Title, Author, Categories) with your solution as follows:

add_action('admin_head', 'my_admin_column_width');
function my_admin_column_width() {
    echo '<style type="text/css">
        .column-title { text-align: left; width:200px !important; overflow:hidden }
        .column-author { text-align: left; width:100px !important; overflow:hidden }
        .column-categories { text-align: left; width:100px !important; overflow:hidden }
    </style>';
}

You should be able to set the column width using CSS quite easily. You can use the .column-{name} class to apply styles to the column cells (both th and td). For example:

.column-mycolumn { width:20%; }

Make sure you don't have other styles overruling your column width because of CSS specificity rules. Also, long words without spaces or large images could force the column to be wider than specified in some browsers.

You can try this solved your problems:

add_action('admin_head', 'my_admin_custom_styles');
function my_admin_custom_styles() {
    $output_css = '<style type="text/css">
        .column-date { display: none }
        .column-tags { display: none }
        .column-author { width:30px !important; overflow:hidden }
        .column-categories { width:30px !important; overflow:hidden }
        .column-title a { font-size:30px !important }
    </style>';
    echo $output_css;
}

When adding custom columns, you can also directly insert a small style snippet which you can use to size the column. A bit dirty, but saves another filter / call:

/**
 * Add custom columns to submission list
 *
 * @param $columns
 *
 * @return mixed
 */
function submission_add_columns( $columns ) {
    $columns['name']    = 'Name';
    $columns['iban']    = 'IBAN<style>.column-iban { width: 150px !important;}</style>';
    $columns['bic']     = 'BIC<style>.column-bic { width: 100px !important;}</style>';
    $columns['receipt'] = 'Receipt<style>.column-receipt { width: 175px !important;}</style>';
    $columns['status']  = 'Status<style>.column-status { width: 75px !important;}</style>';
    $columns['action']  = 'Action<style>.column-action { width: 225px !important;}</style>';
    // add the thickbox library
    wp_enqueue_style( 'thickbox' );
    wp_enqueue_script( 'thickbox' );

    return $columns;
}

add_filter( 'manage_edit-submissions_columns', 'submission_add_columns' );

本文标签： cssStyle custom columns in admin panels (especially to adjust column cell widths)