Forum Replies Created

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 31, 2021 at 7:39 am in reply to: Block Editor: Some blocks are showing black text fields with black text #147497
    metallion
    Participant

    Hi. I have managed to change the text color in html block, but shortcode block text color is still inherited

    Please refer to below screenshot.

    https://imgur.com/a/uKOJZ4O

    Left window: Current child-editor-styles.css file. Last 2 lines of code was added by me. I managed to change the html block text color to white with below code

    .wp-block-html .block-editor-plain-text {
    color: #fff !important;
}

    Middle window: current editor with inspect element on the shortcode field

    Right window: editor with inspect element on the shortcode field, but I manually changed the color of the field to #fff inside inspect element.

    As you can see, I can change the text color if I change the CSS of below element inside inspect element

    .block-editor .block-editor-plain-text {
    color: #fff;
}

    But if I put the same CSS inside child-editor-styles.css, the text color is still inherited, even if I use important. Please advise

    March 30, 2021 at 11:43 am in reply to: Block Editor: Some blocks are showing black text fields with black text #147444
    metallion
    Participant

    Hi. Thanks for the reply. I have tried your code in child-editor-blocks.css and it does not work. I did manage to change the text field background color by adding the following code into child-editor-styles.css

    
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="week"],
input[type="month"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
body .wp-playlist {
	background-color: #000;
}

    However as I mentioned above I wish to have a black background with white text, but I am not able to change the color of the text in the field as it is inherited. Inspecting the element gave me the information in below screenshot
    https://imgur.com/a/quIakVf
    Is it possible to remove the inheritance and change the color of the text in the field?

    March 29, 2021 at 7:04 am in reply to: Block Editor: Some blocks are showing black text fields with black text #147381
    metallion
    Participant

    Update: I managed to get the background to white by digging around the source using Chrome Inspect element on the text field, so it sort of works for now as I can at least see what I have typed. However, editing on a full white block on a predominantly black website isn’t really aesthetically pleasing to my eye, so I’m trying to make it a black text field with white text, but I’m unable to find where I should change the font colors as it is inherited. Trying to find out where the font color is inherited from returns me the below

    <website url>/wp-admin/load-styles.php?c=0&dir=ltr&load%5Bchunk_0%5D=dashicons,admin-bar,buttons,media-views,editor-buttons,wp-components,wp-block-editor,wp-nux,wp-editor,wp-block-library,wp-block-&load%5Bchunk_1%5D=library-theme,wp-edit-blocks,wp-edit-post,wp-format-library,wp-block-directory,common,forms,admin-menu,dashboard,list-tables,edi&load%5Bchunk_2%5D=t,revisions,media,themes,about,nav-menus,wp-pointer,widgets,site-icon,l10n,wp-auth-check,wp-color-picker&ver=5.5.3

    Can anyone link me to which file I should edit in order to change the font color? My issue now is specifically the text color for when the block is unselected, as I appear to be able to change the color for the text for when the block is selected in editor-styles.css

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)