CSS WP UI design

I plan to work on this, I would like to add a custom theme to make it blend in more with the WP admin https://github.com/Hube2/acf-medium-editor/issues/7. But currently you are limited to one of the existing themes https://github.com/yabwe/medium-editor/wiki/themes. Please see other notes about how to change to one of the existing themes.

I have just updated and added a new WP theme to the editor and made other changes so that it looks and feels a bit more like WP. Let me know what you think.

Thanks man! :)) It is nice and much better. Can you please stop hiding #medium-editor-container and #medium-editor-toolbar-1
It is little annoynig. Input jump to down, if I select text.

Similar plugin is https://github.com/tybruffy/ACF-Single-Line-WYSIWYG

Thanks

This is a feature of Medium Editor, the engine behind the editor field and controls. If text is not selected the buttons are disabled. I believe that having the buttons always appear would be confusing to users as to why they don’t do anything. I have to choose between one annoyance or the other and since one of them would cause more confusion it’s the one I chose.

The other choice I have is the there will always be a gap equal to the button bar between the label and the editor field. I thought that this looked bad.

If I get enough people tell me they’d like to see it work another way then I’ll consider it. I put up an issue about this over on github here https://github.com/Hube2/acf-medium-editor/issues/12, if you have a preference then post what it is over there.

Ok and what about

	[id^="medium-editor-container-"] {
		position: relative;
	}

        .medium-editor-toolbar {
		position: absolute;
	        top: -33px;
	        left: 0px;
        }

I tried this, and it worked fine as long as the toolbar was a single line. As soon as the buttons role over to a new line they cover the editor.

you have absolutily right! new code

	[id^="medium-editor-container-"] {
		position: relative;
	}

	.medium-editor-toolbar {
		position: absolute;
		top: 0px;
		left: 0px;
		-webkit-transform: translateY(-100%);
		-moz-transform: translateY(-100%);
		-ms-transform: translateY(-100%);
		-o-transform: translateY(-100%);
		transform: translateY(-100%)
	}

• This reply was modified 7 years, 10 months ago by Hrohh.

I like it, it will be in the next update. I just did an update to fix a bug in safari this morning and I don’t want to do another one already, they kind of frown on making updates too frequently. I have already made this change on the github repo and I’ll push this change to WP later this week.

These changes have been implemented on the update I’m pushing now.

Nice, thx!