I am editing the Wordpress back-end with CSS through a plugin called "Admin CSS". I can edit almost anything, but not the height of the <p> tag. Right now, the height of the <p> tags is to big (please note, the <p> tags in admin backend is created when hitting enter (which creates a   in WordPress code but a <p> when checking with inspector).

When I check the code with inspector in chrome, the CSS changes I made for the <p> tag is not there. It only shows styling from user agent.

What can I do to change the <p> style? Any src code I can change?

Here is all the styles I have tried (I also tried them all with use of !important and tried to change auto to 0 and unset without any luck):

p {
    margin: auto;
}

body#tinymce p {
    margin: auto;
}

#tinymce p {
    margin: auto;
}

Any ideas?

I am editing the Wordpress back-end with CSS through a plugin called "Admin CSS". I can edit almost anything, but not the height of the <p> tag. Right now, the height of the <p> tags is to big (please note, the <p> tags in admin backend is created when hitting enter (which creates a   in WordPress code but a <p> when checking with inspector).

When I check the code with inspector in chrome, the CSS changes I made for the <p> tag is not there. It only shows styling from user agent.

What can I do to change the <p> style? Any src code I can change?

Here is all the styles I have tried (I also tried them all with use of !important and tried to change auto to 0 and unset without any luck):

p {
    margin: auto;
}

body#tinymce p {
    margin: auto;
}

#tinymce p {
    margin: auto;
}

Any ideas?

• admin-css

Share Improve this question edited Apr 9, 2019 at 19:33 Qaisar Feroz 2,14711 gold badge99 silver badges2020 bronze badges asked Apr 9, 2019 at 19:24 Hejhejhej123Hejhejhej123 14311 silver badge55 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

If you're trying to change the styles of the wysiwyg editor, which I assume you are based on your code example, you need to use the add_editor_style() function.

As per the example in the code reference.

Step 1

Add the following to the functions.php file of your theme.

/**
 * Registers an editor stylesheet for the theme.
 */
function wpdocs_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

NB The stylesheet is relative to theme root.

Step 2

Next, create a file named custom-editor-style.css in your themes root directory. Any CSS rules added to that file will be reflected within the TinyMCE visual editor. The contents of the file might look like this:

#tinymce p {
    margin: auto;
}

For other p tags you could try placing some inline style to the admin_head. Like so,

// Add inline CSS in the admin head with the style tag
// put this in to your theme's functions.php
function my_custom_admin_head() {
    echo '<style>p {margin: auto;}</style>';
}
add_action( 'admin_head', 'my_custom_admin_head' );

NB Also make sure the css selectors are correct. I didn't check them for these examples.