0

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 &nbsp; 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?

1 Answer 1

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.

3
  • Do you really need step 1? If you just put that CSS in the 'additional CSS' of your theme, then you should be good. I believe. Apr 10, 2019 at 0:18
  • @RickHellewell Additional CSS does not get added to the editor. Apr 10, 2019 at 1:07
  • This worked perfect! Thank you so much. Apr 10, 2019 at 16:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.