Home › Forums › Free Themes › Signify Dark › Block Editor: Some blocks are showing black text fields with black text
- This topic has 5 replies, 2 voices, and was last updated 3 years, 7 months ago by metallion.
-
AuthorPosts
-
March 28, 2021 at 3:40 pm #147354metallionParticipant
Hi. I’m experiencing some issue in the visual editor with blocks with text fields showing black background and text entered is black. I can see the text only when highlighted, as per below screenshot
This issue applies to blocks like shortcode, HTML and youtube, where there is a text field involved. How do I change the background color of the text field or the text color? Right now I’m unable to view my typing in real time making it hard for me to do any editing.
March 29, 2021 at 7:04 am #147381metallionParticipantUpdate: 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
March 30, 2021 at 6:53 am #147423PsinkKeymasterHello Metallio
Sorry for keeping you waiting.
Here is the solution, In order to change the css of block editor you need to code css in the child-editor-blocks.css
Here is the few code – add this code at the end
.editor-styles-wrapper.edit-post-visual-editor { background-color: #000; color: #999999; } .editor-styles-wrapper, .editor-styles-wrapper input, .editor-styles-wrapper select, .editor-styles-wrapper textarea, .editor-styles-wrapper input[type="date"], .editor-styles-wrapper input[type="time"], .editor-styles-wrapper input[type="datetime-local"], .editor-styles-wrapper input[type="week"], .editor-styles-wrapper input[type="month"], .editor-styles-wrapper input[type="text"], .editor-styles-wrapper input[type="email"], .editor-styles-wrapper input[type="url"], .editor-styles-wrapper input[type="password"], .editor-styles-wrapper input[type="search"], .editor-styles-wrapper input[type="tel"], .editor-styles-wrapper input[type="number"], .editor-styles-wrapper .editor-styles-wrapper .mce-content-body a:not(.more-link):not(.button):not(button):hover, .editor-styles-wrapper .editor-styles-wrapper .mce-content-body a:not(.more-link):not(.button):not(button):focus, .editor-styles-wrapper .editor-styles-wrapper .mce-content-body a:not(.more-link):not(.button):not(button):hover, .editor-styles-wrapper .editor-styles-wrapper .mce-content-body a:not(.more-link):not(.button):not(button):focus, .editor-styles-wrapper a:not(.more-link):not(.button):not(button):hover, .editor-styles-wrapper a:not(.more-link):not(.button):not(button):focus, .editor-styles-wrapper textarea, .editor-styles-wrapper .wp-playlist-light .wp-playlist { color: #fbf4f4 !important; } .editor-styles-wrapper textarea.editor-post-title__input, .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6 { color: #000 !important; }
If you don’t where the child-editor-blocks.css file is then follow the screen record
https://www.awesomescreenshot.com/video/3222469?key=5c071d6abc940f7cf9ddcf102de3d41fHave a great day
Regards,
psinkMarch 30, 2021 at 11:43 am #147444metallionParticipantHi. 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 31, 2021 at 12:15 am #147481PsinkKeymastercan you please share a screenshot of the entire browser. It quite defaults to find the actual issue only with the inspector screenshot
if color for text is not working you can use important
ascolor: #000 !important;
Regards,
psinkMarch 31, 2021 at 7:39 am #147497metallionParticipantHi. I have managed to change the text color in html block, but shortcode block text color is still inherited
Please refer to below screenshot.
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
-
AuthorPosts
- You must be logged in to reply to this topic.