css - How to customize Metaboxes?

admin管理员组

文章数量:1430595

I found many articles concerning this question but I'm still having troubles with this because my understanding of how to create metaboxes is really primitive. So, in order to create metaboxes, I just used a portion of code that I found online :

function texto_original_get_meta( $value ) {
global $post;

$field = get_post_meta( $post->ID, $value, true );
if ( ! empty( $field ) ) {
    return is_array( $field ) ? stripslashes_deep( $field ) : stripslashes( wp_kses_decode_entities( $field ) );
} else {
    return false;
}
}

function texto_original_add_meta_box() {
add_meta_box(
    'texto_original-texto-original',
    __( 'Texto original', 'texto_original' ),
    'texto_original_html',
    'event',
    'normal',
    'high'
);
}
add_action( 'add_meta_boxes', 'texto_original_add_meta_box' );

function texto_original_html( $post) {
wp_nonce_field( '_texto_original_nonce', 'texto_original_nonce' ); ?>

<p>
    <label for="texto_original_ttulo"><?php _e( 'Título', 'texto_original' ); ?></label><br>
    <input type="text" size="180" name="texto_original_ttulo" id="texto_original_ttulo" value="<?php echo texto_original_get_meta( 'texto_original_ttulo' ); ?>">
</p>    <p>
    <label for="texto_original_texto"><?php _e( 'Texto', 'texto_original' ); ?></label><br>
    <textarea name="texto_original_texto" rows="40" cols="175" id="texto_original_texto" ><?php echo texto_original_get_meta( 'texto_original_texto' ); ?></textarea>

</p>    <p>
    <label for="texto_original_idioma_original"><?php _e( 'Idioma original', 'texto_original' ); ?></label><br>
    <select name="texto_original_idioma_original" id="texto_original_idioma_original">
        <option <?php echo (texto_original_get_meta( 'texto_original_idioma_original' ) === 'Français' ) ? 'selected' : '' ?>>Français</option>
        <option <?php echo (texto_original_get_meta( 'texto_original_idioma_original' ) === 'English' ) ? 'selected' : '' ?>>English</option>
        <option <?php echo (texto_original_get_meta( 'texto_original_idioma_original' ) === 'Italiano' ) ? 'selected' : '' ?>>Italiano</option>
        <option <?php echo (texto_original_get_meta( 'texto_original_idioma_original' ) === 'Portugues' ) ? 'selected' : '' ?>>Portugues</option>
        <option <?php echo (texto_original_get_meta( 'texto_original_idioma_original' ) === 'Deutsch' ) ? 'selected' : '' ?>>Deutsch</option>
    </select>
</p><?php
}

function texto_original_save( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
if ( ! isset( $_POST['texto_original_nonce'] ) || ! wp_verify_nonce( $_POST['texto_original_nonce'], '_texto_original_nonce' ) ) return;
if ( ! current_user_can( 'edit_post', $post_id ) ) return;

if ( isset( $_POST['texto_original_ttulo'] ) )
    update_post_meta( $post_id, 'texto_original_ttulo', esc_attr( $_POST['texto_original_ttulo'] ) );
if ( isset( $_POST['texto_original_texto'] ) )
    update_post_meta( $post_id, 'texto_original_texto', esc_attr( $_POST['texto_original_texto'] ) );
if ( isset( $_POST['texto_original_idioma_original'] ) )
    update_post_meta( $post_id, 'texto_original_idioma_original', esc_attr( $_POST['texto_original_idioma_original'] ) );
}
add_action( 'save_post', 'texto_original_save' );

This code is creating three metaboxes: a text input for a title, a textarea for a content, and a select input. I inserted some lines to make metaboxes bigger, but they are not responsive. So I wonder How Can I define css like width: 100% in order to make each metabox responsive?

I tried creating css on style.css of my template but this is not working. So the question is: which file should I use in order to create css for this three metaboxes?

Regards,

Guillermo

本文标签： cssHow to customize Metaboxes